开源|一款可交互系统架构地图工具，支持 5 种技术图、深浅主题及单 HTML 交付

做技术的同学大概都有这个体会：每次接手一个新项目，或者给团队做技术分享，画架构图是一件特别耗精力的事。用 draw.io 手动拖拽，节点一多就乱的看不清；用 Mermaid 写文本描述，布局经常不尽如人意，想调整一下节点位置都没办法；用 PlantUML 倒是灵活，可生成的图风格偏旧，放到 PPT 或文档里总觉得差点意思。

更让人头疼的是，很多工具生成的图是静态的，看图的人只能被动接收信息。你想知道「从 API 层到数据库到底经过了哪些节点」，得自己拿手指顺着线一路找过去。做 Code Review 的时候想对比两版架构的差异，基本只能把两张图并排放，肉眼找不同。

架构图这东西，画出来只是及格，能让人看懂、能交互探索、还能放心交付，才算好用。

最近在 GitHub 上看到一个叫 Archify 的项目，试了一下发现它在这个方向上做得挺扎实。它不是一个在线绘图平台，也不是一个 Mermaid 主题，而是一个 AI Agent Skill 装到 Cursor、Claude Code 这些工具里之后，你用自然语言描述系统或指向一个代码仓库，它就能生成可交互、可分享的系统地图。

五种图，覆盖常见技术场景

Archify 支持五种类型的图：Architecture（架构图）、Workflow（工作流图）、Sequence（时序图）、Data Flow（数据流图）和 Lifecycle（生命周期图）。每种图对应不同的技术问题。

梳理微服务之间的调用关系用 Architecture，展示 CI/CD 流程用 Workflow，排查 API 调用链路用 Sequence，追踪数据血缘用 Data Flow，分析状态机和重试逻辑用 Lifecycle。

选图这件事本身也有一个场景指南页面，你描述自己的技术问题，它会给出推荐的图表类型和 Prompt 模板。不确定该画哪种图的时候，直接问它就行。

可交互探索，不是只能看

生成出来的图支持一系列交互操作。按 / 可以搜索节点并定位，按 R 可以探查两个节点之间的有向路径，按 L 可以对比不同语义角色之间的真实流量关系。聚焦某个节点之后，还能查看它的上游或下游可达范围，追踪作者定义的精确依赖路径。

这些交互都是基于作者预先定义的拓扑关系，不会自己编造不存在的连线。 这一点比较重要，很多工具的交互探索会「脑补」一些推理出来的关系，在技术文档场景下容易造成误导。Archify 的做法是：没有写进 JSON 里的关系，图上不会出现。

四套视觉预设，深浅主题切换

同一份数据可以切换四种视觉风格：Classic、Signal Flow、Blueprint 和 Editorial。

Classic 是默认风格，干净利落；

Signal Flow 适合展示信号传递和数据流向；

Blueprint 带蓝图质感，适合技术评审场景；

Editorial 是偏暖纸张色调的编辑风格，放到技术博客或文档里比较协调。深色和浅色主题一键切换，导出的时候也是完整原图，不会携带临时 Viewer 状态。

单 HTML 文件交付

生成的图是一个自包含的 HTML 文件，不依赖外部服务，直接扔给同事或者放到 Wiki 上就能用。导出格式方面，除了 HTML 本身，还支持 PNG、SVG、WebM 动画以及 1200x630 的社交分享卡片。

做 Release Notes 或者写技术博客需要配图的时候，导出分享卡片很方便。

技术架构与部署方式

Archify 的核心是一个 Typed JSON IR（中间表示），每种图表类型都有对应的 Schema 定义。Agent 根据系统描述生成 JSON 源文件，内置的 Validator 会做校验 Schema、布局、线路、标签到其他路径的净空检查全通过后，才会生成最终的 HTML。

校验失败时会返回结构化的诊断信息，告诉 Agent 具体哪个对象出了什么问题，支持哪些修复方式，而不是丢一堆 Node 堆栈过来。

安装方式很简单，一行命令搞定：

npx skills add tt-a1i/archify -g

支持 Cursor、Claude Code、Codex CLI、OpenCode 和 Raven 等多个 Agent 平台。安装后直接在对话里说「使用 archify 梳理这个仓库的运行时架构」，它就会开始分析代码仓库并生成架构图。

Architecture Delta 对比评审

做 PR 评审或者架构变更评审的时候，Archify 提供一个 Delta 模式，可以生成 Before / Delta / After 三张图，精确标注新增、删除、语义变化、移动和重路由的节点。整个过程只读，不会推断影响或风险，也不会给出「合并是否安全」的判断 它只展示作者写进去的变化事实，判断交给评审的人来做。

开源协议

Archify 采用 MIT 协议开源，可以自由使用、修改和分发，包括商业场景。协议限制很少，基本不用担心合规问题。

即刻体验一波

装好之后，我在一个 Web 项目上试了一下。对话里输入：

使用 archify 生成一张高层运行时架构图，
只保留 8-12 个核心组件，突出一条主要路径，
标出外部依赖与信任边界。

大概几十秒就生成了架构图，打开后是一个可以缩放、拖拽的交互页面。

我试着用 / 搜索了 Redis 节点，定位到之后查看它的下游，清晰的看到了缓存命中和未命中两条路径。再按 R 输入 Web 和 DB 两个节点，页面直接高亮了从 Web 应用到数据库的完整调用链路，每经过一个节点都有标注。

导出方面，右下角的 Export 菜单可以复制 PNG、下载 SVG 或 WebM 动画。我导出了一张 1200x630 的分享卡片，直接贴到了项目 Wiki 里，效果比之前手画的图好不少。

以下是一些功能的展示

更多的功能待你来探索发现。

项目地址：https://github.com/tt-a1i/archify

一个 AI Agent Skill，装到 Cursor 或 Claude Code 后，用自然语言就能生成可交互的系统架构图。支持 5 种图表类型、4 套视觉风格、深浅主题，单 HTML 文件交付，MIT 协议开源。

关键字

系统架构图、AI 编程工具、开源项目、技术文档、架构可视化、Cursor 插件、代码仓库分析、交互式图表