Archify

聊两句就画出好看的架构图、技术流程图、调用时序图、数据流图和生命周期图。深色 / 浅色一键切。导出 4× 清晰 PNG / JPEG / WebP / SVG，或直接复制到剪贴板。

Archify 是一个 Claude Skill：你用大白话描述自己的系统或流程，它就把你的描述变成一张做工精细的技术图 —— 一个单文件 HTML，在浏览器里打开就能切主题、复制到剪贴板、导出成各种图片格式。

• 不需要会画图 —— 把组件和连接关系说给 Claude 就行
• 支持 workflow / sequence / data flow / lifecycle —— 技术流程、审批链、工具调用、CI/CD、请求调用链、数据管线、PII 边界、状态机都可以画
• 内置主题切换 —— 深色 / 浅色一键切，浏览器记住偏好
• 一键复制到剪贴板 —— 直接贴到 Slack、飞书、微信、Notion、GitHub issue
• 导出图片超清晰 —— PNG / JPEG / WebP 全部由浏览器在 4× 源分辨率下原生光栅化（不是位图放大，没有糊），或导出 SVG 做真矢量
• SVG 自动跟系统深浅色 —— 导出的 SVG 内嵌两套变量 + @media (prefers-color-scheme)，贴到 GitHub README 里，读者切深浅色图跟着切（不用两张 PNG + `` 包起来）
• 单文件 HTML —— 零依赖，发一个文件就能分享
• 聊天迭代 —— "把 Redis 挪到左边"、"鉴权服务换成玫红"、"加个 Kafka"

English

预览

同一张图，两套主题，一键切换：

深色	浅色

Export 菜单 —— 复制到剪贴板 + 四种格式下载：

想亲自玩一下：克隆仓库后打开 examples/web-app.html，按 T 切主题，E 打开导出菜单。给 URL 加上 ?theme=light 或 ?openExport=1 可以强制初始状态。

图表类型

Archify 现在有五种主要输出：

类型	适合画什么	怎么用
Architecture	系统组件、云资源、数据库、缓存、服务边界、安全组	直接描述系统结构
Workflow	请求生命周期、审批流程、工具调用、CI/CD、运维 runbook、事故响应	说明参与方、步骤顺序、关键分支
Sequence	API 调用链、请求生命周期、缓存回源、鉴权、异步 trace、服务交互	说明谁调用谁、先后顺序、返回路径
Data Flow	数据管线、ETL/ELT、埋点、PII 隔离、仓库同步、数据血缘、下游消费	说明数据来源、处理阶段、存储位置、敏感边界和消费方
Lifecycle	状态机、订单/任务/部署/Agent run 生命周期、等待态、重试、取消、超时、终态	说明对象有哪些状态、哪些事件触发转移、哪些状态是终态

Workflow 不是通用流程图的替代品，它更偏“技术沟通图”：有泳道、有语义颜色、有主路径和异步/审批/观测路径。比如：

用 archify 画一个 workflow：
用户提交请求 -> Agent 规划 -> 需要审批时进入 Approval Gate -> 调工具 -> 记录 trace -> 返回结果

本仓库里有一个可打开的示例：examples/workflow-agent-tool-call-rendered.html。

Sequence 用来解释更细的交互顺序，比如：

用 archify 画一个 sequence diagram：
用户打开页面，前端请求 API，API 校验 JWT，读取 Redis，缓存未命中则查 Postgres，返回结果并写入 trace。

示例：examples/sequence-cache-miss-request.html。

Data Flow 适合解释“数据资产怎么走”，比如：

用 archify 画一个 data flow：
Web 和 Mobile 上报埋点，Edge API 收集事件，Consent Gate 过滤 PII，Kafka 承接事件流，
Warehouse 存分析表，Feature Store 做每日特征，Dashboard 和 ML Model 消费下游数据。

示例：examples/dataflow-product-analytics.html。

Lifecycle 用来解释“对象状态怎么变”，比如：

用 archify 画一个 lifecycle diagram：
Agent Run 从 Queued 进入 Planning，再进入 Executing 和 Reviewing。需要人工确认时进入
Needs Approval，缺少输入时进入 Blocked；工具失败可以 Failed 后重试，用户取消进入 Cancelled，
超时进入 Expired，成功则进入 Completed。

示例：examples/lifecycle-agent-run.html。

版本演进

Archify 基于 Cocoon-AI/architecture-diagram-generator v1.0（只有深色主题的 HTML 输出）fork 重写。2.0 把模板重构成 CSS 变量驱动的可主题化系统，加入客户端导出流水线。2.1 加入剪贴板复制 + 键盘导航。2.2 加入打印样式 + 本地字体回退。2.3 修了一个存在已久的位图升采样 bug，所有光栅导出改为 4× 原生渲染（同时移除了 v2.1 引入的 1×/2×/4× 选择器 —— 那个选择器只是在诱导用户选出更糊的图）。2.4 SVG 导出升级成双主题自持版 —— 同一个 .svg 文件贴在 GitHub README 里，读者切深浅色图会自己跟着切。

---

GitHub에서 전체 내용 보기