Archify：让 AI 把代码仓库画成一张可交互的架构图

在开发者的日常里，"画架构图"可能是最容易被低估的时间黑洞。服务一多，问题就冒出来：Mermaid 的箭头开始打架；draw.io 虽然能控制细节，但每次加个模块、调整链路，都得重新挪方框、理连线；让 AI 直接输出 SVG 或 HTML 确实快，需求一改，已经排好的位置又要重画。

最近一个叫 Archify 的开源项目正是冲着这个痛点来的。它在 GitHub 上走红，截至原作者发稿已获得约 35.7K Star、2.3K Fork，并采用 MIT 协议。

它到底解决了什么问题？

一句话概括：Archify 是一个 Agent Skill，装进 Cursor、Claude Code、Codex CLI 或 OpenCode 里，让 AI 联网读需求、看代码，再接收管后续的结构保存、检查、渲染和交付。它的产出不是一段临时脚本，而是一份独立的、自包含的 HTML 文件——打开就能搜索节点、追踪路径、切换主题，需要时还能导出图片。

你说一句"用 Archify 画出 Browser -> API -> Redis -> PostgreSQL 的缓存回源过程"，Agent 会先理解这段描述，写出一份 Typed JSON IR；Archify 校验这份结构化源文件，再确定性地编译成 HTML 和 SVG。它不提供新模型，也没有拖拽画布，而是把"画图"这件事交给确定性的编译流程。

它是怎么工作的？

整条流程大概是这样的：

#mermaid-svg-i9p2F6jMgQRzbOJv{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-i9p2F6jMgQRzbOJv .error-icon{fill:#552222;}#mermaid-svg-i9p2F6jMgQRzbOJv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-i9p2F6jMgQRzbOJv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-i9p2F6jMgQRzbOJv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-i9p2F6jMgQRzbOJv .marker.cross{stroke:#333333;}#mermaid-svg-i9p2F6jMgQRzbOJv svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-i9p2F6jMgQRzbOJv p{margin:0;}#mermaid-svg-i9p2F6jMgQRzbOJv .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv .cluster-label text{fill:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv .cluster-label span{color:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv .cluster-label span p{background-color:transparent;}#mermaid-svg-i9p2F6jMgQRzbOJv .label text,#mermaid-svg-i9p2F6jMgQRzbOJv span{fill:#333;color:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv .node rect,#mermaid-svg-i9p2F6jMgQRzbOJv .node circle,#mermaid-svg-i9p2F6jMgQRzbOJv .node ellipse,#mermaid-svg-i9p2F6jMgQRzbOJv .node polygon,#mermaid-svg-i9p2F6jMgQRzbOJv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-i9p2F6jMgQRzbOJv .rough-node .label text,#mermaid-svg-i9p2F6jMgQRzbOJv .node .label text,#mermaid-svg-i9p2F6jMgQRzbOJv .image-shape .label,#mermaid-svg-i9p2F6jMgQRzbOJv .icon-shape .label{text-anchor:middle;}#mermaid-svg-i9p2F6jMgQRzbOJv .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-i9p2F6jMgQRzbOJv .rough-node .label,#mermaid-svg-i9p2F6jMgQRzbOJv .node .label,#mermaid-svg-i9p2F6jMgQRzbOJv .image-shape .label,#mermaid-svg-i9p2F6jMgQRzbOJv .icon-shape .label{text-align:center;}#mermaid-svg-i9p2F6jMgQRzbOJv .node.clickable{cursor:pointer;}#mermaid-svg-i9p2F6jMgQRzbOJv .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-i9p2F6jMgQRzbOJv .arrowheadPath{fill:#333333;}#mermaid-svg-i9p2F6jMgQRzbOJv .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-i9p2F6jMgQRzbOJv .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-i9p2F6jMgQRzbOJv .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-i9p2F6jMgQRzbOJv .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-i9p2F6jMgQRzbOJv .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-i9p2F6jMgQRzbOJv .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-i9p2F6jMgQRzbOJv .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-i9p2F6jMgQRzbOJv .cluster text{fill:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv .cluster span{color:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-i9p2F6jMgQRzbOJv .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-i9p2F6jMgQRzbOJv rect.text{fill:none;stroke-width:0;}#mermaid-svg-i9p2F6jMgQRzbOJv .icon-shape,#mermaid-svg-i9p2F6jMgQRzbOJv .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-i9p2F6jMgQRzbOJv .icon-shape p,#mermaid-svg-i9p2F6jMgQRzbOJv .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-i9p2F6jMgQRzbOJv .icon-shape rect,#mermaid-svg-i9p2F6jMgQRzbOJv .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-i9p2F6jMgQRzbOJv .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-i9p2F6jMgQRzbOJv .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-i9p2F6jMgQRzbOJv :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-i9p2F6jMgQRzbOJv .input>*{fill:#e8f5e9!important;stroke:#43a047!important;stroke-width:2px!important;color:#1b5e20!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .input span{fill:#e8f5e9!important;stroke:#43a047!important;stroke-width:2px!important;color:#1b5e20!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .input tspan{fill:#1b5e20!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .agent>*{fill:#e3f2fd!important;stroke:#1e88e5!important;stroke-width:2px!important;color:#0d47a1!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .agent span{fill:#e3f2fd!important;stroke:#1e88e5!important;stroke-width:2px!important;color:#0d47a1!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .agent tspan{fill:#0d47a1!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .ir>*{fill:#fff3e0!important;stroke:#fb8c00!important;stroke-width:2px!important;color:#e65100!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .ir span{fill:#fff3e0!important;stroke:#fb8c00!important;stroke-width:2px!important;color:#e65100!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .ir tspan{fill:#e65100!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .check>*{fill:#f3e5f5!important;stroke:#8e24aa!important;stroke-width:2px!important;color:#4a148c!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .check span{fill:#f3e5f5!important;stroke:#8e24aa!important;stroke-width:2px!important;color:#4a148c!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .check tspan{fill:#4a148c!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .output>*{fill:#ffe0b2!important;stroke:#ef6c00!important;stroke-width:2px!important;color:#bf360c!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .output span{fill:#ffe0b2!important;stroke:#ef6c00!important;stroke-width:2px!important;color:#bf360c!important;}#mermaid-svg-i9p2F6jMgQRzbOJv .output tspan{fill:#bf360c!important;}

