archify：Claude开源技能，自然语言生成可交互架构/时序/数据流图

前一阵子刚给大家介绍过 fireworks-tech-graph，那个项目挺猛，直接拿自然语言就能产出生产级的 SVG 和 PNG 图，还支持 12 种样式、全套 UML 图。今天的主角 archify 走的却是另一条路。

它同样是给 Claude Code、Codex、opencode 这类智能体用的技能，但它更想把图「聊」出来，而且聊完之后还能交互。如果你看完 fireworks-tech-graph 心里想的是「图够好看了，但我更想让同事也能点点看」，那 archify 真值得你花几分钟了解一下。

项目简介

archify 是做什么的？一句话概括：把你随口说的系统描述，在聊天里直接变成漂亮的架构图、流程图、时序图、数据流图和生命周期图。

它最早是 Cocoon‑AI 的 architecture‑diagram‑generator 的 fork 改造，现在的 2.x 版本已经加入了主题切换、多格式导出、类型化渲染、校验、无障碍和统一命令行。

几个很实在的特点：

• 五种图型：覆盖架构、工作流、时序、数据流和生命周期。不知道怎么选的时候，还可以用交互式场景指南帮你推荐。
• 三套视觉预设：classic、signal‑flow、blueprint，随手就切。
• 深色/浅色主题一键切换，还能导出 PNG、JPEG、WebP、双主题 SVG 和带追踪动效的 WebM。
• 图是单一 HTML 文件，不依赖任何查看器，发出去就能打开。
• 动效是可选的，不写配置就是一张干净的静态图。
• 支持「探索」：找节点、看关系、追路径、比角色、讲引导故事。
• 交付前先做校验，schema、布局、路由通通过一遍才出手。

和 fireworks-tech-graph 对比呢

两个项目都能听懂自然语言、都能出多种格式的图、都带校验、都开源免费（MIT），但侧重点非常不一样。

fireworks-tech-graph 更像一台「出片机器」，追求生产级、几何安全的 SVG 和 1920px 高清 PNG，12 种风格、14 种 UML 图、40 多个产品图标，还能做语义 GIF 动图。它交付的是一张张能直接塞进文档的成品图。

archify 更像一块「聊天画布」，产出的是一个能交互的 HTML 文件，读者可以缩放、聚焦、追踪路径、切换主题。它交付的是一份能探索的图。

简单说：一个偏静态成品，一个偏交互探索。

快速安装、使用

装起来很简单，一条命令全局装好：

npx skills add tt-a1i/archify -g

不想永久装、先试用一下也行：

npx skills use tt-a1i/archify@archify --agent codex

把 codex 换成 claude-code 或 opencode 即可。

各平台装的位置：

• Claude Code：~/.claude/skills/ 或项目里的 .claude/skills/
• Codex CLI：~/.agents/skills/ 或 .agents/skills/
• opencode：~/.config/opencode/skills/、.opencode/skills/ 或 .agents/skills/
• Claude.ai：把 archify.zip 传到 Settings → Capabilities → Skills 即可

装完不用记命令，直接跟你的 agent 说就行，比如：

用 archify 画一下这个仓库的运行架构图。

想画得更具体，可以这样提示：

分析这个仓库，用 archify 画一张高层运行架构图。
展示 8-12 个核心组件、一条主路径、外部依赖和信任边界。
细节放进卡片，别再加更多连线了。

如果你喜欢在命令行里玩，archify 自带一个零依赖 CLI：

node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo
node bin/archify.mjs guide "Show CI/CD checks, approval, deploy, rollback"
node bin/archify.mjs render workflow examples/agent-tool-call.workflow.json /tmp/workflow.html
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json
node bin/archify.mjs check /tmp/workflow.html

想让图动起来，加一段配置就好：

{
  "meta": {
    "animation": "trace",
    "visual_preset": "signal-flow"
  }
}

不写 animation 就是纯静态图，classic 是默认预设。

官方还提供了 5 种图表类型的示例，用项目自带的 CLI 就能渲染成单文件 HTML，浏览器打开即可交互，转发给任何人都能直接看。比如：

• 架构图（Architecture）· Web 应用运行时架构 —— 一张图画清楚浏览器 / CDN / API / 数据库 / 缓存以及信任边界，适合给读者展示「系统由哪些部分组成」。

• 时序图（Sequence）· API 请求与缓存未命中 —— 按时间顺序画出 Web App → API → Redis → PostgreSQL 回源的调用链，并标注缓存命中/未命中分支，适合讲「一次请求是怎么流动的」。

最后想说

说实话，前几天刚聊完 fireworks-tech-graph，还以为「AI 画架构图」这条路子讲得差不多了。翻到 archify 才发现，同一个需求，居然能长出完全不一样的东西。一个死磕图对不对，一个死磕好不好看好不好玩，都挺有意思。

要一张能塞文档里的清晰图，找 fireworks-tech-graph；要一份能演示、能互动、还会自动变色的图，archify 更顺手。顺手提一句，archify 现在还在 2.5 版本迭代，作者说下一步要搞 JSON 中间表示的 3.0，感兴趣的话，蹲一波后续。

更多细节可以到项目地址查看：

https://github.com/tt-a1i/archify

如果你也对这类架构图工具感兴趣，欢迎来云栈社区和开发者们一起交流。