AI 画架构图的两款 skill，Archify 对 Excalidraw 怎么选？

AI 画架构图的两款 skill，Archify 对 Excalidraw 怎么选？

想让 AI Agent 画一张架构图，一句话发过去，多数时候收到的是满屏方框套方框。方框里塞着字，含义全靠后来补的标签撑着，图形本身不说话。
直到两款 skill 把「画得好」写进机器自纠错，一份交付能直接用的交互 HTML，一份交付还能接着手改的白板稿。
两款都开源、都叫 diagram skill，星数相差十倍以上。本文把两款都装上，用同一句话各跑一遍，把取舍摆开来看。

让 AI Agent 画架构图，先要回答选哪款 skill。Archify 与 Excalidraw Diagram Skill 都能画，路线却正好相反，前者把图做成能交付的成品，后者把图做成能继续改的画布。读完本文可带走一套选择依据，按交付目标定位，并顺带知道装好后第一张图怎么让它画。

快速导航

先看两张名片，两分钟定位这两款是谁：

维度

Archify

Excalidraw Diagram Skill

数据取自两个仓库的公开主页与本机实测，时间为 2026 年 9 月。

01 Archify，把架构图出成能交付的成品

一句话概括

Archify 把「正式感」做进产物。给它一句自然语言，或直接粘贴一段 Mermaid 代码，返回一份自包含的交互 HTML：

• SVG 内联在文件里，深浅双主题可切，连线可选动效

• 浏览器打开即可缩放、搜索、沿连线追踪

• 整份文件拷走即用，不依赖外部图床或服务

仓库首页把定位写得很直白，目标是为 coding agent 提供「精美、可验证」的架构图，覆盖架构、工作流、时序、数据流、生命周期五类图。

一长串想清楚再动手的规则

它支持的输入与产物清单如下：

• 输入支持自然语言，或粘贴 Mermaid 的 flowchart、sequenceDiagram、stateDiagram

• 5 类 schema 驱动出图，分别是 architecture、workflow、sequence、dataflow、lifecycle

• 产物是单文件 HTML，内联 SVG，深浅主题，可选连线动效

• 导出格式覆盖 PNG、JPEG、SVG、WebM

• lane、col 自动布局，配上诊断驱动的几何修复

质检员盯完九项才放行

它区别于「发一句 prompt 就等结果」的普通用法，在于一条自带的机器校验命令 archify validate：

• showcase 质量档要过 9 项 artifact 检查

• 出图必须 0 布局错误、0 警告，才允许放行

• 标签重叠、节点间距、箭头方向这类问题，由机器先挑出来

这步校验跑的是几何规则，由附带的 node bin 执行，不依赖模型看图，主模型能否读图都不影响。

安装

整套 skill 自带校验与渲染用的 node bin，复制进技能目录即可。

git clone https://github.com/tt-a1i/archify
# 把整个 skill 包放进 Claude Code 技能目录，自包含，不依赖 Excalidraw
cp -r archify ~/.claude/skills/

装完重启 Claude Code，即可让它直接出图。本机实测版本为 v2.15。

适合的场景

• 为文档、PPT、网页配正式可交互的架构图

• 画系统架构、时序、数据流、状态机

• 需要把图导出多格式，交付给客户或团队

02 Excalidraw Diagram Skill，画一张还能继续改的白板稿

一句话概括

这一款交付一份 .excalidraw JSON，格式是 Excalidraw 的原生格式。拿到文件拖进 Excalidraw.com 或 Obsidian 的插件，所有元素仍可点可拖，画完不满意随手就改。成图是手绘白板风，有马克笔的手感，不是一套端端正正的工程图。

仓库自述的一句话定位

coleam00 在仓库里给它写下的定位很短：

「not just boxes-and-arrows, diagrams that argue visually」

这行英文讲的是核心方法 argue visually，译成中文是「用画面来论证」。图形的结构要镜像概念的运作方式，把图上的说明文字全部剥掉，光看形状与布局，概念仍然站得住。

图纸自己会讲道理

• 剥掉说明文字，图仍能自解释，这是每张图要过的检验

• 结构、形状要能镜像概念的行为，避免方块摞方块

• references 里单独一个 color-palette.md，整组换品牌配色只改这一个文件

• element-templates 与 json-schema 提供现成的元素模板

画完不算完，渲染出来自己回看

这一款把自纠错做成「给机器一只眼睛」，循环分三步：

• 模型画完，先把 JSON 渲染成 PNG

• 再把 PNG 交给能读图的模型回看，挑文字溢出、元素重叠、箭头错位

• 找到毛病直接改 JSON，改完重新渲染，2 到 4 轮收敛

这套视觉回看正是 AI Agent 平时缺的一环。它默认看不见自己画了什么，解法是把图渲染出来，让它自己看。

自纠错的前提，是模型能看图

这套回看的效果，取决于「看图」那一步是否成立。若主模型本身不读图，比如用 DeepSeek 的默认模型，画完渲染出的 PNG 没人能回看，自纠错就断在半路。需要先配一条看图通道，两条路任选：

