8.5K Star！告别手动画图：这个开源项目让自然语言秒变专业技术架构图！

在技术圈里，有一句流传甚广的话： 「一张图胜过千言万语」

这句话我深以为然。无论是写技术博客、做架构设计文档，还是在团队会议上分享方案，一张清晰的技术图总能让复杂的概念变得 直观易懂 。

但实际工作中，画图这件事往往比写代码还让人头疼。

前两天，我在 GitHub 上闲逛时发现了一个叫 fireworks-tech-graph 的项目。目前已经有 8.5k+ 的 Star ，在技术圈里引起了不小的反响。

01

PART

项目介绍

INTRO · 核心能力

fireworks-tech-graph 是一个专为 AI 编码助手设计的 Skill，由开发者 yizhiyanhua-ai 创建并开源。它的工作流程很清晰：

...Workflow

用户输入："帮我画一张 Mem0 内存架构图，用深色风格"

　→ Skill 自动分类：内存架构图，风格 2（Dark Terminal）

　→ 生成带泳道、圆柱、语义箭头的 SVG

　→ 导出 1920px 高清 PNG

　→ 输出：mem0-architecture.svg / mem0-architecture.png

整个过程完全不需要你写任何 DSL 语法，也不需要在 GUI 里拖拽元素，只需要用中文或英文描述你想要的图就行。

解决了什么问题？

1

效率问题 ：从「脑子里有结构」到「画出图来」的 时间成本太高

2

专业度问题 ：非设计背景的开发者很难画出 专业水准的技术图

3

领域适配问题 ：AI/Agent 领域的新概念缺乏 现成的绘图语义

4

多场景适配问题 ：不同场景（博客、文档、演讲、产品页）需要 不同风格的图

fireworks-tech-graph 一次性解决了这些问题，让画图变成一件轻松愉快的事。

02

PART

核心亮点

FEATURES · 8种风格+14种图

8 种视觉风格

这是我最喜欢的功能之一。项目内置了 8 套精心设计的视觉风格 ，不是简单的颜色替换，而是完整的设计系统。

特别值得一提的是 Style 8 Dark Luxury ，这是一种完全由 AI 手绘的风格。它不像其他风格那样基于模板，而是让 AI 读取参考文档后直接绘制 SVG，呈现出独特的 艺术感 。

14 种图类型 + 完整 UML 支持

这个项目的图类型覆盖能力堪称全面。它不仅支持常见的架构图、流程图、数据流图，还完整支持全部 14 种 UML 图类型 ：

结构类

类图、组件图、部署图、包图、组合结构图、对象图

行为类

用例图、活动图、状态机图、序列图、通信图、时序图、交互概览图

数据类

ER 图

除此之外，它还针对 AI/Agent 领域做了深度优化，内置了多个领域模式：

1

RAG 流程 ：向量检索、嵌入生成、上下文构建、重排序

2

Agentic Search ：智能体搜索、工具调用、结果聚合

3

Mem0 记忆架构 ：向量存储、图数据库、键值存储、历史存储

4

Multi-Agent ：协调器、专家智能体、共享记忆、结果合成

5

Tool Call 流程 ：工具选择、执行、解析、循环反馈

语义化的形状和箭头

这是 fireworks-tech-graph 最精妙的设计之一。它建立了一套完整的 语义形状词汇表 和 语义箭头系统 ：

形状语义

1

LLM / 模型 = 双边框圆角矩形

2

Agent / 协调器 = 六边形

3

向量存储 = 带网格线的圆柱体

4

工具 / 函数 = 齿轮图标矩形

5

短期记忆 = 虚线圆角矩形

6

长期记忆 = 数据库圆柱体

7

用户 / 人类 = 小人图标

8

队列 / 流 = 水平管道

箭头语义（颜色 + 虚线模式）

1

蓝色实线 = 主数据流

2

橙色 = 控制流

3

绿色实线 = 内存读取

4

绿色虚线 = 内存写入

5

紫色曲线 = 反馈循环

6

灰色虚线 = 异步通信

这种设计让生成的图不仅好看，而且「有意义」，读者能通过形状和箭头颜色快速理解系统的 结构和数据流 。

40+ 产品图标

项目内置了 40 多个主流技术产品的图标，并且精准还原了它们的 品牌配色 ：

1

AI 模型：OpenAI、Anthropic、Google、Meta

2

向量数据库：Pinecone、Weaviate、Milvus、Chroma

3

数据库：PostgreSQL、MySQL、MongoDB、Redis

4

消息队列：Kafka、RabbitMQ

5

云服务：AWS、GCP、Azure

这意味着你可以直接画出带有真实产品图标的架构图， 无需额外找图标 。

03

PART

快速上手

GET STARTED · 安装与使用

STEP 01

安装方法

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

CMD git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph

STEP 02

安装 PNG 渲染依赖

选择以下三种方案之一：

...bash

# 推荐：cairosvg

pip install cairosvg

# 备选：rsvg-convert（macOS）

brew install librsvg

# 最高保真：puppeteer（体积较大）

npm install puppeteer

STEP 03

验证安装

...bash

python3 -c "import cairosvg; print(cairosvg.__version__)"

rsvg-convert --version

STEP 04

更新技能

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

STEP 05

完整示例

...Prompt

画一张 Mem0 内存架构图，使用风格 1（Flat Icon）。

包含四个水平区域：输入层、内存管理器、存储层、输出/检索。

节点包括：用户、AI应用/Agent、LLM、mem0客户端、内存管理器、向量存储、图数据库、键值存储、历史存储、上下文构建器、排序结果、个性化响应。

使用语义箭头表示读取、写入、控制和数据流。布局要干净，适合产品文档。

触发关键词

Skill 会自动识别以下触发词：

...Keywords

generate diagram / draw diagram / create chart / visualize

architecture diagram / flowchart / sequence diagram / data flow

///

LAST

写在最后

CONCLUSION · 总结与推荐

在 AI 时代，自动化工具正在渗透到软件开发的各个环节。

fireworks-tech-graph 把 AI 的自然语言理解能力和专业的设计系统结合起来，让开发者能够专注于「描述系统」，而不是「绘制图表」

如果你经常需要画技术架构图、流程图，或者写技术文档、博客，这个项目绝对值得一试。

项目地址： https://github.com/yizhiyanhua-ai/fireworks-tech-graph