阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/biezaiyong-drawio-tuotuozhuaizhuailezheigekaiyuanxiangmurangniyongshuohuadefangshihuajiagoutu/ 「芋道源码」欢迎转载，保留摘要，谢谢！

• 画图这件事到底有多烦
• fireworks-tech-graph：说句话，图就出来了
• 7 种视觉风格，不只是换个颜色
• AI 架构图内置模板 + 14 种 UML
• 装上就能用
• 值不值得装

---

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
4. 新的源码解析文章实时收到通知。每周更新一篇左右。
5. 认真的源码交流微信群。

---

技术文档写到最后一步——画架构图，然后情绪断崖。

Mermaid：学语法，写 DSL，调半天对不齐。draw.io：拖半小时，想换个配色方案，全部推倒重来。截图粘贴：文档一放大，全是锯齿。最后硬着头皮交出去的图，连自己回头看都觉得丢人。

问题不在工具本身，在于画图这件事的交互方式就是错的——我脑子里已经有了清晰的架构，为什么还得手动一个一个拖节点？

画图这件事到底有多烦

写一篇技术博客，正文 30 分钟搞定，配一张架构图 40 分钟起步。画完还不满意，调颜色、对齐、改字号、导出、再调……时间全耗在跟工具较劲上。

更痛的是风格一致性——公司技术文档十个人十种配色，PPT 一页一个画风。有没有一种方式，我只说”画一个 RAG 流程图，暗色风格”，图就直接出来？

有。今天介绍的这个开源项目，就是干这件事的。

fireworks-tech-graph：说句话，图就出来了

这是一个 Claude Code Skill，装好后在 Claude Code 里用自然语言描述你要画的东西，它自动生成：

• SVG：矢量图，放大不糊，可以用 Figma/Illustrator 继续编辑
• PNG：1920px 宽，直接扔文档和 PPT

定位很明确：用说话代替拖拽，用 AI 理解意图代替 DSL 语法。

7 种视觉风格一句话切换，14 种 UML 图类型全覆盖，还有一批 AI/Agent 领域的架构模板开箱即用。

7 种视觉风格，不只是换个颜色

每种风格有独立的色板、字体、排版规则和边距系统。不是套滤镜，是从设计系统层面做的差异化。

Style 1 — Flat Icon

白底彩色图标，博客文章和幻灯片首选。耐看，不抢文字的风头。

Style 2 — Dark Terminal

黑底霓虹色，等宽字体。放 GitHub README 里有种”这系统真在跑”的压迫感。写技术文章配图选这个，逼格直接上一档。

Style 3 — Blueprint

深蓝底 + 网格线 + 青色描边，工程蓝图感。画微服务部署图、基础设施拓扑特别对味。右下角还有标题栏，像正经出图。

Style 4 — Notion Clean

极简白底，只有一种强调色。贴进 Notion、Confluence、飞书文档零违和感。内部文档首选。

Style 5 — Glassmorphism

暗色渐变底 + 毛玻璃卡片。画多 Agent 协作这类”很多模块并列”的图最合适——每个模块是独立的磨砂卡片，边界清晰还好看。拿去做产品发布会 PPT 不违和。

Style 6 — Claude Official

米白底（#f8f6f3），Anthropic 品牌色系。画 Claude 相关系统架构时风格统一，不会看着像”别人家的图”。

Style 7 — OpenAI Official

纯白底 + 绿色强调箭头。画 GPT API 集成、模型调用链路时用这个，视觉上跟 OpenAI 官方文档保持一致。

AI 架构图内置模板 + 14 种 UML

AI/Agent 领域：不用从零描述

这是这个项目最有价值的部分。你说”画一个 RAG 流程图”，它不是瞎猜节点——项目里已经把每种 AI 架构的标准结构、节点关系、数据流向都写死了：

内置模板	标准节点结构
RAG Pipeline	查询 → 嵌入 → 向量检索 → 召回 → LLM → 返回
Agentic RAG	RAG + Agent 循环 + 工具调用
Agentic Search	规划器 → 并行检索/计算/代码 → 合成器
Mem0 内存层	输入 → 内存管理器 → 向量库 + 图数据库 → 上下文
Multi-Agent	协调者 → N 个子 Agent → 聚合 → 输出
Tool Call	LLM → 工具选择 → 执行 → 解析 → 回 LLM（循环）

UML：14 种图类型全覆盖

类图、组件图、部署图、时序图、活动图、状态机图……标准 UML 该有的都有。

图形语义：不只好看，还能自解释

每种形状有固定含义——圆角双边框代表 LLM，六边形代表 Agent，圆柱体是向量库，菱形是决策节点。实线是主数据流，虚线是写入，弯曲箭头是反馈。图本身就在传递架构信息，不需要旁边再写一段解释文字。

装上就能用

装依赖（SVG 转 PNG）：

# macOS
brew install librsvg

# Ubuntu/Debian
sudo apt install librsvg2-bin

安装 Skill：

npx skills add yizhiyanhua-ai/fireworks-tech-graph

然后在 Claude Code 里说：

画一张 Agentic RAG 架构图，Agent 核心层包含 Planner 和 Tool Selector，Memory 层有 VectorDB 和 GraphDB，用 Dark Terminal 风格

输出两个文件：SVG（继续编辑用）和 1920px PNG（直接放文档）。更新用 --force：

npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y

值不值得装

三类人闭眼装：

1. 经常写技术博客的人——以前画图比写文章还久，现在一句话搞定
2. 做 AI 应用开发的人——RAG、Agent、记忆架构这些图直接出，不用手搭结构
3. 对图表风格有追求的人——7 种设计系统级风格比自己配色好看十倍

两种情况不需要：

• Markdown 里偶尔插个简单流程图 → Mermaid 够了
• 需要像素级精确控制每个元素位置 → draw.io 更合适

这不是”替代 draw.io”的工具，是”让 90% 的画图需求不再需要打开 draw.io”的工具。

MIT 协议开源：https://github.com/yizhiyanhua-ai/fireworks-tech-graph