• DeepSeek 官方提供 deepseek-v4-flash-vision-exp，支持图像输入，在 Claude Code 里设成一个模型槽位，看图时切过去

• 派一个带视觉能力的子代理，专职读渲染出的 PNG，按 skill 的缺陷清单挑毛病

安装

安装方式接近复制粘贴，首次用前让 Agent 按 README 装一次渲染依赖。

git clone https://github.com/coleam00/excalidraw-diagram-skill
# 把 excalidraw-diagram 文件夹复制进技能目录
cp -r excalidraw-diagram-skill/excalidraw-diagram ~/.claude/skills/
# 首次用前，让 Agent 按 README 装渲染依赖（uv sync 加一个渲染浏览器）

成品图靠 Excalidraw.com 免费渲染，或用 Obsidian 的 Excalidraw 插件。

适合的场景

• 做手绘白板风的教学示意图，讲概念、关系、工作流

• 画完想在 Excalidraw 里继续手工改，不被成品锁死

• 想要一份有手绘生动感的图

03 同一句需求，两条自纠错的路

两套在纸面上各有说法，拉开差距要看跑起来。给两款各发同一句需求，各画一张「五步流水线」教学图，两趟的收尾摆在一处。

Archify 那趟走机器校验，过程分三步：

• showcase 档自动布局被 validate 连续揪出 5 轮问题，标签重叠、节点间距、箭头方向、图形超宽逐项出现

• 每修一轮重跑校验，直到 0 布局错误、0 警告全绿才放行

• 交回的是一份浏览器里可切主题、可导出、可交互的 HTML

Excalidraw 那趟走视觉回看，收敛更快：

• 模型画完把 JSON 渲染成 PNG，再用能读图的视觉模型盯着 PNG 找毛病

• 挑出问题直接改 JSON，重渲染再看，2 轮收敛

• 交回的是一份能拖进 Excalidraw.com 继续手改的 JSON

这里还藏着一个运行前提的差别，装的时候容易被忽略。Archify 的校验是纯几何的，机器跑 validate 即可，不挑模型。Excalidraw 的回看要模型真能看见 PNG，主模型不读图就得先配视觉通道。

两张图都是同一句需求的产物，摆在一起看，谁也不好说哪张更「对」。差别全在拿到手之后：

维度

Archify

Excalidraw Diagram Skill

04 星数不决定怎么选

动笔之前，我的预期是「5 万星的正统，4.7 千星的小众」。两款各跑一遍之后，这个判断被推翻。

先看系谱。Archify 的底子是 Cocoon-AI 的 architecture-diagram-generator，tt-a1i 在其上重做成 v2 体系，本机已装到 v2.15，更新节奏很快。

Excalidraw skill 星数不多，作者 coleam00 正是 Archon 的作者，这一款是他把 argue visually 这套画法固化成可复用 skill 的载体。两款都不是从零长出来的，背后各站着一个更早的项目。

跑图时最扎眼的差别，是自纠错的口子开在哪。两款都没指望一次画好。Archify 把「好看」写成 9 项几何规则，机器逐条打勾。Excalidraw 把「好看」变成渲染之后自己看一遍，靠眼睛挑刺。规则与眼睛，是两种质检逻辑：

• 规则的可复制性强，能一路修到 0 警告全绿

• 眼睛的宽容度高，能看出规则没写进去的别扭

把哪种质检当底线，选择分三种：

• 图要拿出去交付，几何必须经得起逐项检查，选 Archify 的路子

• 图要给讲的人看，结构要自己会讲道理，选 Excalidraw 的路子

• 想要正式交付也想要手绘手感，两套都留着，按场景换着用

星数显示哪款被用得最多，不显示哪款更够用。

05 怎么选，取决于要交付还是要继续画

这里不替读者做决定，只摆出判断维度。先想清楚图要交付到哪里，判断依据如下：

选 Archify，如果下面的场景占了一条

• 图要给文档、PPT、网页用，要一份能直接交出去的正式成品

• 画系统架构、时序、数据流这类工程图，几何位置经不起细看

• 要导出 PNG、SVG、WebM 多种格式，拿给客户或团队交付

• 想要 validate 兜底，机器守住不出错的下限

选 Excalidraw Diagram Skill，如果下面的场景占了一条

• 图主要用来讲课、讲概念、讲关系，手绘白板风更贴合这类用途

• 画完还想在 Excalidraw 里继续手工改，不想被成品锁死

• 更相信模型渲染后自己回看，能看出几何规则看不见的别扭

两份都装也不冲突。正式场合交付用 Archify，白板上推演、还要接着改的用 Excalidraw。先把这篇文章收藏，下次要画架构图时照着选一次，比临时去翻两个仓库的 README 快得多。

顺手用文中这组对比做了一张赛博朋克概念封面。左侧蓝青色是 Archify 一侧的工程图纸与数据流，右侧橙红色是 Excalidraw 一侧的手绘白板与笔触，中央一道发光的 VS，点明整篇的立场。

关注本号，更多 AI 编程工具的实测对比持续更新。

#ClaudeCode #AI编程 #Archify #Excalidraw #AI画图 #架构图 #绘图skill #效率工具 #开发者工具 #AgenticCoding