用自然语言画技术图，Archify让架构图变得简单
用自然语言画技术图，Archify让架构图变得简单
不用拖拽连线，说句话就能画出专业的技术图表。
痛点
你要画一个系统架构图。
传统方式：
- 打开绘图工具（Visio、Draw.io、Figma）
- 拖拽组件、数据库、云服务的图标
- 手动连线
- 调整布局
- 对齐、美化、导出
一个小时过去了。
而且：
- 不懂设计工具，画出来很难看
- 想改个颜色、换个布局，要重新调整
- 导出图片模糊，放不进文档
- 深色/浅色主题要画两遍
Archify
tt-a1i开源的Agent Skill——
用自然语言描述系统，自动生成专业的技术图表。
核心能力
- 📐 五种图表类型 — 架构图、工作流、序列图、数据流、生命周期
- 🎨 深色/浅色主题 — 一键切换，SVG自动适配系统主题
- 📋 一键复制PNG — 复制到剪贴板，直接粘贴到Slack/Notion/GitHub
- 🖼️ 超高清导出 — PNG/JPEG/WebP最高4倍分辨率，无模糊
- ✅ 验证循环 — JSON schema验证、布局检查、SVG校验
- 🏷️ 语义化标签 — aws.lambda、postgres、redis自动识别
- 📄 自包含HTML — 零依赖，单文件分享"
- 💬 对话迭代 — "加个Redis"、"把认证移到左边"
五种图表类型
架构图（Architecture）
用途： 系统组件、云资源、数据库、缓存、服务、边界、安全组
示例：
React前端调用Node.js API，后端是PostgreSQL和Redis，
部署在AWS上，前面有CloudFront。输出： 专业的系统架构图，包含前端、后端、数据库、缓存、CDN等组件。
工作流图（Workflow）
用途： 请求生命周期、审批流程、工具调用、CI/CD、运维手册、事件响应
示例：
用户提交请求 → Agent规划 → 审批门（如需要）→ 工具调用 →
追踪日志 → 最终回复输出： 泳道图，清晰展示参与方、步骤顺序、关键分支。
序列图（Sequence）
用途： API调用链、请求生命周期、缓存回退、认证检查、异步追踪、服务交互
示例：
用户打开页面，前端调用API，API验证JWT，读取Redis，
缓存未命中时回退到Postgres，返回JSON并发送追踪。输出： 时序图，展示谁调用谁、调用顺序、返回值。
数据流图（Data Flow）
用途： 数据管道、ETL/ELT、分析事件、PII隔离、数仓同步、血缘、下游消费者
示例：
Web和Mobile发送分析事件，Edge API收集，同意网关过滤PII，
Kafka传输接受的事件，数仓存储分析表，特征商店导出日特征，
仪表盘和ML模型消费下游数据。输出： 数据流图，展示数据源、处理阶段、存储、敏感边界、消费者。
生命周期图（Lifecycle）
用途： 状态机、订单/任务/部署/Agent运行生命周期、等待状态、重试、取消、超时、终止状态
示例：
Agent Run从Queued开始，经过Planning、Executing、Reviewing。
可以在Needs Approval暂停，在Blocked等待，Failed后重试，
以Cancelled或Expired结束，或以Completed完成。输出： 状态机图，展示状态、转换事件、重试路径、终止结果。
核心特性
1. 无需设计技能
传统绘图工具要学习拖拽、连线、对齐。
Archify：用自然语言描述即可。
"用archify画一个架构图：React前端调用Node.js API，
后端是PostgreSQL和Redis，部署在AWS上。"AI理解你的描述，自动生成图表。
2. 深色/浅色主题一键切换
生成的HTML文件内嵌两种主题：
- 按
T键切换 - 或在URL加
?theme=light - 或导出SVG，自动适配系统主题
SVG导出支持@media (prefers-color-scheme)，直接放到GitHub README，跟随读者系统主题切换。
不再需要准备深色/浅色两张图。
3. 一键复制PNG到剪贴板
按E键打开导出菜单，点击"Copy PNG to clipboard"。
直接粘贴到：
- Slack
- Notion
- GitHub评论
- 任何支持粘贴图片的地方
无需保存文件，无需手动截图。
4. 超高清导出
传统方式：截图放大后模糊。
Archify：
- PNG/JPEG/WebP原生渲染，最高4倍源分辨率
- 无upsampling模糊
- 或导出SVG，真正的矢量图
文档、演示文稿、README，任何场景都清晰。
5. 验证循环
生成图表前自动经过：
- JSON schema验证 — 确保数据结构正确
- 布局检查 — 确保组件不重叠、连线合理
- HTML/SVG校验 — 确保输出无误
- 目标迭代 — 发现问题自动修复
质量有保障。
6. 语义化技术标签
描述组件时用标准标签：
aws.lambdapostgresredisgithub-actionsopenai
Archify自动映射到正确的视觉类别。
无需管理庞大的图标库。
7. 自包含HTML
生成的HTML文件：
- 零依赖
- 无需外部CSS/JS
- 无需网络连接
- 直接发送给他人即可打开
分享极其简单。
8. 对话迭代
生成图表后，继续对话调整：
"加个Redis缓存"
"把认证模块移到左边"
"API用emerald绿色"
"把数据库放到最右边"AI自动调整，无需手动编辑。
支持的平台
| 平台 | 支持程度 |
|---|---|
| Claude Code CLI | 完整 — 运行类型化渲染器 + schema验证 |
| Codex CLI | 完整 — 安装到~/.agents/skills/ |
| opencode | 完整 — 安装到.opencode/skills/ |
| Claude.ai | 通常完整 — 取决于sandbox能否npm install |
| Project Knowledge | 仅架构模式 — 无代码执行，纯prompt驱动 |
怎么用
安装
下载archify.zip：
Claude Code CLI：
unzip archify.zip -d ~/.claude/skills/Codex CLI：
unzip archify.zip -d ~/.agents/skills/Claude.ai：
- Settings → Capabilities → Skills
- 点击 + Add
- 上传archify.zip
- 启用skill
使用
方式1：让AI分析代码库
分析这个代码库并描述架构。包括所有主要组件、
它们如何连接、使用什么技术，以及任何云服务。方式2：直接描述
用archify画一个架构图：React前端调用Node.js API，
后端是PostgreSQL和Redis，部署在AWS上，前面有CloudFront。方式3：对话迭代
"加个Redis缓存层"
"把认证服务移到最前面"
"数据库用蓝色背景"版本演进
从v1.0到v2.10，持续迭代：
- v1.0 — 基础架构图，仅深色主题
- v2.0 — 重写为可主题化CSS变量系统，客户端导出管道
- v2.1 — 复制到剪贴板 + 键盘导航
- v2.2 — 打印样式表 + 本地字体回退
- v2.3 — 修复raster upsampling bug，真正清晰的4倍分辨率
- v2.4 — SVG升级为双主题自包含文件
- v2.5 — 渲染器支持工作流/序列/数据流/生命周期
- v2.6 — 架构渲染器达到schema + 布局验证
- v2.7 — 工作流图强化（phase headers、groups、exception lanes）
- v2.8 — 可选trace动画
- v2.9 — 统一CLI + 真实repo架构示例
- v2.10 — 可操作的validator hints + 架构图网格布局
持续进化，越来越好用。
实战案例
案例1：电商系统架构图
输入：
用archify画架构图：React前端，Next.js API层，
PostgreSQL订单库，Redis缓存，Elasticsearch搜索，
部署在AWS（EC2 + S3 + CloudFront）。输出：
- 前端层：React
- API层：Next.js
- 数据层：PostgreSQL、Redis、Elasticsearch
- 云服务：AWS（EC2、S3、CloudFront）
一键切换深色/浅色主题，导出4倍分辨率PNG。
案例2：Agent工具调用工作流
输入：
用archify画工作流：用户提交请求 → Agent规划 →
审批门（如需要）→ 工具调用 → 追踪日志 → 最终回复输出：
- 泳道图：用户、Agent、审批、工具、日志
- 主流程：实线箭头
- 异步流程：虚线箭头
- 审批门：菱形决策节点
案例3：缓存回退序列图
输入：
用archify画序列图：用户打开页面，前端调用API，
API验证JWT，读取Redis，缓存未命中时回退到Postgres，
返回JSON并发送追踪。输出：
- 时序图：用户 → 前端 → API → Redis → PostgreSQL
- 清晰展示：调用顺序、返回值、缓存回退逻辑
适用场景
场景1：技术文档
README、技术设计文档、架构文档。
快速生成专业图表，提升文档质量。
场景2：团队沟通
Slack、Notion、Confluence。
一键复制PNG，直接粘贴，无需保存文件。
场景3：代码评审
GitHub PR、GitLab MR。
SVG导出，跟随系统主题，适配深色/浅色模式。
场景4：演示文稿
PPT、Keynote、Google Slides。
4倍分辨率PNG，放大不模糊。
场景5：架构评审
技术评审、架构评审会议。
对话迭代，实时调整，快速验证不同方案。
核心价值
1. 速度
从一小时到一分钟。
传统绘图：拖拽、连线、对齐、美化（一小时+）
Archify：描述系统，AI自动生成（一分钟）
2. 质量
专业级图表，无需设计技能。
自动布局、合理配色、清晰层次。
3. 灵活性
对话迭代，实时调整。
"加个Redis"、"换个颜色"、"移到左边"
4. 可分享
自包含HTML，零依赖。
发送文件即可，接收者直接打开。
5. 多格式
PNG/JPEG/WebP/SVG，任选。
4倍分辨率raster，真正的矢量SVG。
局限
不是所有图表都适合：
- 需要手绘风格的图 — Archify是技术图表，不是艺术创作
- 超大型系统 — 组件过多可能需要手动调整布局
- 非技术流程 — Archify面向技术场景，不是通用流程图工具
适合： 技术架构、系统设计、数据流、状态机等技术图表。
最后
传统绘图工具：学习成本高，耗时耗力。
Archify：说句话就能画。
不是要取代所有绘图工具——
它是让开发者用最自然的方式（自然语言）快速生成专业的技术图表。
用自然语言画技术图，Archify让架构图变得简单。
项目地址：https://github.com/tt-a1i/archify
项目主页：https://tt-a1i.github.io/archify/
License: MIT
版本：2.10.0
关注公众号 Fen9Pi，聊聊AI时代的开发者工具。