自然语言 / 代码仓库

Agent 理解系统结构

生成 Typed JSON IR

Archify 校验布局与关系

输出可交互 HTML / SVG

让人眼前一亮的地方在于迭代。假设第一版图已经画好，需求又来了：加 Redis、把鉴权移到左边、突出回滚链路。对一次性生成的 SVG 来说，这往往又是一次整图重写；而 Archify 留下了 JSON IR，节点、关系、强调内容都有明确字段，Agent 改 Redis 时只需碰相关对象，不必重排整张图。这份 JSON 还要经过 Schema、布局和输出检查，确认连线没有穿过无关节点、关系标签没压住其他线路，才会产出新的 HTML 和 SVG。

#mermaid-svg-APe9wrTHwlkp9yhp{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-APe9wrTHwlkp9yhp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-APe9wrTHwlkp9yhp .error-icon{fill:#552222;}#mermaid-svg-APe9wrTHwlkp9yhp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-APe9wrTHwlkp9yhp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-APe9wrTHwlkp9yhp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-APe9wrTHwlkp9yhp .marker.cross{stroke:#333333;}#mermaid-svg-APe9wrTHwlkp9yhp svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-APe9wrTHwlkp9yhp p{margin:0;}#mermaid-svg-APe9wrTHwlkp9yhp .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-APe9wrTHwlkp9yhp .cluster-label text{fill:#333;}#mermaid-svg-APe9wrTHwlkp9yhp .cluster-label span{color:#333;}#mermaid-svg-APe9wrTHwlkp9yhp .cluster-label span p{background-color:transparent;}#mermaid-svg-APe9wrTHwlkp9yhp .label text,#mermaid-svg-APe9wrTHwlkp9yhp span{fill:#333;color:#333;}#mermaid-svg-APe9wrTHwlkp9yhp .node rect,#mermaid-svg-APe9wrTHwlkp9yhp .node circle,#mermaid-svg-APe9wrTHwlkp9yhp .node ellipse,#mermaid-svg-APe9wrTHwlkp9yhp .node polygon,#mermaid-svg-APe9wrTHwlkp9yhp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-APe9wrTHwlkp9yhp .rough-node .label text,#mermaid-svg-APe9wrTHwlkp9yhp .node .label text,#mermaid-svg-APe9wrTHwlkp9yhp .image-shape .label,#mermaid-svg-APe9wrTHwlkp9yhp .icon-shape .label{text-anchor:middle;}#mermaid-svg-APe9wrTHwlkp9yhp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-APe9wrTHwlkp9yhp .rough-node .label,#mermaid-svg-APe9wrTHwlkp9yhp .node .label,#mermaid-svg-APe9wrTHwlkp9yhp .image-shape .label,#mermaid-svg-APe9wrTHwlkp9yhp .icon-shape .label{text-align:center;}#mermaid-svg-APe9wrTHwlkp9yhp .node.clickable{cursor:pointer;}#mermaid-svg-APe9wrTHwlkp9yhp .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-APe9wrTHwlkp9yhp .arrowheadPath{fill:#333333;}#mermaid-svg-APe9wrTHwlkp9yhp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-APe9wrTHwlkp9yhp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-APe9wrTHwlkp9yhp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-APe9wrTHwlkp9yhp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-APe9wrTHwlkp9yhp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-APe9wrTHwlkp9yhp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-APe9wrTHwlkp9yhp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-APe9wrTHwlkp9yhp .cluster text{fill:#333;}#mermaid-svg-APe9wrTHwlkp9yhp .cluster span{color:#333;}#mermaid-svg-APe9wrTHwlkp9yhp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-APe9wrTHwlkp9yhp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-APe9wrTHwlkp9yhp rect.text{fill:none;stroke-width:0;}#mermaid-svg-APe9wrTHwlkp9yhp .icon-shape,#mermaid-svg-APe9wrTHwlkp9yhp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-APe9wrTHwlkp9yhp .icon-shape p,#mermaid-svg-APe9wrTHwlkp9yhp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-APe9wrTHwlkp9yhp .icon-shape rect,#mermaid-svg-APe9wrTHwlkp9yhp .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-APe9wrTHwlkp9yhp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-APe9wrTHwlkp9yhp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-APe9wrTHwlkp9yhp :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-APe9wrTHwlkp9yhp .start>*{fill:#e8f5e9!important;stroke:#43a047!important;color:#1b5e20!important;}#mermaid-svg-APe9wrTHwlkp9yhp .start span{fill:#e8f5e9!important;stroke:#43a047!important;color:#1b5e20!important;}#mermaid-svg-APe9wrTHwlkp9yhp .start tspan{fill:#1b5e20!important;}#mermaid-svg-APe9wrTHwlkp9yhp .change>*{fill:#fff3e0!important;stroke:#fb8c00!important;color:#e65100!important;}#mermaid-svg-APe9wrTHwlkp9yhp .change span{fill:#fff3e0!important;stroke:#fb8c00!important;color:#e65100!important;}#mermaid-svg-APe9wrTHwlkp9yhp .change tspan{fill:#e65100!important;}#mermaid-svg-APe9wrTHwlkp9yhp .patch>*{fill:#e3f2fd!important;stroke:#1e88e5!important;color:#0d47a1!important;}#mermaid-svg-APe9wrTHwlkp9yhp .patch span{fill:#e3f2fd!important;stroke:#1e88e5!important;color:#0d47a1!important;}#mermaid-svg-APe9wrTHwlkp9yhp .patch tspan{fill:#0d47a1!important;}#mermaid-svg-APe9wrTHwlkp9yhp .check>*{fill:#f3e5f5!important;stroke:#8e24aa!important;color:#4a148c!important;}#mermaid-svg-APe9wrTHwlkp9yhp .check span{fill:#f3e5f5!important;stroke:#8e24aa!important;color:#4a148c!important;}#mermaid-svg-APe9wrTHwlkp9yhp .check tspan{fill:#4a148c!important;}#mermaid-svg-APe9wrTHwlkp9yhp .new>*{fill:#ffe0b2!important;stroke:#ef6c00!important;color:#bf360c!important;}#mermaid-svg-APe9wrTHwlkp9yhp .new span{fill:#ffe0b2!important;stroke:#ef6c00!important;color:#bf360c!important;}#mermaid-svg-APe9wrTHwlkp9yhp .new tspan{fill:#bf360c!important;}

