fireworks-tech-graph：用自然语言生成专业技术图表

fireworks-tech-graph：用自然语言生成专业技术图表

fireworks-tech-graph是一个创新的命令行工具，它能够将你用中文或英文描述的系统架构，瞬间转化为出版级别的 SVG 和 PNG 技术图表。它内置了8种视觉风格、支持全部14种UML图，并深度理解AI与Agent工作流的常见模式。

核心价值：告别手动绘图

这个工具的核心思想是“描述即所得”。你无需学习任何DSL语法（如Mermaid），也无需在图形界面中拖拽，只需专注于描述你的系统。

工作流程示例：

1. 输入：用户描述 “生成一个暗色风格的Mem0内存架构图”
2. 处理：工具将其分类为“内存架构图”，并应用“暗色终端”风格
3. 输出：在几秒内生成mem0-architecture.svg和mem0-architecture.png(1920px高清)

相较于Mermaid或draw.io，它的优势在于：

• 自然语言输入：直接描述，无需学习新语法。
• AI/Agent领域模式：内置RAG、Agentic Search、Multi-Agent等常见模式，开箱即用。
• 多种视觉风格：一键切换，从极简到奢华，适配不同场景。
• 高清PNG导出：自动导出1920px的PNG，适合直接嵌入文档。

安装与配置

1. 安装

推荐通过npx和skills命令从GitHub仓库安装：

npx skillsaddyizhiyanhua-ai/fireworks-tech-graph

或者，你也可以直接将仓库克隆到本地：

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

手动

# 使用 curl 下载 ZIPcurl-L-ofireworks-tech-graph.zip https://github.com/yizhiyanhua-ai/fireworks-tech-graph/archive/main.zip# 解压到目标目录（需要先安装 7zip 或使用 PowerShell 的 Expand-Archive）powershell-command"Expand-Archive -Path fireworks-tech-graph.zip -DestinationPath ~/.claude/skills/"# 重命名文件夹ren"C:\Users\Administrator\.claude\skills\fireworks-tech-graph-main""fireworks-tech-graph"

2. 更新

重新运行安装命令并加上--force参数即可获取最新版本：

npx skillsaddyizhiyanhua-ai/fireworks-tech-graph--force-g-y

3. 依赖：PNG渲染器

要导出PNG，你需要安装至少一个渲染器。强烈推荐cairosvg，它在质量和安装成本之间取得了最佳平衡。

安装后，可通过以下命令验证：

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

核心功能与使用方法

基本用法

工具会自动响应包含以下关键词的提示：
generate diagram/draw diagram/create chart/visualize
architecture diagram/flowchart/sequence diagram/data flow

基础示例：

• Draw a RAG pipeline flowchart(绘制一个RAG流水线流程图)
• Generate an Agentic Search architecture diagram(生成一个Agentic Search架构图)

指定风格：

• Draw a microservices architecture diagram, style 2 (dark terminal)(使用暗色终端风格)
• Draw a multi-agent collaboration diagram --style glassmorphism(使用玻璃态风格)

指定输出路径：

• Generate a Mem0 architecture diagram, output to ~/Desktop/
• Create a tool call flow diagram --output /tmp/diagrams/

丰富的视觉风格 (8种)

工具提供了8种独特的视觉风格，适配不同的使用场景：

全面的UML与AI模式支持

所有14种UML图：
工具支持生成所有标准的UML图，并为每种推荐了最佳风格：

• 结构图：类图、组件图、部署图、包图等 (推荐 Style 1, 3, 4)
• 行为图：用例图、活动图、状态机图 (推荐 Style 1, 2, 3)
• 交互图：序列图、通信图、时序图等 (推荐 Style 1, 2)

内置AI/Agent领域模式：
工具内置了对常见AI工作流的理解，你可以直接描述：

• RAG Pipeline:Query → Embed → VectorSearch → Retrieve → LLM → Response
• Agentic RAG: 在RAG基础上增加Agent loop + Tool use
• Multi-Agent:Orchestrator → [SubAgent×N] → Aggregator → Output
• Tool Call Flow:LLM → Tool Selector → Execution → Parser → LLM (loop)
• Mem0 Memory Layer:Input → Memory Manager → [VectorDB + GraphDB] → Context

智能的形状与箭头语义

为了让图表信息更丰富，工具使用不同的形状和箭头来传递语义。

形状语义 (部分示例)：

• LLM / 模型：圆角矩形，双边框，带⚡图标
• Agent / 协调者：六边形
• 向量数据库：带内环的圆柱体
• 工具 / 函数：带⚙图标的矩形
• 决策：菱形

箭头语义：

• 主数据流：2px 实线 (粗)
• 控制/触发：1.5px 实线
• 内存写入：1.5px5,3虚线
• 异步/事件：1.5px4,2虚线

社区与商业合作

该项目由 Brad Zhang 创建，不仅是一个开源工具，也展示了将模糊的AI/开发工具工作流转化为约束性、可复用系统的能力。

• 商业案例研究：https://bradzhang.dev/en/case-studies/fireworks-tech-graph
• 合作意向：如果你是构建Agent基础设施、AI IDE、内部Copilot或开发者工具，作者开放付费冲刺、设计伙伴和创始工程师等合作形式。详情：https://bradzhang.dev/en/work-with-me

总结

fireworks-tech-graph是一个强大且极具生产力的工具，特别适合需要频繁创建技术图表的开发者、架构师和技术作家。它将繁琐的绘图工作简化为自然语言描述，并通过丰富的风格和专业领域的模式支持，让生成的图表既美观又专业。

快速参考命令

安装：

npx skillsaddyizhiyanhua-ai/fireworks-tech-graph

更新：

npx skillsaddyizhiyanhua-ai/fireworks-tech-graph--force-g-y

安装推荐的PNG渲染器：

pipinstallcairosvg

使用示例：

# 在支持的终端或AI环境中，直接输入自然语言指令即可>Draw a microservices architecture diagram, style3(Blueprint)>Generate a Mem0 memory architecture diagram with vector store, graph DB, KV store, and memory manager>Draw an OAuth2 authorization code flow sequence diagram

项目资源：

• GitHub仓库：https://github.com/yizhiyanhua-ai/fireworks-tech-graph
• NPM包：https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph
• 许可证：MIT