Architecture Diagram Generator：生成漂亮的架构图 Skill

最近发现了一个挺有意思的项目——Architecture Diagram Generator，它是 一个 Agnet Skill，让你通过描述系统架构，就能直接生成一张好看的暗色主题架构图。

说白了就是三件事：打字代替拖拽、聊天代替调参、一个 HTML 走天下。

颜值在线

这个 Skill 没有简单套 Mermaid 或 PlantUML，而是自己搞了一套设计系统，出来的图确实能打：

• 配色有语义：前端 Cyan、后端 Emerald、数据库 Violet、云服务 Amber、安全相关 Rose……不同组件一目了然，不用来回翻图例。
• 暗色主题拉满：Slate-950 深色底 + 网格线 + JetBrains Mono 字体，放进文档或者做分享演示都很带感。
• 细节有讲究：组件用了半透明填充，箭头画在组件下层。为了防止箭头从透明背景"透"出来，每个组件底下先垫一层不透明遮挡再叠样式——强迫症看了直呼舒适。

上手指南

不强需求 Claude，使用其他可以加载 Skill 都 AI 智能体都可以使用（虽然项目 README 中写明需要 cladue.ai）。

装起来：去 GitHub 仓库 下载 architecture-diagram.zip，解压到 AI 只能体的 skill 目录，如：~/.claude/skills/ 、 ~/.agents/skills 等。

用起来：在对话里丢一段架构描述，跟 AI 说一声：

1

给  https://github.com/NousResearch/hermes-agent  项目画一个架构图

或者详细一些

1
2
3

Use your architecture diagram skill to create an architecture diagram from this description:

[你的架构描述]

架构描述哪来都行——手写、让 AI 智能体分析代码仓库、或者干脆让 AI 智能体先给你出个初版。生成后哪里不满意，继续聊就完事了，比在画布上拖来拖去舒服多了。

出来的 HTML 包含标题栏、SVG 主图、摘要卡片和页脚，单文件自包含，直接丢群里或者塞文档里都没问题。Web 应用、Serverless、微服务这些常见场景都能 hold 住。

最后

目前这个 Skill 配合 AI 智能体能展示出不错的效果，但更加复杂的系统、强定制需求就很难实现了，而其样式自定义也受内置设计系统的限制。但日常写文档配个图、技术方案评审画个架构，确实能省不少功夫。

项目 MIT 开源，GitHub 上已经 3.4k Star 了，感兴趣的小伙伴可以去 https://github.com/Cocoon-AI/architecture-diagram-generator 看看。