GitHub 10k+ Star:用自然语言描述系统,AI 帮你生成可交互架构图

📅 2026/8/14 13:35:16
GitHub 10k+ Star:用自然语言描述系统,AI 帮你生成可交互架构图
01Archify是什么PART 自然语言画系统架构图描述一句话画出登录流程Browser → Web App → API → JWT 验证 → Redis Session → PostgreSQL 兜底然后你得到的不是一张图片而是一个可以打开、搜索、追踪路径、比较角色、播放引导故事的 HTML 文件。一句话给 AI 编程 Agent 用的架构图生成技能Skill。把一段系统描述或一个代码仓库变成可分享、可探索的交互式技术地图——直接在对话中完成。支持接入的 Agent 包括Claude Code、Cursor、Codex CLI、OpenCode以及记忆基础设施 Agent——Raven。你告诉 Agent 一个系统描述或者指向一个代码仓库Archify 分析后输出一个自包含的 HTML 文件。这个文件就是最终成品——不需要额外的渲染服务浏览器打开即用。02Archify 5 种系统架构图PART 5 种系统架构图五种图类型覆盖主流场景Archify 支持五种技术图类型各有明确的适用场景不确定用哪种可以直接问...json{node archify/bin/archify.mjs guide Show an API request with Redis cache miss}03Archify 生成 的图做什么PART 5 种系统架构图生成出来的图能做什么这是 Archify 跟普通生成一张图工具最大的区别——输出的 HTML 是可交互的技术地图而不是一张死图。在里面你可以/搜索并聚焦某个节点R追踪两个节点之间的精确有向路径Upstream / Downstream展开上下游依赖链L对比两个语义角色之间的真实流量P播放引导式故事逐章展示关键路径F进入演示模式一键变 PPT 级别的汇报视图T切换深色/浅色主题所有这些交互都基于图的作者定义的节点和关系不会发明不存在的拓扑也不会对运行时行为做超出范围的推断。这是设计上的刻意约束保证可信度。导出格式一次搞定一张图可以导出成PNG—— 复制到剪贴板直接粘贴进 Slack / NotionSVG—— 矢量格式缩放不失真WebM—— 带动效的视频录制浏览器原生1200×630 Share Card—— 标准 OG 图尺寸放 README 或发社交媒体直接用Route Share Card—— 把追踪到的某条路径单独导出为 Share Card完整架构图作为背景保留04架 构 图 对比 功能PART 5 种系统架构图这个功能有点意思Architecture Delta。在 PR Review 或设计评审时把变更前后的两个 JSON 快照丢进去...json{node archify/bin/archify.mjs compare architecture base.json head.json delta.html --json}它会生成一个 Before / Delta / After 三态对比图标注哪些节点/边是新增、删除、修改、移位、重路由的并附一份机器可读的验证收据。这不是 diff 贴图是结构化事实对比。安全感来自哪里原子化验证很多 AI 生成工具有一个痛点你不确定输出的东西是否可靠。Archify 的设计回应了这个问题生成 → 校验 → 预览可选→ 交付每一步都有 Gate。有 schema 校验格式不对直接拦截有布局规则检查确保视觉可读有 HTML/SVG 完整性验证有标签到路由的间距检查只有所有检查通过候选文件才会原子替换上一个已知好的输出。如果失败返回的是带 diagnostics[] 的结构化 JSON告诉你确切的问题是什么以及哪些 supportedFixes 可以用——不是 Node 报错堆栈不是让你猜。还有一个可选的桌面实时预览模式preview 命令监听 JSON 文件变化只有通过验证的版本才会刷新浏览器失败时保持上一个有效图——这对在本地迭代图的人来说非常有用。05快速 上 手PART 一行代码配置安装只需一行...json{npx skills add tt-a1i/archify -g}然后告诉你的 Agent...json{Analyze this repository, then use archify to create a high-level runtime architecture diagram. Show 8–12 core components, one primary path, external dependencies, and trust boundaries.}中文 prompt 同样有效对话里直接写就行。迭代也很自然比如接着说把 Redis 加进来、把认证服务移到左边、高亮回滚路径——Agent 会更新 JSON 源其他结构保持不动。06和 Mermaid 有什么区别PART 区别与联系Archify README 里明确写了它不是 Mermaid 的主题包也没打算做通用绘图编辑器。Mermaid 的核心是代码即图的文本语法用来生成静态图简单场景非常够用。Archify 的定位是技术意图 → 可信通信产物。它的差异点在于有类型化的 JSON 中间表示IR每种图模式都有 schema有生成 → 验证 → 交付的工程化流程失败有明确修复指引输出是带完整交互能力的 HTML而不是一张图支持Architecture Delta做变更对比支持深度链接#routeweb~db任何一个视图都能分享给别人直接打开开发者写设计文档时—— 不用开 Figma不用画图对着代码仓库或者设计描述说一句话交互式架构图直接出来还能导出成 Share Card 贴进 RFC 文档。技术博主写文章时—— 以前配架构图要么截图、要么手画现在可以直接生成 HTML 版的动态架构图也可以导出 PNG 直接用。做 Code Review 时—— Architecture Delta 功能让这次变更动了哪些依赖关系变成一张图而不是靠人脑 diff。技术分享和汇报时—— 演示模式 Share CardPPT 里的配图解决了。一些数字10,200 Stars793 Forks活跃迭代中当前稳定版 v2.13.011 个内置检验场景附 JSON 源和验证收据公开在 Proof Lab131 次提交有完整的 Changelog 和 RoadmapMIT 协议免费商用更多transformerVITswin tranformer 参考头条号人工智能研究所 v号人工智能研究Suo, 启示AI科技动画详解transformer 在线视频教程