Archify

在技术文档编写与系统设计中，绘制清晰、美观的架构图往往耗时费力。Archify 是一款专为 Claude、Codex CLI 和 opencode 设计的 Agent Skill，它允许用户通过自然语言描述系统或流程，自动生成做工精细的技术图表。生成的图表以单文件 HTML 形式呈现，无需任何运行时依赖，即可在浏览器中查看、切换主题、复制或导出为超高清图片。

核心亮点：自然语言驱动、五类图表、极致导出

1. 对话即绘图

• 零门槛上手：只需告诉 AI 你的系统组件（如 “React 前端调 Node.js API”）或流程逻辑，Archify 即可自动布局并生成图表。
• 即时迭代：通过聊天即可修改细节，如“把 Redis 挪到左边”、“鉴权服务换成玫红”或“加个 Kafka”，无需手动拖拽节点。

2. 五大专业图表类型

3. 自适应与高清导出

• 智能 SVG：导出的 SVG 内嵌深浅色两套 CSS 变量及 @media 规则。贴在 GitHub README 中时，图表会自动跟随读者的系统主题切换，无需维护两张图片。
• 4x 超清位图：PNG/JPEG/WebP 均由浏览器在最高 4× 分辨率下原生光栅化，确保在视网膜屏、幻灯片或打印输出中绝对清晰，无模糊锯齿。
• 一键分享：支持直接复制 PNG 到剪贴板，无缝粘贴至 Slack、飞书、Notion 或 Figma。

快速开始

1. 安装 Skill

下载 archify.zip，根据使用的平台解压到对应目录：

• Claude Code / Codex CLI / opencode (全局):

  unzip archify.zip -d ~/.agents/skills/ # 或 ~/.claude/skills/
  cd ~/.agents/skills/archify && npm install # 安装 schema 校验依赖
  

• Claude.ai:
  进入 Settings → Capabilities → Skills，上传 zip 包并开启开关。
• Project Knowledge:
  直接上传 zip 包（仅支持纯 Prompt 驱动的架构模式，无法执行代码渲染）。

2. 准备描述

你可以让 AI 分析代码仓库，或手动提供简要描述：

“一个典型的 SaaS 应用：React 前端通过 CloudFront CDN 访问 Node.js API，后端连接 PostgreSQL 数据库，使用 Redis 做缓存，部署在 AWS 上。”

3. 生成与交互

在对话中调用：

“用 archify skill 帮我生成一张架构图：[粘贴描述]”

Claude 将返回一个 HTML 文件链接。在浏览器打开后：

• 按 T 切换深浅色主题。
• 按 E 打开导出菜单，选择复制或下载格式。

适用场景

• 系统架构师：快速绘制初步架构草图，用于技术评审或文档留存。
• 技术博主/文档工程师：生成适配 GitHub 主题的精美插图，提升文档可读性。
• 团队协作：在 Slack/飞书中快速分享流程逻辑，降低沟通成本。
• 教学与演示：清晰展示数据流向或状态机逻辑，辅助技术讲解。