画了 5 年架构图，被一个 4.5 万星的开源工具治好了
⭐ 觉得有用？关注公众号「丁卯生人」
每月发干货 · AI Agent · GitHub · 装修避坑
大家好我是六六爸比，一个 85 后科技 IT 爱好者。
写架构图这件事，我折腾了好几年。流程图、时序图、数据流图，画的时候热血沸腾，过两周看回来就过时——产品逻辑一改，箭头全错位，颜色全乱套。一张架构图能活过三个迭代版本，算运气好。
前两天翻 GitHub Trending，发现一个 JavaScript 项目 tt-a1i/archify，周涨 +26,626 颗星，总星已经 45,110。我一开始以为又是一个"AI 画图"的噱头，结果跑了一遍——确实解决了我多年的痛点。今天把这个工具的细节拆给你看。
一、Archify 是什么
▲ Archify 生成的架构图预览(项目 README 官方图)
▲ 我用 Archify 现场生成的中文架构图(RAG 检索增强生成流水线,所有节点/连线均已中文化,界面自动切换 zh-CN)
一句话定位：给 AI 编程 agent 用的架构图生成 skills。它不是一个独立的画图工具，更像是 Cursor、Claude Code 这些 agent 的"插件"，让 agent 在写代码的同时，顺手把架构图、时序图、数据流图、生命周期图也生成出来。
关键特性在 trending 页面的描述里写得很清楚：
拆开看几个关键词：
第一，"self-contained HTML"。生成的不是 PNG、不是 SVG、不是 mermaid 那种需要渲染器的半成品——是一个完整的 HTML 文件，里面已经嵌入了 CSS 和动画，双击就能在浏览器打开。这点解决了我最大的问题：发给别人看，不需要安装任何东西。
第二，"with motion"。它带动画。我猜是流程图里的数据流向、状态机的状态切换，会用 transition 展示出来，比静态图直观得多。这点很戳我——以前给产品同事讲一个异步流程，得一边画图一边比划，现在图自己会动。
第三，"crisp export"。导出是矢量质量，不会糊。导出 PDF、PNG、SVG 都能保持清晰度。
二、原方案为什么不行
在 Archify 出现之前，画架构图我用过四套工具，每个都有自己的坑：
draw.io（老牌）。免费、强大，但是手动拖拽。我画一个微服务调用链路要半小时，版本一改全部重画。最惨的一次，凌晨两点改完架构，draw.io 文件忘了保存，整个白干。
mermaid（程序员友好）。用代码画图，集成 markdown 很方便。但样式死板，配色不可改，输出永远是灰白底色。给老板看的时候，他们第一反应是"你是不是懒得排版"。
PlantUML（重型）。能画时序图、状态图，但需要 Java 运行环境。我的 M2 MacBook 装 PlantUML 折腾了一晚上，依赖冲突，最后还是放弃了。
Excalidraw（手绘风）。好看、有质感，但是纯手动。我用了两周，又回到了原点——画图本身就不是瓶颈，瓶颈在"产品一改架构，我得重新画"。
这些工具的共同问题：画图是个独立动作，跟代码没关系。我在代码里改了逻辑，要切到另一个工具里改图。两边很容易不一致，时间一长就变成"代码是新的，架构图是三个月前的"。
三、Archify 的核心优势
Archify 解决了上面所有痛点，因为它根本不是"画图工具"——它是 agent skill。
1. 跟代码同生同死
agent 写完代码，顺手调用 Archify skills 生成对应的图。代码改了，下次 agent 重新跑，自动产出新版图。这点直接消除了"代码和图不一致"这个老大难问题。
2. 输出自包含 HTML
▲ 亮色 / 暗色主题自包含 HTML(项目 README 官方图)
双击打开就能看，不用装任何依赖。发给同事直接邮件附件，对方零成本查看。trending 页面原句写的是 "self-contained HTML"，实际跑了一下，连 CSS 动画都嵌进去了——确实不需要联网。
3. 内置 motion 动画
数据流图能看出"流向"，状态机能看出"切换"。讲异步流程的时候，比静态图强太多。trending 页面特意把这个特性单独列出来，看得出是核心卖点。
4. 矢量导出
PDF、PNG、SVG 都能清晰导出。trending 描述里写的 "crisp export"，我看了下仓库的 demo，导出 PNG 放大 5 倍不糊。
5. 多图类型覆盖
architecture / workflow / sequence / data-flow / lifecycle——一次性把程序员最常用的五种图全包了。不用像以前那样，流程图用 draw.io，时序图用 PlantUML，状态图用 mermaid——工具来回切换。
四、增长数据有多猛
把它放到 trending 榜里看，才知道这个项目有多爆：
+26,626 本周新增（全 trending 第 1）
+35,312 本月新增
+32.1% 较 8 月底
trending 页面 collaborator 列表里能看到 cursoragent、claude、sunsunsun-java、YunyueLi——基本是 Cursor 生态 + Claude 生态的人集体在用。这是个由 agent 圈推起来的项目，不是营销号在推。
▲ Workflow 工作流图
▲ Sequence 时序图
▲ Data Flow 数据流图
▲ Lifecycle 生命周期图
五、横向对比
同样定位的工具，放到一张表里看：
draw.io | 手动拖拽 · 需安装 · 不带动画
mermaid | 代码画图 · 样式死板 · 集成 markdown
PlantUML | 重型 · 需 Java · 程序员友好
Excalidraw | 手绘风 · 手动 · 好看但零自动化
Archify 跟其他四款最大的差异：它不是工具，是 skill。这意味着你不用学新操作，agent 直接帮你用。这是 agent 时代特有的产物——以前画图是人干的事，现在 agent 干。
六、它适合谁
如果你正在用 Cursor、Claude Code、Codex 这类 AI 编程 agent，并且需要画架构图——直接装 Archify skill。它的零成本试错门槛：
轻度用户（偶尔画一张产品流程图）：你可以让 agent 在写完需求文档后，顺手生成对应的数据流图，五分钟出活。
重度用户（架构师、技术 lead）：把它集成到团队的 agent 工作流里，代码 review 时同步看架构图，团队知识同步效率直接翻倍。
团队用户（产品 + 开发协作）：用它的 motion 动画讲异步流程，产品同事第一次"看懂"了消息队列是怎么跑的。
七、我的判断
写架构图这件事的本质矛盾一直没解决：代码是动态的，图是静态的。Archify 找到了一个聪明的解法——图不人画，让 agent 画，agent 写完代码顺手就把图更新了。
它不是"画图工具 2.0"，它是"画图工具的终结者"——以后可能不需要独立的画图工具了，所有图都从代码生成，所有图都跟代码实时同步。
仓库地址放在这里，自己去翻 demo：
我把它跟最近听的网易云一首歌想到一块了——朴树的《平凡之路》，前奏那段钢琴很轻，副歌起来才有力量。Archify 这种工具就是"架构图领域的平凡之路"——不张扬，但解决了真问题。
—— 六六爸比 · 一个 85 后科技 IT 爱好者
AI 与君共勉
— 最新 5 篇 —
Claude Code 被低估了？踩了这些坑再看
8-26 发布：AI 速递 Claude Code 遭打脸实测。
DeepSeek Harness 10 个插件撑起整个生态
8-25 发布：112 个候选插件, 5 维评分挑出 Top 10 必装。
木铭 v2 旅行 SKILL · 9 天 3500+ km
8-21 发布：边玩边记录边出网页的完整 SKILL 实战。
Reasonix 1.x 正式版 : 0.x → 1.x 一年磨一剑
8-01 发布：DeepSeek 亲儿子想通了，一口气放开 20+ 模型。
Hermes Skill 官方榜单 · 2026.07
7-31 发布：上一期月榜，四层信任榜给 9 万 skill 排座次。
— 与本文相关 5 篇 —
aie 1.7 万星 : 一行命令把 AI 工作流拉到自己电脑
本地跑 AI 工作流，和 Archify 本地化思路一致。
Opus 4.8 + Agnes Code : 8 章完整复盘
大模型能力评测，和 Archify 形成对比。
Hermes 办公效率 4 件套
官方排行系列办公篇，5 个维度挑出的效率精选。
OpenAI Codex 橙皮书·总览
一份橙皮书看懂 OpenAI 编程 agent，和 Archify 对照。
8 月 Hermes 月榜 : 24 个新晋
8-22 发布：90700 skill 月榜，四层信任全景。
如果这篇对你有帮助，，让更多写架构图的朋友看到。
留言区聊聊：你现在用什么画架构图？被 Archify 圈粉了吗？
更多技术干货，关注公众号 丁卯生人（mp.weixin.qq.com/s/dingmaoshengren-home）每周更新。
— 六六爸比