实战案例从零用Archify绘制三层Web应用架构与缓存缺失时序图【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一款面向 AI Agent 的架构绘图技能Agent Skill用一句自然语言描述就能把三层 Web 应用架构、缓存缺失时序图这类系统交互图渲染成自包含、可交互的 HTML支持深浅色主题切换、路线探测和 PNG 导出。本文从零走通两个完整案例全程几乎不用手写代码。为什么用 Archify 画架构图相比传统画图工具Archify 有三个对新手特别友好的特点️对话即画图在 Cursor、Claude Code 等 Agent 聊天框里描述系统Agent 自动生成带类型的 JSON 描述文件再确定性编译成 HTML/SVG✅交付前自动校验布局、标签遮挡、连线路由都要通过检查失败会给出可机读的修复建议不会交出一张乱线团一个文件即成品输出是单个自包含 HTML打开即看可导出 PNG、SVG 甚至 1200×630 分享卡案例一从零绘制三层 Web 应用架构图第一步一键安装 Archify 技能在终端执行一条命令即可全局安装npx skills add tt-a1i/archify -g 不需要先 clone 任何仓库——安装后直接在 Agent 聊天里描述系统就行也支持npx skills use tt-a1i/archifyarchify --agent codex免安装试用。第二步用一句话描述三层架构在 Agent 中用自然语言描述分层结构例如用 Archify 画一张三层 Web 架构图用户流量经 CDN 和负载均衡到达 API 服务 API 读 Redis 缓存未命中时回落查询 PostgreSQL静态资源由 S3 提供 异步任务写入 SQS 队列由 Worker 消费。认证走 OAuth 2.0。Agent 会据此生成符合 architecture.schema.json 的类型化 JSON核心结构只有四类字段作用本案例中的内容components节点Users、CloudFront、Load Balancer、API、Redis、PostgreSQL 等 10 个boundaries边界框AWS Region、API 安全组connections连线HTTPS、read-through、SQL、enqueuecards结论卡片Edge / Application / Security 三张要点卡第三步校验、交付打开 HTMLAgent 会先执行validate通过全部 9 项 showcase 检查再执行deliver原子化产出 HTML——校验不过的图根本不会覆盖你上次的好结果。最终打开 web-app-rendered.html 就能看到成品完整源文件可对照 web-app.architecture.json其中meta.views预置了主请求路径认证与缓存静态与异步三个导览视角方便演示时切换。案例二绘制缓存缺失Cache Miss时序图想讲清一次请求在时间线上发生了什么Archify 的sequence类型是最佳选择。把案例一的场景换个角度描述用 Archify 画时序图用户打开页面Web App 向 API 发 GET /dashboard API 先校验 JWT再读 Redis 缓存未命中则查询 Postgres回写缓存 并发出异步 trace最后返回 200 JSON。生成的时序图有几个值得注意的视觉约定见 cache-miss-request.sequence.jsonsegments 分段把时间轴划为 Request、Fallback、Response trace 三段一眼看清缓存缺失发生在哪个阶段语义化箭头verify JWT用安全色实线miss、rows等返回消息用更安静的虚线异步 trace 用点线互不干扰activations 激活条每个参与者忙碌的时间段用色块标出谁在等多久一目了然渲染产物在 sequence-cache-miss-request.html双击即可离线查看。打开 HTML 后还能做什么路线探测与导出生成的 HTML 不是静态截图而是一个轻查看器。以缓存缺失时序图为例按R键或工具栏PATH即可对任意两点做路线探测图中展示了 Web App → API → Postgres 这条最短授权路径节点数量、跳数和路径事实都会如实标出还可以复制带#route的永久链接直接分享给同事。常用快捷键/搜索聚焦节点、L对比角色、F进入演示模式、S切换 4 种视觉预设classic / signal-flow / blueprint / editorial。需要插图进文档或发社媒时点右上角 Export 菜单即可新手避坑清单✅先只画一条主路径分支从离主路径最近的节点长出节点总数控制在 12 个以内✅标签写语义连线上标协议、动作、同步/异步如read-through删标签不是修几何问题的办法✅别手动摆坐标首版一律用自动路由等校验报出具体诊断再按supportedFixes局部微调✅交付即冻结deliver成功后不要再改源文件要改就重新走一遍生成→校验→交付✅中文界面meta.locale设为zh-CN可本地化图例、标题与提示文案更多实战参考资料路径技能契约生成全流程archify/SKILL.md架构图 schemaarchify/schemas/architecture.schema.json → 正确入口为 architecture.schema.json时序图 schemaarchify/schemas/sequence.schema.json手写示例合集archify/examples/Agent 创作手册docs/authoring-cookbook.mdArchify 还支持 workflow、dataflow、lifecycle 三种图型配合node bin/archify.mjs guide 场景可以让 CLI 帮你判断该选哪种图。照着本文两个案例练手你也能在几分钟内产出可以直接放进评审会和 README 的架构图。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考