OpenCode 通过 SKILL.md 按需加载可复用指令（Agent Skills），让 AI 代理能调用专门的绘图能力。本文介绍 GitHub 上用于生成流程图/架构图的几款社区 Skill：Archify、skill-flowchart、fireworks-tech-graph、excalidraw-diagram-generator、Cocoon-AI、drawio-skill，以及它们同 Mermaid / draw.io 等工具的关系。

为什么需要画图 Skill

写技术方案、架构文档、README 时，最费时间的往往不是理清逻辑，而是画图：

  • draw.io / Visio：手动拖拽组件、连线、调整布局、配色，一张复杂微服务架构图要十几分钟；
  • Mermaid / PlantUML：要记 DSL 语法，多分支流程、复杂云架构很容易写错；
  • 改一个组件位置，整图重排，再花十分钟。

画图 Skill 解决的是：用一句大白话直接生成专业图表，把「描述架构」到「得到图」之间的工具切换成本降到零。

Skill 机制简介

OpenCode 的 Agent Skill 通过约定目录加载指令，常用路径：

  • 项目级：.opencode/skills/<name>/SKILL.md
  • 全局：~/.config/opencode/skills/<name>/SKILL.md
  • 兼容 Claude / Codex：.claude/skills/、.agents/skills/（OpenCode 也会自动发现）

每个 Skill 以 YAML frontmatter 声明 name、description，代理通过内置 skill 工具按需加载，例如 skill({ name: "archify" })。

一、Archify

Archify 是当前最活跃的画图 Skill（6.5k+ star），把纯英文系统描述直接生成为架构、工作流、时序、数据流、生命周期五类图，输出单文件自包含 HTML。它 fork 自 Cocoon-AI 的架构图生成器并做了 2.x 完整重构。

  • 5 种图类型：Architecture / Workflow / Sequence / Data Flow / Lifecycle
  • 3 种视觉预设：经典 classic、流光 signal-flow、精确 blueprint
  • 明暗主题一键切换、聚焦探索、路由追踪、语义对比、引导式故事播放
  • 导出 PNG / JPEG / WebP / 双主题 SVG / 带轨迹 WebM
  • JSON IR + schema 校验 + 布局检查 + 生成后 checker，可选标准/展示质量档

机制要点（来源：jackssybin 源码拆解）：自然语言 → JSON IR → 五种渲染器 → 内联 SVG + HTML → checker 校验 → 导出。Archify 不做自动布局（dagre/elk），而是让 LLM 自己决定坐标、语义色与安全边界——「布局本身就是信息」。PNG 导出用浏览器 4× 原生光栅化（非位图放大），SVG 内嵌双主题 CSS 变量，贴进 GitHub README 会随读者 prefers-color-scheme 自动切色。

安装

1
2
3
4
5
6
7
8
9

# 方式一：npx skills 全局安装（推荐）
npx skills add tt-a1i/archify -g

# 临时试用
npx skills use tt-a1i/archify@archify --agent opencode

# 方式二：解压 zip 到全局 skills 目录
unzip archify.zip -d ~/.config/opencode/skills/
cd ~/.config/opencode/skills/archify && npm install   # 可选，装 ajv 做 schema 校验

使用

对代理说人话即可，例如：

1
2

分析这个仓库，用 archify 画出高层运行时架构图：展示 8–12 个核心组件、
一条主路径、外部依赖和信任边界，细节放卡片里而不是堆连线。

或聚焦一个流程：

1
2

用 archify 画登录流程：Browser -> Web App -> API -> JWT 校验 ->
Redis 会话查询 -> PostgreSQL 回退。把缓存未命中路径作为次要分支。

继续对话微调：加上 Redis、把 auth 移到左边、高亮回滚路径。

二、skill-flowchart

skill-flowchart 是专为 AI 编码代理设计的「代码库/工作流 → 交互式 HTML 流程图」Skill，强调读取真实代码、按层级组织，顶层保持简洁、可逐层钻取。

  • 顶层仅 5–9 个节点，秒懂全局
  • 节点可展开为模态子图（子流程、Prompt、模板、产物）
  • LLM 调用是一等公民节点，附带逐字 Prompt 与模型信息
  • 显式表达循环、分支、汇合，颜色仅在有意义时使用
  • 用 Cytoscape.js / Chroma.js / Prism.js（CDN 加载）

