Archify —— 智能架构图生成工具

这是什么

Archify 是一个基于人工智能的图表生成工具，以 Agent Skill 的形式嵌入 Claude、Codex CLI 和 opencode 等开发助手。用户只需用自然语言描述系统架构、工作流、时序、数据流或生命周期，Archify 就能生成一份自包含的 HTML 文件——可直接在浏览器中打开，支持一键切换深色/浅色主题，并能将图表以 PNG、JPEG、WebP（最高 4× 源分辨率）或 SVG 格式导出。其核心基于一个可主题化的 CSS 变量系统和客户端渲染管线，无需任何外部依赖。

解决的问题

技术团队在日常文档、方案评审、故障排查中频繁需要绘制架构图、流程图和序列图。传统做法依赖独立绘图工具（如 Draw.io、Excalidraw）或代码驱动方案（Mermaid、PlantUML），存在以下痛点：

• 需要手动布局、调整样式，耗时且容易出丑；
• 生成图片与系统主题不匹配（深色/浅色需准备两份素材）；
• 导出分辨率低，放大后模糊；
• 多人协作时难以统一风格；
• 修改迭代需重绘或重新生成，流程割裂。

Archify 用“用自然语言描述 → 一键生成”的方式，将从构思到交付的周期压缩到秒级，且输出文件自带主题切换和高清导出能力，大幅降低技术绘图的门槛和摩擦。

核心功能

• 五种图表类型：架构图（Architecture）、工作流图（Workflow）、时序图（Sequence）、数据流图（Data Flow）、生命周期图（Lifecycle）。每种都有对应的预置示例和渲染规则。
• 自然语言驱动：直接输入英文描述，如“React frontend calls a Node.js API backed by PostgreSQL and Redis, deployed on AWS behind CloudFront.”即可生成对应架构图。
• 一键主题切换：按 T 键（或通过 UI 按钮）在深色和浅色主题间切换，主题偏好通过 URL 参数持久化（?theme=light）。
• 超高清导出：内置导出菜单，支持 PNG / JPEG / WebP（最高 4× 源分辨率，原生渲染无模糊）和 SVG（矢量）。SVG 文件内嵌 @media (prefers-color-scheme) 变量，可自动跟随查看器系统主题，无需两套图片。
• 剪贴板复制：一键将当前视图复制为 PNG 到剪贴板，可直接粘贴到 Slack、Notion、GitHub 等平台。
• 自包含 HTML：生成的单个 HTML 文件零依赖，可分享、可离线打开，所有样式和交互脚本内嵌。
• 语义标签：组件标签支持 aws.lambda、postgres、redis、github-actions、openai 等，Archify 自动映射到正确的视觉分类，无需完整图标库。
• 聊天迭代：生成后可直接用自然语言修改，如“add Redis”、“move auth to the left”、“use emerald for the API”，模型重新生成并更新图表。
• 内置验证循环：基于 JSON Schema 校验布局，执行骨架检查、HTML/SVG 制品检查，并在交付前进行有针对性的迭代。
• 命令行支持：通过 npx skills add tt-a1i/archify -g 安装到全局 skill，或在 Claude/Codex/opencode 中激活后使用。还提供了 bin/archify.mjs 统一 CLI，支持 doctor、demo 等命令。

亮点 / 与同类相比

| 对比项 | Archify | Mermaid / PlantUML | Draw.io / Excalidraw | |--------|---------|-------------------|----------------------| | 输入方式 | 自然语言描述，无需学语法 | 需学习 DSL 语法 | 纯手动拖拽 | | 视觉效果 | 预设语义配色、自动布局，成品可直接用作正式文档 | 需要额外配置 CSS 或主题 | 依赖自主设计，风格不统一 | | 主题切换 | 内置深色/浅色，一键切换，SVG 跟随系统 | 手动切换或需两套配置 | 需手动调整或另存 | | 导出质量 | 最高 4× 源分辨率原生渲染，无放大模糊；SVG 自带自适应 | 通常依赖 mermaid-cli 截图，分辨率有限 | 导出质量取决于画布尺寸 | | 依赖 | 零依赖 HTML，一个文件即可分享 | 需渲染引擎（如 mermaid-cli）或嵌入标记 | 需完整应用或在线服务 | | 迭代方式 | 直接对话修改，无需重绘结构 | 修改源文本后重新生成图片 | 重新调整图元位置 | | 验证机制 | 内置 JSON Schema 校验、布局检查、制品检查 | 无自动验证 | 无 |

Archify 的核心差异化在于：让非设计人员也能在几秒内输出生产级、可复用、自适应主题的技术图表，且所有交互和导出都在客户端完成，不需要服务器或第三方服务。

适合谁用 / 上手

• 软件架构师：快速绘制系统架构图、信任边界图，用于方案评审和技术文档。
• 后端/前端开发者：生成服务间调用序列、数据流、CI/CD 工作流，用于 issue 讨论或 Readme。
• 技术作者：为文档提供统一风格、自适应主题的图表，减少维护两套图片的成本。
• DevOps 工程师：绘制部署流水线、PII 边界图、状态机图。
• AI 代理开发者：作为 Agent Skill 集成到自己的 AI 工作流中。

上手最快的方式（30 秒内开始）：

npx skills add tt-a1i/archify -g

然后对你的 Agent 说：Use archify to map this repository's runtime architecture.

如果想临时试用：

npx skills use tt-a1i/archify@archify --agent codex
# 或 claude-code / opencode

对于 Claude.ai 用户，可直接下载 archify.zip 在设置中上传 Skills 并启用。

生成的图表是一个 .html 文件，双击即可在浏览器中预览。按下 T 切换主题，E 打开导出菜单。