是

否

第一版图

需求变更加 Redis / 移鉴权 / 突出回滚

Agent 只改相关 JSON 对象

Schema / 布局 / 输出检查

校验通过?

生成新 HTML / SVG

返回机器可读诊断

校验失败时，Archify 会返回机器可读的诊断结果，指出具体对象、测量数据和允许的修复方式，Agent 照单调整，比对着 Node.js 堆栈猜原因省事得多。

五种图表类型，按问题选

它把要讲的问题拆成五类：Architecture（系统结构）、Workflow（请求/审批/CI/CD 流程）、Sequence（API 调用链、缓存穿透）、Data Flow（数据管道/ETL）、Lifecycle（状态机/订单生命周期）。

#mermaid-svg-dyjA4dMYsiGVFFyB{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-dyjA4dMYsiGVFFyB .error-icon{fill:#552222;}#mermaid-svg-dyjA4dMYsiGVFFyB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dyjA4dMYsiGVFFyB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dyjA4dMYsiGVFFyB .marker.cross{stroke:#333333;}#mermaid-svg-dyjA4dMYsiGVFFyB svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dyjA4dMYsiGVFFyB p{margin:0;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge{stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 text{fill:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth–1{stroke-width:17;}#mermaid-svg-dyjA4dMYsiGVFFyB .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-0{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-0{stroke-width:14;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-1{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-1{stroke-width:11;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 text{fill:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-2{stroke-width:8;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-3{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-3{stroke-width:5;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-4{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-4{stroke-width:2;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-5{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-5{stroke-width:-1;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-6{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-6{stroke-width:-4;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-7{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-7{stroke-width:-7;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-8{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-8{stroke-width:-10;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-9{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-9{stroke-width:-13;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 polygon,#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 text{fill:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .node-icon-10{font-size:40px;color:black;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .edge-depth-10{stroke-width:-16;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled circle,#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:lightgray;}#mermaid-svg-dyjA4dMYsiGVFFyB .disabled text{fill:#efefef;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-root rect,#mermaid-svg-dyjA4dMYsiGVFFyB .section-root path,#mermaid-svg-dyjA4dMYsiGVFFyB .section-root circle,#mermaid-svg-dyjA4dMYsiGVFFyB .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-dyjA4dMYsiGVFFyB .section-root text{fill:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-root span{color:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .section-2 span{color:#ffffff;}#mermaid-svg-dyjA4dMYsiGVFFyB .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-dyjA4dMYsiGVFFyB .edge{fill:none;}#mermaid-svg-dyjA4dMYsiGVFFyB .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-dyjA4dMYsiGVFFyB :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Archify五种图类型