安装

1

git clone https://github.com/danshapiro/skill-flowchart.git ~/.config/opencode/skills/flowchart

依赖：python3（必需，渲染器只用标准库）；Node.js + Playwright（可选，用于视觉 QA 截图）。

使用

请求中包含「flowchart」即可：

1

给这个仓库的请求管线做一张交互式 flowchart。

底层由代理调用 python3 scripts/render_flowchart.py 生成单个自包含 HTML。

三、fireworks-tech-graph

fireworks-tech-graph 是「美观派」代表：用大白话描述生成 SVG，再导出高清 PNG，配色舒适，中文友好，覆盖 14 种图类型（流程图、架构图、时序图、思维导图、UML 全家桶等），还专门做了 AI/Agent 方向模板（RAG pipeline、多 Agent 协作流程），带连线碰撞检测。

  • 7 种视觉风格可切：暗黑终端风、科技线稿风、手绘风等，同一张图换风格重生成即可
  • 生成的不只是 PNG，还有可编辑的 SVG 源文件（可拖进 PPT 取消组合后单独编辑元素）
  • 短板：节点多、连线交叉时可能出现箭头错乱重叠，没有更深层的纠错机制

安装与使用

1
2
3
4
5

# 安装技能
npx skills add yizhiyanhua-ai/fireworks-tech-graph -g

# macOS 需安装底层依赖（SVG 转 PNG）
brew install librsvg

使用时一句话：

1

给我画一张 RAG pipeline 的流程图，用暗黑终端风格。

四、Excalidraw Diagram Generator

excalidraw-diagram-generator 是 GitHub 官方 awesome-copilot 仓库收录的 Skill，最大特点是生成后可继续手动编辑——输出 .excalidraw JSON 文件，拖进 excalidraw.com（120k star 开源在线画板）即可继续改颜色、挪位置、加箭头、删节点，适合需要反复打磨或协作编辑的场景。

  • 支持 9 种图：流程图、关系图、思维导图、架构图、数据流图、泳道图、类图、时序图、ER 图
  • UML 关系线按规范细分：继承、实现、关联、依赖、聚合、组合
  • 可调用 AWS / GCP / Azure 官方图标库画云架构

安装：将 skills/excalidraw-diagram-generator 目录克隆到 ~/.config/opencode/skills/ 即可。

五、Cocoon-AI Architecture Diagram Generator

Cocoon-AI/architecture-diagram-generator 是 Archify 的前身（v1.1），专注架构图一种类型，输出嵌 SVG 的独立 HTML——深色主题（Slate-950 背景 + 网格）、JetBrains Mono 字体，自带设计感，适合给老板/客户做系统方案汇报。

  • 语义配色固定：前端青、后端绿、数据库紫、云服务琥珀、安全玫红、外部灰
  • 导出按钮内置：复制 PNG 到剪贴板 / 下载 PNG / 下载 PDF
  • 兼容 Claude.ai（Customize → Skills 上传 zip）与 Claude Code（~/.claude/skills/）
1
2

# Claude Code 安装
unzip architecture-diagram.zip -d ~/.claude/skills/

提示：Archify 是它的 2.x 完整重构（新增浅色主题、多格式导出、五种渲染器、schema 校验等），新用户建议直接用 Archify；同系列还有流程图向的 process-flow-diagram-generator。

六、drawio-skill

