别再手动拖方框了一句话,让 AI 把架构图画出来

Archify · 开源 Skill · GitHub ★ 约 75k

▲ Archify:把代码仓库或一句话描述,变成能交互的技术图

今天要说的这个项目叫 Archify,GitHub 上已经攒了约 7.5 万星,还上过 GitHub Trending 全语言周榜第一。它是一个专门给 AI 助手用的绘图 Skill(技能包),支持 Cursor、Claude Code、Codex CLI、OpenCode 这些工具,MIT 开源,项目本身免费(你用 AI 助手产生的订阅或模型费另算)。

它的用法一句话就能讲明白:把代码仓库或者系统描述丢给 AI,让它生成一张能打开、能交互、能导出的技术图。底层是一套基于 Node.js 的渲染加校验系统——AI 负责整理组件和它们之间的关系,Archify 负责把这些结构化内容编译成 HTML/SVG,顺手把布局和连线检查一遍。

01不用先拖方框,先把话说清楚

最舒服的一点是:你不一定要有现成代码,直接用嘴描述就能开工。比如你跟 AI 说一句——

图出来之后,你还能继续用大白话调:"把认证模块挪到左边""突出缓存回源那条线",它就围着已有内容改,不用重画。要是手上已经有项目,也可以让 AI 先把仓库读一遍,再整理出核心组件、主要调用路径和外部依赖。这么一来,你的精力全花在"该讲清楚什么"上,而不是纠结每根箭头往哪拐。

▲ 一句话描述,生成一张能探索、能定制、能分享的交互图(官方演示)

02五种图,对着需求挑就行

不同的事,得用不同的图来讲。Archify 一共给了五种,选择很直接:

▲ 工作流图:多条泳道里,主流程一眼看得清(官方示例)

▲ 时序图:把一次交互按时间顺序讲明白(官方示例)

同一份结构,还能切深浅主题、换多套视觉预设,想换个风格展示,不用重画一遍。

▲ 同一张图,深色 / 浅色一键切换(官方演示)

03图能点、路径能追,讲解不再"看这看那"

静态图片一复杂,讲解就变成"看这里,再看那边"。Archify 生成的是 HTML,能搜节点、聚焦某个模块、追上下游关系,还能自己选起点和终点,把图里已有的连接路径顺出来。配上演示模式和事先定义好的分步讲解,可以像翻章节一样,带着读者一步步理解系统。

▲ 追踪一次缓存未命中:从 Web 应用到数据库那条路径被高亮出来(官方演示)

有一点作者说得很实在:这里展示的是图里定义好的关系,不会自动变成线上监控,也不能拿它去判断某个服务挂了会造成多大影响。它讲的是"设计上长什么样",不是"线上正在发生什么"。

04画完自己检查一遍,还能比对两版差在哪

AI 画图最怕的就是:一眼看着挺漂亮,细看才发现箭头方向反了、标签压在线上。Archify 会对结构、布局、线路,还有标签和连线之间的间距做校验,发现问题就返回具体信息,交给 AI 去改——不是甩一堆报错,而是告诉它"哪条规则、哪个地方、该怎么修"。

它还能对比两份架构快照,把新增、删除、变化、移动、重新布线分门别类标出来。方案改了一轮,到底动了哪些东西,一目了然,特别适合做设计评审或者 PR 讨论。

当然,作者也提醒了一句:过了绘图校验,不等于业务逻辑就对了。组件有没有漏、关系跟真实代码符不符,还得结合项目自己确认。

05交付一个文件,配图也能直接导出

画完怎么给别人,同样重要。Archify 的交互成品是一个独立 HTML 文件,浏览器打开就能用,发给别人交互也跟着走(外部网站和地图链接得联网)。要放进文档、PPT 或者公众号,也能导出 PNG、SVG,动态内容还支持 WebM。

▲ 导出菜单:PNG 直接进剪贴板,静态、动态格式都能下(官方演示)

它还带一个 1200×630 的分享卡片,适合做项目介绍和社交分享。对经常写技术文章的人来说,图画完少折腾一轮导出,是真省事。

▲ 追完一条路径后,一键导出成分享卡片,整张图还留作背景(官方演示)

06怎么装、怎么用

先准备好能跑 Node.js 的环境,以及一个支持 Skill 的 AI 助手,然后在终端敲一行:

装好以后,打开对话直接提需求就行。如果是分析现有项目,记得补一句"先读当前仓库,只展示有依据的核心组件,不确定的关系单独说明":

第一次建议从一条主流程开始,先确认关系画对了,再慢慢补细节。图打开后还有一堆快捷键很顺手——/ 搜节点,R 追路径,T 切主题,E 打开导出,F 进演示模式。