Architecture

系统组件

云资源

数据库

边界 / 安全组

Workflow

请求生命周期

审批流

CI/CD

事件响应

Sequence

API 调用链

缓存穿透

认证检查

异步 trace

Data Flow

数据管道

ETL / ELT

分析事件

数仓同步

Lifecycle

状态机

订单 / 部署

重试路径

讨论未落地的方案，给一段系统描述就行；画现有项目，就让 Agent 去读仓库中的核心组件、主调用链、外部依赖和系统边界。如果要求附带源码证据，架构节点还能关联到固定 Git Commit 下的文件与行号，读图时可回到代码核对。

和 Mermaid、draw.io 有什么不同？

三者的定位其实是互补的，而非互相替代。Mermaid 靠代码 DSL 渲染，强在通用语法和社区模板，但语法敏感，AI 生成时括号不匹配、布局错位是常事；draw.io 是 WYSIWYG 拖拽，强在精细手工控制和零学习成本，但不适合 AI 批量驱动；Archify 则专为"AI 编程代理"这个场景设计，走自然语言 → JSON → HTML 的路径，天然容错，外加校验和原子发布。

上手很简单

如果你已经在用 Codex、Claude Code、Cursor 或 OpenCode，一条命令全局安装即可：

npx skills add tt-a1i/archify -g

只想先体验、不想写入全局 Skill 目录，也可以临时交给 Codex：

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