drawio-skill（5.4k star，中文文档）是「严谨派」代表：把自然语言描述变成 .drawio XML，通过 draw.io 桌面版原生 CLI 导出 PNG / SVG / PDF / JPG，图类型最全、连线纠错最完整。

  • 11 种图表类型预设：ER 图、UML 类图、序列图、C4、架构图、ML/深度学习、流程图、SysML、BPMN、网络拓扑、跨职能泳道图
  • Mermaid → 原生 .drawio（draw.io ≥ 30）：28 种类型（mindmap、gantt、timeline、sankey、kanban 等）
  • 可视化代码库：Python / JS-TS / Go / Rust 导入关系图、类继承层级
  • IaC → 架构图：Terraform / Kubernetes / docker-compose，自动渲染官方 AWS / Azure / GCP / K8s 图标
  • SQL DDL → ER 图、确定性时序图引擎、C4 模型多页下钻
  • 两道质量关卡：validate.py 结构校验（悬空连线、重复 ID、元素重叠）+ 读回 PNG 视觉自检与自动修复（最多 2 轮），外加 5 轮迭代反馈
  • 形状搜索：10,000+ 官方 draw.io 形状精确匹配，321 个 AI/LLM 品牌图标 + 18 个数据存储品牌
  • 零配置：从单个 SKILL.md 运行，无需 MCP / 后台 daemon；产物 .drawio 可直接用 draw.io 打开再编辑

安装与使用

1
2
3
4
5
6
7
8

# 1. 安装 draw.io 桌面版 CLI
brew install --cask drawio      # macOS
# Windows / Linux：从 drawio-desktop releases 下载安装包，Linux 无头导出需 xvfb

# 2. 安装技能
npx skills add Agents365-ai/365-skills -g
# 或手动：
git clone https://github.com/Agents365-ai/drawio-skill.git ~/.config/opencode/skills/drawio-skill

使用时一句话描述即可，例如：

1
2

画一个微服务电商架构图，包含 Mobile/Web/Admin 客户端，API Gateway（含认证+限流+路由），
Auth/User/Order/Product/Payment 微服务，Kafka 消息队列，以及各数据库与 Redis Cache。

同系列还有 excalidraw-skill（手绘风）、mermaid-skill（文本驱动）、plantuml-skill（UML）、tldraw-skill（白板），可按场景选择。

七、六款 Skill 对比

维度Archifyskill-flowchartfireworksexcalidraw-skillCocoon-AIdrawio-skill
图类型5 种层级流程图14 种9 种架构图 1 种11 预设 + 28 种 Mermaid
输出自包含 HTML自包含 HTMLSVG / PNG.excalidraw 可再编辑自包含 HTML.drawio 可再编辑
中文友好一般一般好一般一般较好
质量校验schema + 布局 + checker视觉 QA linter连线碰撞检测——最强（双关卡）
风格设计稿级、主题切换简洁钻取7 种风格美观手绘风深色专业风清晰严谨
适合场景多图类型 + 导出多格式代码/LLM 管线可视化中文日常配图需手动再打磨/协作方案汇报复杂系统架构图

腾讯云实测（同文档、同提示词、同模型）：fireworks 15 分钟 / 3.6M token，drawio 约 30 分钟 / 4.4M token——简单图选 fireworks，复杂图选 drawio，两个一起装不冲突。

八、与 Mermaid / Excalidraw / draw.io 的关系

这类 AI Skill 并非替代传统画图工具，而是层级互补：

维度MermaidExcalidraw / draw.ioAI Skill（以 Archify 为例）
输入Mermaid DSL 代码鼠标拖拽 GUI自然语言描述
输出PNG / SVG图片 / 文件单文件 HTML / PNG / SVG
AI 友好度中（DSL 括号易错）低（无法 AI 驱动）高（专为 AI 设计）
交互性静态取决于平台主题切换、复制、导出按钮

AI 直接生成 Mermaid 常出现括号不匹配、关键字拼错；Archify 走「AI 输出 HTML 模板 + 浏览器渲染」，绕开 DSL 解析问题。

选型建议

  • 要多种图类型 + 明暗主题 + 导出 PNG/SVG/WebM → Archify
  • 把代码库或 AI Prompt 管线转成可逐层钻取的交互式流程图，关心 LLM 调用细节 → skill-flowchart
  • 中文文档日常配图、要 SVG 二次编辑 → fireworks-tech-graph
  • 生成后还要手动微调或多人协作编辑 → excalidraw-diagram-generator
  • 只要一张深色专业的架构汇报图 → Cocoon-AI（或直接 Archify）
  • 复杂系统架构图（节点多、连线密、层级深）→ drawio-skill
  • 多款可共存，按任务让代理选择对应 skill。

参考引用