architecture-diagram-generator：用自然语言把系统架构画成深色主题图——Claud…

一、它是什么

（一）一句话定位

Architecture Diagram Generator 是 Cocoon-AI 出品的一个 Claude Skill，官方原话描述是「Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. Works as a Claude AI skill.」。它的核心承诺很朴素：你用大白话描述系统，Claude 在几秒内生成一张专业的、深色主题的系统架构图，产出是一份可直接用浏览器打开的独立 HTML 文件。根据仓库 meta.json 的统计，它目前拥有 7,180 Stars、555 Forks、0 个开放 Issue，采用 MIT 许可，版本号已到 1.1，最近更新于 2026-09-09，主语言标注为 HTML。

（二）三步快速上手

README 把使用设计成「三步走」。第一步，下载仓库提供的 architecture-diagram.zip，到 claude.ai 的 Customize → Skills 里通过「+ Create skill → Upload a skill」上传并开启；这里有个门槛——必须先在 Settings → Capabilities 打开 Code Execution，且它覆盖 Free、Pro、Max、Team、Enterprise 全部计划。第二步，准备一段你的系统描述：可以让 Cursor、Claude Code、Windsurf 或 ChatGPT 先分析代码库再总结，也可以自己列几个组件，甚至直接让 Claude 给一个典型架构当起点。第三步，把描述贴进已开启该 Skill 的 Claude，让它「用你的架构图技能生成一张图」，剩下就是打开浏览器看结果。

二、生成的图到底长什么样

（一）单文件自包含结构

Claude 产出的不是图片，而是一份自包含的 HTML：内嵌 CSS、内联 SVG，不依赖任何外部渲染。README 给出的结构很清晰——顶部 Header 是带动态状态指示器的项目标题；中间 diagram-container 里是真正的 SVG 图（所有组件与连线）；再往下是三张 Summary 卡片，高亮关键细节；最后是 Footer 的元数据。正因为它就是个网页，分享方式极其简单：把文件发出去、塞进文档、打印或挂到任意静态站点都行。

（二）深色主题与语义配色

默认的视觉语言是「Slate-950 深色背景 + 细网格」：背景色 #020617，叠加 40px 网格图案，技术字体用 JetBrains Mono，连箭头都做了 z-order 处理——先画箭头、再用不透明组件底盖住，保证连线干净地藏在方块后面。SVG 的 viewBox 通常宽 1000–1100px，可响应式缩放，在任何现代浏览器里都不会糊。

（三）内置导出按钮

图生成后，文件头部的工具栏直接给了三条导出路径：📋 Copy 把高分辨率 PNG 拷到剪贴板，能直接贴进 Slides、Docs 或 Slack；🖼️ PNG 下载一张高清图；📄 PDF 则保留深色主题导出。无需安装、无需命令行，打开点一下即可。

三、配色体系：让架构一眼可辨

README 用一张表把「语义化配色」讲得很透——这不是为了好看，而是为了让读图的人瞬间区分组件性质：前端类用 Cyan（青），后端 / 服务 / API 用 Emerald（翠绿），数据库 / 存储 / AI-ML 用 Violet（紫），Cloud/AWS 之类基础设施用 Amber（琥珀），安全相关的鉴权、加密用 Rose（玫红），其余通用或外部系统用 Slate（灰）。当你把一张图甩给同事，他不用读标签也能凭颜色猜出大致角色，这是工程沟通里很实用的一层信息压缩。

这张表的聪明之处在于，它把「颜色」从审美选择变成了信息编码：当一张图里同时出现数据库（紫）、云服务（琥珀）与安全组（玫红），读图者无需读标签就能瞬间判断「这块是存储、那块是云、这里是需要守住的安全边界」。在跨团队评审里，这种「一眼可辨」显著降低了来回确认的成本，也让架构图从「美术作品」回归到「沟通工具」的本质。

四、怎么装进 Claude

（一）Claude.ai 上传

最推荐的路径就是前面三步里的上传 zip：Customize → Skills → + → Upload a skill → 选文件 → 开启。新人可参考官方「Use Skills in Claude」指南；Team / Enterprise 计划则需要管理员在 Organization settings → Skills 中预先开启。

（二）Claude Code CLI