装好后不用记参数，直接在 Agent 对话里描述想要的图，比如"使用 Archify 画出一张高层运行时架构图，保留 8～12 个核心组件，突出一条主要路径，标出外部依赖与信任边界"。需要自检是否装好，在 Archify 目录运行 node bin/archify.mjs doctor 即可。

实际体验：一个真实仓库的成图

原作者拿开源的《SpringAI 智能面试平台》（2.0 版本，Star 3.1k+）做了测试。这个项目同时有 React 前端、Spring Boot API、语音面试 WebSocket、PostgreSQL、Redis Stream、对象存储和外部 AI 服务，正好能检验 Archify 对真实仓库的处理能力。

#mermaid-svg-S9mJLMoJibIALZlj{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-S9mJLMoJibIALZlj .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-S9mJLMoJibIALZlj .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-S9mJLMoJibIALZlj .error-icon{fill:#552222;}#mermaid-svg-S9mJLMoJibIALZlj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-S9mJLMoJibIALZlj .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-S9mJLMoJibIALZlj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-S9mJLMoJibIALZlj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-S9mJLMoJibIALZlj .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-S9mJLMoJibIALZlj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-S9mJLMoJibIALZlj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-S9mJLMoJibIALZlj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-S9mJLMoJibIALZlj .marker.cross{stroke:#333333;}#mermaid-svg-S9mJLMoJibIALZlj svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-S9mJLMoJibIALZlj p{margin:0;}#mermaid-svg-S9mJLMoJibIALZlj .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-S9mJLMoJibIALZlj .cluster-label text{fill:#333;}#mermaid-svg-S9mJLMoJibIALZlj .cluster-label span{color:#333;}#mermaid-svg-S9mJLMoJibIALZlj .cluster-label span p{background-color:transparent;}#mermaid-svg-S9mJLMoJibIALZlj .label text,#mermaid-svg-S9mJLMoJibIALZlj span{fill:#333;color:#333;}#mermaid-svg-S9mJLMoJibIALZlj .node rect,#mermaid-svg-S9mJLMoJibIALZlj .node circle,#mermaid-svg-S9mJLMoJibIALZlj .node ellipse,#mermaid-svg-S9mJLMoJibIALZlj .node polygon,#mermaid-svg-S9mJLMoJibIALZlj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-S9mJLMoJibIALZlj .rough-node .label text,#mermaid-svg-S9mJLMoJibIALZlj .node .label text,#mermaid-svg-S9mJLMoJibIALZlj .image-shape .label,#mermaid-svg-S9mJLMoJibIALZlj .icon-shape .label{text-anchor:middle;}#mermaid-svg-S9mJLMoJibIALZlj .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-S9mJLMoJibIALZlj .rough-node .label,#mermaid-svg-S9mJLMoJibIALZlj .node .label,#mermaid-svg-S9mJLMoJibIALZlj .image-shape .label,#mermaid-svg-S9mJLMoJibIALZlj .icon-shape .label{text-align:center;}#mermaid-svg-S9mJLMoJibIALZlj .node.clickable{cursor:pointer;}#mermaid-svg-S9mJLMoJibIALZlj .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-S9mJLMoJibIALZlj .arrowheadPath{fill:#333333;}#mermaid-svg-S9mJLMoJibIALZlj .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-S9mJLMoJibIALZlj .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-S9mJLMoJibIALZlj .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-S9mJLMoJibIALZlj .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-S9mJLMoJibIALZlj .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-S9mJLMoJibIALZlj .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-S9mJLMoJibIALZlj .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-S9mJLMoJibIALZlj .cluster text{fill:#333;}#mermaid-svg-S9mJLMoJibIALZlj .cluster span{color:#333;}#mermaid-svg-S9mJLMoJibIALZlj div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-S9mJLMoJibIALZlj .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-S9mJLMoJibIALZlj rect.text{fill:none;stroke-width:0;}#mermaid-svg-S9mJLMoJibIALZlj .icon-shape,#mermaid-svg-S9mJLMoJibIALZlj .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-S9mJLMoJibIALZlj .icon-shape p,#mermaid-svg-S9mJLMoJibIALZlj .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-S9mJLMoJibIALZlj .icon-shape rect,#mermaid-svg-S9mJLMoJibIALZlj .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-S9mJLMoJibIALZlj .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-S9mJLMoJibIALZlj .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-S9mJLMoJibIALZlj :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-S9mJLMoJibIALZlj .fe>*{fill:#e3f2fd!important;stroke:#1e88e5!important;stroke-width:2px!important;color:#0d47a1!important;}#mermaid-svg-S9mJLMoJibIALZlj .fe span{fill:#e3f2fd!important;stroke:#1e88e5!important;stroke-width:2px!important;color:#0d47a1!important;}#mermaid-svg-S9mJLMoJibIALZlj .fe tspan{fill:#0d47a1!important;}#mermaid-svg-S9mJLMoJibIALZlj .be>*{fill:#e8f5e9!important;stroke:#43a047!important;stroke-width:2px!important;color:#1b5e20!important;}#mermaid-svg-S9mJLMoJibIALZlj .be span{fill:#e8f5e9!important;stroke:#43a047!important;stroke-width:2px!important;color:#1b5e20!important;}#mermaid-svg-S9mJLMoJibIALZlj .be tspan{fill:#1b5e20!important;}#mermaid-svg-S9mJLMoJibIALZlj .db>*{fill:#fff3e0!important;stroke:#fb8c00!important;stroke-width:2px!important;color:#e65100!important;}#mermaid-svg-S9mJLMoJibIALZlj .db span{fill:#fff3e0!important;stroke:#fb8c00!important;stroke-width:2px!important;color:#e65100!important;}#mermaid-svg-S9mJLMoJibIALZlj .db tspan{fill:#e65100!important;}#mermaid-svg-S9mJLMoJibIALZlj .ext>*{fill:#fce4ec!important;stroke:#e91e63!important;stroke-width:2px!important;color:#880e4f!important;}#mermaid-svg-S9mJLMoJibIALZlj .ext span{fill:#fce4ec!important;stroke:#e91e63!important;stroke-width:2px!important;color:#880e4f!important;}#mermaid-svg-S9mJLMoJibIALZlj .ext tspan{fill:#880e4f!important;}

