SeeCode 画图
你只需要写一段紧凑的 JSON spec，剩下的交给脚本 —— 布局、配色、动效、检查、导出都由它完成。不要手写 SVG 或 HTML。
下文命令假设当前目录是本技能根目录；SC 是 node scripts/seecode.mjs 的简写。每条命令输出一行 JSON。
来源与署名
本技能是开源项目 SeeCode v0.6.2 的封装分发版，不是原创作品。
- 上游项目：SeeCode — https://github.com/Aryanutkarsh/SeeCode
- 上游作者：Aryanutkarsh
- 上游许可证：MIT（全文见本文件末尾，亦见
LICENSE.txt） - 本版改动：仅新增中文说明、
AGENTS.md、examples/示例 spec 与封装层说明；渲染内核、布局引擎、图型定义、导出逻辑均未修改 - 本版版本号 1.0.0 是封装版本号，与上游 0.6.2 无关
上游 MIT 许可证允许再分发，条件是保留版权声明与许可声明 —— 本文件末尾已完整内嵌。
上游官方安装方式（与本技能等效，GitHub 可直连时可直接用）：
npx skills add Aryanutkarsh/seecode -g
# Claude Code 插件市场
/plugin marketplace add Aryanutkarsh/seecode
/plugin install seecode@seecode
选择本技能而非直装上游的理由只有一个：国内网络下 GitHub 与 Google Fonts 可能不通，本版已把字体策略、中文文档与常见问题一并处理。
什么时候用它
用户说这些的时候用：
- 画流程图 / 架构图 / 时序图 / 状态机 / ER 图 / 甘特图 / 时间线 / 组织架构图 / 鱼骨图 / 桑基图 / 热力图
- "把这段代码的结构画出来"、"把这个流程可视化"、"做一张技术架构图"
- "把 Mermaid / PlantUML / draw.io 转成图"
- "导成 PNG / SVG / GIF / MP4"
- draw a diagram, flowchart, architecture, sequence diagram, visualize this
不适用：需要精确到像素的 CAD 图纸、需要真实三维渲染的场景、需要实时数据联动的仪表盘。
环境要求
- Node.js 20+，零依赖，不需要
npm install - 导出位图或动图（PNG / JPEG / GIF / MP4）需要本机有 Chrome / Chromium
- 渲染本身不联网
自检：
node scripts/seecode.mjs doctor
输出 {"ok":true,...} 表示可用；若提示找不到 Chrome，把浏览器路径写入环境变量 SEECODE_CHROME（路径用正斜杠，例如 C:/Program Files/Google/Chrome/Application/chrome.exe）。
三步出图
第 1 步：写 spec
最小可用 spec（存为 chart.json）：
{
"type": "flowchart",
"title": "下单流程",
"nodes": [
{ "id": "a", "label": "提交订单" },
{ "id": "b", "label": "风控校验" },
{ "id": "c", "label": "支付" }
],
"edges": [
{ "from": "a", "to": "b" },
{ "from": "b", "to": "c" }
]
}
第 2 步：渲染
node scripts/seecode.mjs render chart.json
产出同名 .html，浏览器打开即可交互：可缩放、可拖动、点节点看详情。
第 3 步：导出（可选）
node scripts/seecode.mjs export chart.html --formats png # 单张
node scripts/seecode.mjs export chart.html --formats png,svg # 多格式
node scripts/seecode.mjs export chart.html --formats gif,mp4 # 动图/视频
图型速查（45 种）
| 类别 | 图型 |
|---|---|
| 关系与架构 | architecture flowchart data-flow dependency deployment high-level state er db-schema uml-class swimlane architecture-delta it-state medallion dp-integration |
| 时间与车道 | sequence timeline gantt journey |
| 结构与层级 | tree org-chart process loop nested layers exploded isometric-plan isometric venn pyramid fishbone kanban story-map quadrant dp-security-matrix |
| 数据图表 | bar sankey line scatter radar polar waterfall treemap heatmap wardley |
不确定用哪个：node scripts/seecode.mjs types 列出全部。
常用设置
以下几项都写在 spec 顶层（不要嵌套在 settings 里，否则会报 E_SPEC unknown field）：
{
"type": "architecture",
"title": "系统架构",
"lang": "zh-CN",
"fonts": "system",
"size": "slide",
"skin": "light"
}
| 键 | 取值 | 用途 |
|---|---|---|
lang |
zh-CN / ja / en … |
标签语言。中日韩文字会在字符间换行 |
fonts |
system |
中文环境建议设 system，避免拉取在线字体导致白屏 |
size |
slide / wide / square / auto |
画布比例，slide 适合进 PPT，square 适合社交图 |
skin |
light / dark / terminal 等预设 |
整体配色风格 |
motion |
auto / trace / 具体动效名 |
动效方式，auto 按图型自动选 |
也可用命令行覆盖：node scripts/seecode.mjs render chart.json --skin dark。
更多交付场景（PPT / 社交媒体 / 文档嵌入）见 references/delivery.md。
常见问题
| 现象 | 原因 | 处理 |
|---|---|---|
| 中文显示成方框 | 未设置语言或字体 | spec 里加 "lang": "zh-CN"，并设 "fonts": "system" |
| 打开页面一直转圈 | 在拉取在线字体，网络不通 | 设 "fonts": "system" |
| 导 PNG 失败 | 本机没有 Chrome | 安装 Chrome，或设置 SEECODE_CHROME 环境变量 |
连线报 W_ROUTE_PORTS 警告 |
汇入同一节点的连线过多（>4） | 减少汇入连线，或拆成两级节点 |
| 节点文字被截断 | 标签过长 | 用 sub 放副标题，tag 放短标签（≤8 字） |
完整字段说明见 references/spec.md，图型细节见 references/types/。
本封装层做了什么
以下内容由发布者整理，不属于上游 SeeCode 项目：
- 中文文档：本文件与
AGENTS.md，覆盖触发词、图型速查、设置项与常见问题。 - 示例 spec：
examples/下两个可直接渲染的样例，用于快速验证环境与控制布局。 - 跨 Agent 入口：
AGENTS.md让 Codex、Cursor 等读取AGENTS.md的 Agent 也能驱动同一套命令，与SKILL.md能力完全一致，不是两套实现。 - MCP 适配方案：可将
scripts/lib/render.mjs导出的renderSpec()直接嵌入服务端进程调用，无需子进程、无需 Chrome、无注入面，适合把画图能力接进自有平台。 - 安装与环境自检：提供把本技能放入对应 Agent 技能目录的安装脚本，以及
doctor环境自检说明。 - 资源内联（v1.0.1）：
scripts/lib/mark.mjs原先在运行期读取assets/下的三张 PNG（水印符号、字标、favicon）。部分平台打包分发时会过滤图片文件，导致ENOENT崩溃。故改为把三张图以 base64 内联进scripts/lib/marks-data.mjs，不再依赖任何外部图片文件，渲染结果逐像素一致。
上游的渲染内核、布局算法、45 种图型定义、导出管线保持原样；除上述第 6 条资源内联外未作修改。
边界
- 不替代专业绘图软件：需要精确尺寸、图层管理、打印出血的设计稿不适用
- 不做实时数据绑定：每次出图都是静态快照
- 不保证任意 spec 都能一次成功：复杂图可能需要按警告调整节点或连线
许可证（完整 MIT 声明）
本技能所包含的 SeeCode 代码采用 MIT 许可证，原文如下：
MIT License
Copyright (c) 2026 Aryanutkarsh
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
本封装层（中文文档、示例、AGENTS.md、安装脚本）同样以 MIT 许可证发布。
上游版本对应关系见 references/upstream.md。
