基于 DeepSeek 的 2 个开源架构图 Skill：用自然语言快速生成高质量 SVG/HTML 架构图

事情是这样的。

前阵子我写文章，最头疼的不是写字，是画图。一张架构图，我在 Draw.io 里拖半天，对齐对到眼瞎，最后导出来还糊得像打了马赛克。我就寻思，得找几个趁手的 Skill 替我干了。

然后我翻到了两个 skill。

一个叫 fireworks-tech-graph，一个叫 architecture-diagram-generator。

都说 DeepSeek 比较擅长写文案。我就琢磨，有了 Skill 它会不会更强。

于是我把它们喂给我的 DeepSeek-V4-Pro。

结果，我整个人都懵了……

先说第一个，fireworks-tech-graph。

它强在哪呢？不是让你「画一张图」，是让你用中文描述你的系统，几秒钟吐一张能直接发的 SVG。更强的是内置 8 种风格，扁平图标、暗黑极客、工程蓝图、Notion 极简、玻璃态卡片，连 Claude 官方和 OpenAI 官方风格都有。

而且它对 AI 这块儿门儿清。你不用跟它解释啥叫 RAG、啥叫 Multi-Agent、啥叫 Mem0，它自带这些 pattern。

我拿它试了两个。

第一个，画 Mem0 的记忆架构图，用风格 1 的扁平图标风。喂给 DeepSeek 的 prompt 长这样：

画一张 style 1（Flat Icon）的 Mem0 记忆架构图。
分成四个横向区域，Input Layer、Memory Manager、Storage Layer、Output / Retrieval。
包含 User、AI App / Agent、LLM、mem0 Client、Memory Manager、Vector Store、Graph DB、Key-Value Store、History Store、Context Builder、Ranked Results、Personalized Response。
使用 read、write、control、data 四类语义箭头，整体保持产品文档风格的清晰布局。

DeepSeek 吐出来的 SVG，我导成 PNG 往文章里一搁，你说这是哪家大厂产品文档里抠出来的我都信。那叫一个干净。

生成完之后还有分析和验证，点个赞。

第二个，我换成风格 2 的暗黑极客风，画 Tool Call 的执行流程。

画一张 style 2（Dark Terminal）的 tool call flow 图。
包含 User query、Retrieve chunks、Generate answer、Knowledge base、Agent、Terminal、Source documents、Grounded answer。
使用终端窗口 chrome、Neon 强调色、等宽字体，以及 retrieval、answer synthesis、embedding update 三类语义箭头。

这张更野。深色背景配霓虹色，等宽字体，活脱脱一个黑客终端。搁 GitHub 的 README 里，氛围感直接拉满。

我当时就愣住了。
不对，我没愣住，我特么兴奋了——这俩 prompt 我全程一个字没改，纯搬过来的，DeepSeek 就给我整出这水平？？？

回到主线。第二个 skill，architecture-diagram-generator，路子不一样。

fireworks 走的是 SVG 加 PNG，这个走的是 HTML。你描述完系统，它吐一个独立的 HTML 文件，浏览器一打开，就是一张漂亮的暗黑风架构图。更贴心的是图上自带 Copy、PNG、PDF 三个按钮，点一下复制到剪贴板，往飞书文档里一粘，完事儿。

它还有一套语义配色：前端青色，后端翡翠绿，数据库紫色，云服务琥珀黄，安全玫瑰红。一眼扫过去，谁是谁，清清楚楚。

也试两个。

第一个，一个普通的 Web 应用。
DeepSeek 开始 coding。

prompt 大概长这样：

Create an architecture diagram for a web application with
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

效果图来了：

第二个，AWS 的无服务器架构。
DeepSeek 开始 coding。

Prompt：

Create an architecture diagram showing
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth

效果图：

这两张配色统一，层次分明。最细节的是箭头先画再被组件框盖住，所以线条干干净净不会穿过文字。我前后改了几版，就跟它聊天似的，「把这个服务挪左边」「加个 Kafka」，它实时给我更新。

太离谱了……

说到这儿，我得唠一句。

模型是会换的，Skill 是能搬的。

我有时候觉得，我们老盯着哪个模型最强，其实有点跑偏。真正拉开差距的，是你手里攒了多少这种能复用的 Skill 资产。今天 DeepSeek 强，明天可能换别的，但 你这套画图的方法论，谁也拿不走。

在钻研具体工具时，很多开发者习惯直接到 云栈社区 这样的技术社区里淘金，那里经常有关于 LLM 工作流与架构可视化的热点讨论。当你能把一次手工画图的痛苦，沉淀为可复用的 Skill，才是真正把经验变成了资产。

磨平一点信息差。哪怕，只是很小的一点。

https://github.com/yizhiyanhua-ai/fireworks-tech-graph
https://github.com/Cocoon-AI/architecture-diagram-generator