外部服务

数据层

后端层

前端层

React 前端

语音面试 WebSocket

Spring Boot API

异步消费者 / RAG

PostgreSQL

Redis Stream

对象存储

外部 AI 服务

要求不算复杂：只保留 8～12 个核心组件，画出主要访问链路、异步任务和数据存储关系。最终生成的图把普通请求、RAG 流式响应、语音面试和异步消费者放在一张图里，底部再用三张说明卡片补充细节。后面作者看实际截图时发现，第一版 Spring Boot 外框把外部 AI Provider 和 PostgreSQL 也圈了进去，容易引起语义误解；去掉外框重新交付后，9 项 Showcase 检查全部通过，0 错误、0 警告。这张图还能直接切换成 Blueprint 风格去评审，节点和连线不用重算。

它也有边界

Archify 值得称道的地方在"出图之后"：继续修改时保留无关结构、交付前执行固定检查、关系可回到 JSON 源文件核对。但它的校验器检查的是格式、几何和已写入的关系，代码分析有没有漏掉组件或调用链，它无法证明——涉及真实项目时，仍需要熟悉系统的人做最终确认。

放在更长的时间线上看，这类"架构图跟着代码持续演进"的工具有一个很自然的判断：优秀的技术项目正在走向"文档完全自治"，也就是代码变动时由 CI/CD 自动运行逆向分析、生成最新架构图。不过 Archify 也面临一些开放问题——比如大单体仓库（1000+ 文件）里模型识别准确率会下滑，JSON 里的节点命名来自模型理解而非人类共识，以及跨仓库微服务架构的合成，都还是未完全解决的领域。

一句话建议

临时画一张简单流程图，Mermaid 最省事；需要盯着画布逐个调元素，draw.io 更顺手。而 Archify 适合另一种活：让 Coding Agent 根据系统描述或代码仓库起图，后面还要反复改、查关系，甚至对比一次 PR 前后的架构变化。它留 JSON 源文件，交付前跑固定校验，最后给一个能独立打开的 HTML——省下来的，主要是反复改图、重新排图和核对关系的时间。

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