如果你用的是 Claude Code，直接解压到 skills 目录即可，全局放在 ~/.claude/skills/，或项目级放在 ./.claude/skills/：

unzip architecture-diagram.zip -d ~/.claude/skills/
# 或项目级
unzip architecture-diagram.zip -d ./.claude/skills/

（三）手动放置

只需确保两个文件对 Claude 可见：SKILL.md（技能指令）与 resources/template.html（基础模板）。这种「一个文件夹 + 一份 SKILL.md + 一份模板」的极简结构，正是 Claude Skills 通用规范的缩影，也意味着你可以直接改模板来调自己的设计系统。

五、可定制到什么程度

技能用一套统一的设计系统，但 Claude 会按你的系统结构自适应：布局随数据流排布，连线箭头表达数据流向与关系，标签可以标协议、端口、注释，分组则支持安全组、云区域、限界上下文。换句话说，你不用学一套绘图语法，只要把「有哪些组件、怎么连、用什么技术、有没有云服务」讲清楚，剩下的视觉决策交给技能。README 也强调，这些自适应都基于一致的 design system，所以多张图摆在一起仍是一套视觉语言。

README 在 Features 里还点出几个工程细节：漂亮的深色主题用 Slate-950 背景配细网格、语义化配色保持一致、单文件自包含、任意浏览器可开、JetBrains Mono 的技术字体，以及 smart layering——箭头先画、再被不透明组件底干净地盖在后面，避免连线「穿模」。这些细节单独看不起眼，合起来才让生成的图达到「能直接放进正式文档」的完成度。

六、姊妹技能与边界

同一个作者还提供了 process-flow-diagram-generator，面向随时间展开的逐步流程——审批流、runbook、自动化流水线，用的是同一套设计语言、不同的形状语言。两者互补：一个画「静态结构」，一个画「动态流程」。README 也坦白了一些边界：它本质上是 Claude 在浏览器里跑代码生成 SVG，因此依赖 Code Execution 开关；它生成的是示意级架构图，不是替代专业绘图工具的工程精确图，复杂曲线会被简化为直线或基础曲线，手绘粗糙度固定为默认值。

README 反复强调「然后你可以用对话继续迭代」：发现图里某个组件不对、某条连线画歪、某种配色想换，直接让 Claude 改，图会实时更新，不必重新生成整张。这种「聊着聊着图就成型」的体验，让它在架构探索阶段比一次性出图工具更有价值——你不需要事前就想清楚所有细节，边看边改即可。

七、适用人群与典型场景

它最适合不想碰绘图工具栏、又需要快速产出可分享架构图的人：技术负责人给老板讲方案、工程师 onboarding 时梳理系统、写文档或投标材料要配图、甚至只是「我脑子里的东西想先画出来看看」。README 给了三组现成提示词样例——Web 应用（React + Node.js + PostgreSQL + Redis + JWT）、AWS Serverless（CloudFront + API Gateway + Lambda + DynamoDB + S3 + Cognito）、微服务（Kong 网关 + 多语言服务 + Kafka + K8s），基本覆盖日常七八成需求，拿来改改就能用。

值得一提的是，它不像专业绘图工具那样要求你先学一套图形语法，也不强制你打开某个特定软件——产出是网页，意味着评审会上直接浏览器打开、群里直接发文件、文档里直接内嵌都行。对习惯「先聊清楚再落地」的团队，这种低摩擦尤其友好；而 MIT 许可又让你可以把模板改成像素级贴合自家品牌，再分发给同事。

八、常见问题 FAQ

九、总结

Architecture Diagram Generator 的价值，不在于「又多了一个画图工具」，而在于它把「画图」这件最容易被拖延的事，压缩成「用中文描述 → 拿到一张能分享的深色架构图」的两步操作。对需要频繁沟通架构、又懒得打开绘图软件的人，它是一个低门槛、高回报的 Claude 技能；而语义配色与单文件输出的设计，又让它天然适合塞进文档、幻灯片和代码仓库。

在撰写本文的过程中，我主要参考了以下来源：GitHub 仓库 Cocoon-AI/architecture-diagram-generator 的 README 与 meta.json（Stars 7,180、Forks 555、MIT、version 1.1、更新于 2026-09-09），以及仓库 examples 中的示例图。文中数据以官方公开信息为准，可能随版本更新而变化。