65.5k Star：跟 AI 对话生成架构图，这个开源 Agent 技能验证通过才输出

画架构图这件事，大概折磨过每个写过技术方案的人。

打开 draw.io，拖拽组件、连线、对齐、调样式，画完一张图要半小时。改一个节点，连线全崩，重新排版。用 Mermaid 写代码画图快一些，但复杂图布局不好看，不能交互，样式也有限。最烦的是系统改了，架构图还是旧的——文档和代码脱节，没人愿意重新画。

Archify 想把这件事变成一句话的事。跟 AI 说”画一个浏览器到 API 到 Redis 缓存到 PostgreSQL 回退的架构图”，图就出来了。65.5k Star，4.4k Fork，MIT 开源。

这是什么

Archify 是一个 Agent 技能，用来生成架构图、工作流图、时序图、数据流图和生命周期图。它不是独立 App，而是装到 Cursor、Claude Code、Codex CLI 这些 AI 编程工具里用的。装好之后，在对话里描述系统，它就能生成可交互的系统地图。

技术上，它用 Node.js 做渲染，把 Agent 生成的类型化 JSON IR 确定性编译成自包含的 HTML/SVG 文件。一个文件就是一张完整的可交互图表，发出去谁都能打开。

核心就一句话：对话即建模，验证后才输出。

五种图，覆盖系统设计的核心场景

Archify 支持五种图表类型，对应不同的表达需求。

架构图。画组件、服务、存储和边界。微服务怎么连、数据库在哪、外部依赖是什么，一张图说清楚。

工作流图。画 CI/CD、审批流程、工具调用、运行手册。流程怎么走、谁触发谁、失败怎么办。

时序图。画 API 调用、缓存回退、认证流程、异步追踪。谁先调谁、消息什么顺序、超时怎么办。

数据流图。画数据管道、数据血缘、PII 标记、消费者链路。数据从哪来、经过什么处理、到谁手里。

生命周期图。画状态机、重试、等待、终态。订单从创建到完成经过哪些状态、哪里会重试、哪里会终止。

五种图不是简单换个模板，而是各有专门的 schema 和布局规则。每种图的节点和关系类型都不一样，背后是 Archify 对系统设计的理解。

四种视觉预设，深浅主题

图生成了，还能换外观。Archify 提供四种视觉预设：Signal Flow、Blueprint、Classic，外加一种未命名预设。同一张架构图，Signal Flow 可能偏数据流向表达，Blueprint 可能偏工程蓝图风格，Classic 则是传统配色。按需切换，不用重画。

深色和浅色主题也支持切换。做技术分享时用深色，写文档时用浅色，一个图能适配不同场景。

验证通过才输出，拒绝 AI 幻觉

这是它和”让 AI 直接画图”拉开差距的地方。

用 GPT 生成图片画架构图，有个致命问题：AI 会编造。多一个不存在的节点、连错一条线、把缓存说成数据库，图看起来挺像样，细看全是错。你不敢直接用，更不敢拿去给团队当参考。

Archify 不这么干。它有一套原子化验证机制：schema 检查、布局规则检查、HTML/SVG 校验、路由和标签间距检查，全部通过后才会替换输出。任何一项不过，不会输出有问题的图。

验证失败时，它返回的是稳定的规则代码、确切的主题、测量证据和支持的修复控件，而不是一段 Node.js 堆栈报错。你能看到具体哪条规则没过、怎么修，而不是对着崩溃信息发呆。

这套机制的结果是：Archify 生成的图，节点和关系都是作者定义的真实事实，不会凭空发明拓扑，也不会声称实际不存在运行时影响。

真实交互，不是静态图

生成的 HTML 图是可以交互的，不是一张死图。

搜索节点并聚焦。图里有几十个节点时，输入关键词定位到目标，自动聚焦。

追踪上游/下游可达性。选中一个节点，看它依赖什么、被什么依赖，沿着作者定义的可达性关系走，不会跨越不存在的路径。

路由探测。检查两个节点之间是否存在有向路径，比如从 Web App 到 Postgres 是否可达、经过哪些中间件。缓存未命中的回退路径，也能用这个功能可视化。

语义角色透镜。切换视角对比不同角色的架构视图，比如后端视角和数据库视角对比同一套系统。

引导式故事播放。把架构讲解拆成章节，按顺序播放，适合做技术分享或新人 onboarding。还能开演示模式，全屏展示。

这些交互复用的都是作者定义的节点和关系，不发明拓扑、不伪造运行时影响。交互看到的信息，和图里画的事实一致。

Architecture Delta：架构变更一目了然

系统会演进，架构图也得跟着变。传统做法是画新版图，两张图对比着看，哪里改了全靠肉眼。

Archify 能对比两次架构的验证快照，生成 Before/Delta/After 三视图，精确展示哪些节点新增了、哪些删除了、哪些移动了位置。架构演进的过程变得可追溯，不再是黑盒。系统升级了，改了哪里一目了然，不用对着两张图肉眼找差异。

导出成各种格式

图在 HTML 里交互完，还能导出成其他格式用。

PNG，复制到剪贴板或下载，直接贴到文档里。SVG，矢量格式，放大不失真。WebM，动画格式，录下交互过程。1200×630 分享卡片，专门为 README、发布说明或社交媒体设计的尺寸。还有路由分享卡片和可达性分享卡片，把特定路径或可达性结果单独导出。

实际用起来

安装一行命令：

npx skills add tt-a1i/archify -g

-g 表示装到全局，所有项目都能用。装完之后，在 Cursor 或 Claude Code 的对话里直接说”Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback”，它就会生成架构图。不用切到别的应用，不用开浏览器，在写代码的窗口里就能画。

也可以让它分析整个仓库再画图：“Analyze this repository, then use archify to create a high-level runtime architecture diagram.” 它会读取代码结构，生成对应的运行时架构图。

画完想改，继续对话就行。“add Redis”、“move auth to the left”、“highlight the rollback path”，这些聚焦请求它都能处理，不用推倒重来。

和其他工具比

Mermaid 用代码画图，轻量，但复杂图布局丑、不可交互、没有验证机制。Archify 生成的是可交互 HTML，布局由 Agent 优化，交付前有原子化验证。定位不同，Mermaid 适合简单图，Archify 适合复杂系统图。

draw.io、Excalidraw 是手动拖拽工具，精细但耗时，改图痛苦。Archify 是对话建模，描述出来就行，改图也是对话迭代。

用 GPT 直接画图，出来的是一张图片，不能交互、不能验证、不能编辑。Archify 出来的是 HTML，可以搜索、聚焦、导出多种格式，而且经过验证才输出，不会幻觉节点。

适合什么人

如果你符合这几条，Archify 值得一试：经常要画架构图、时序图、工作流图；在用 Cursor 或 Claude Code 写代码；受够了手动拖拽和 Mermaid 的布局问题；需要把架构图分享给非技术同事，希望对方能交互查看。

几个提醒。Archify 是 Agent 技能，不是独立 App，需要装到 Cursor、Claude Code、Codex CLI 这类 AI 工具里用，前提是你得先有这些工具。运行需要 Node.js 环境。项目目前 65.5k Star，4.4k Fork，MIT 协议开源，社区活跃。

获取方式：GitHub 仓库 github.com/tt-a1i/archify，一行命令安装到 Cursor 或 Claude Code。

架构图曾经是写文档最烦的部分。改成和 AI 对话生成，还自带验证和分享，这件事值得一试。开源免费，65.5k Star 背书，试错成本就一个命令。