1. 项目定位与用途
fireworks-tech-graph 是面向 Claude Code 的官方技能插件,定位为自然语言驱动的技术图表生成工具。用户只需用日常语言描述系统架构或流程,例如“画一张 Mem0 记忆架构图,暗黑风格”,插件即可自动识别图表类型与视觉风格,生成专业级 SVG 和 PNG 图像。其核心用途是降低技术图表绘制门槛,让开发者、架构师和技术作家能快速产出出版质量的可视化内容,尤其适用于 AI 系统、微服务、数据流等复杂架构的表达。
fireworks-tech-graph 是 Claude Code 技能插件,将英文或中文描述自动转为出版级 SVG/PNG 技术图表。内置 7 种视觉风格、14 种 UML 类型,深度支持 AI/Agent 架构(RAG、Mem0 等)。简单安装,快速生成专业架构图,无需手动绘图。
fireworks-tech-graph 是一个 Claude Code 技能插件,通过自然语言描述自动生成出版级的 SVG 和 PNG 技术图表,内置 7 种视觉风格和 14 种 UML 图表类型,深度优化 AI/Agent 系统架构图。
fireworks-tech-graph 是面向 Claude Code 的官方技能插件,定位为自然语言驱动的技术图表生成工具。用户只需用日常语言描述系统架构或流程,例如“画一张 Mem0 记忆架构图,暗黑风格”,插件即可自动识别图表类型与视觉风格,生成专业级 SVG 和 PNG 图像。其核心用途是降低技术图表绘制门槛,让开发者、架构师和技术作家能快速产出出版质量的可视化内容,尤其适用于 AI 系统、微服务、数据流等复杂架构的表达。
传统技术图表绘制依赖手动操作绘图工具(如 draw.io)或代码描述(如 Mermaid),存在效率低、风格不统一、领域知识缺失等问题。fireworks-tech-graph 通过自然语言输入实现零门槛图表生成,内置 AI/Agent 领域专有模式(RAG、Mem0 等)和语义化元素,确保图表专业且符合领域惯例。相比 Mermaid 和 draw.io,它支持自然语言输入、提供多种开箱即用视觉风格、深度优化 AI 架构图,并自动导出高清 PNG,省去手动调整和导出配置的麻烦。
该项目主要适用于以下场景:1)AI 系统架构设计文档绘制,如 RAG 管道、多 Agent 协作流程;2)技术博客、学术论文插图生成,提供出版级清晰度;3)团队内部架构图快速分享与协作,通过自然语言即时生成;4)UML 图表自动化创建,涵盖类图、序列图等 14 种标准类型;5)多风格技术演示材料制作,支持从极简到品牌官方等多种视觉风格。尤其适合需要频繁更新架构图或缺乏设计资源的开发团队。
安装方式有两种,均需预先安装 rsvg-convert 工具。首选方式是通过 Claude Code 命令安装:`claude skills install fireworks-tech-graph`,插件将自动部署到 Claude 环境。手动安装方式为克隆仓库到指定目录:`git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph`。系统依赖 rsvg-convert 的安装方法:macOS 使用 `brew install librsvg`,Ubuntu/Debian 使用 `sudo apt install librsvg2-bin`,安装后可通过 `rsvg-convert --version` 验证。仓库中未明确给出 Windows 系统的依赖安装步骤。
使用触发词包括中文“画图/帮我画/生成图/架构图/流程图”或英文“generate diagram/draw diagram”。用户用自然语言描述需求,例如“Generate a Mem0 memory architecture diagram, dark style”或“画一张 Mem0 架构图,暗黑风格”。技能自动分类图表类型(如 Memory Architecture Diagram)和视觉风格(如 Style 2),生成含泳道、圆柱体、语义箭头的 SVG 文件,并调用 rsvg-convert 导出 1920px 宽度的无损 PNG 文件。输出路径默认为当前工作目录,可通过 `--output /tmp/diagrams/` 参数指定目录,或输出到桌面。仓库中未明确给出所有支持图表类型的完整列表或风格编号对应的详细参数配置方式。
项目实现上具有以下特点:1)语义化设计:形状(LLM=双边框矩形、Agent=六边形、Vector Store=环状圆柱)和箭头(颜色+虚线编码读写/异步/循环)均携带领域含义;2)品牌图标库:集成 40+ 产品图标与品牌色(OpenAI、Anthropic、Pinecone 等);3)纯内联 SVG 输出,不依赖外部字体,确保 rsvg-convert 渲染稳定;4)PNG 导出为 1920px 宽度(2× 视网膜分辨率),无损且适合技术文档嵌入;5)模块化架构:自然语言分类器 → SVG 生成引擎 → 风格系统 → PNG 导出,各模块在仓库中未完全公开源码细节,但通过 scripts/ 目录下的生成、验证和测试脚本可辅助开发。
可通过 Claude Code 命令 `claude skills install fireworks-tech-graph` 一键安装,或手动克隆到 `~/.claude/skills/fireworks-tech-graph` 目录。安装前需确保系统已安装 rsvg-convert 工具(macOS 用 brew install librsvg,Ubuntu/Debian 用 sudo apt install librsvg2-bin)。
完整支持全部 14 种标准 UML 图表类型(包括类图、组件图、序列图等),并提供 7 种视觉风格:Flat Icon(默认)、Dark Terminal、Blueprint、Notion Clean、Glassmorphism、Claude Official、OpenAI Official。同时内置 AI/Agent 领域专用模式,如 RAG、Mem0、Multi-Agent 等架构模板。
使用中文触发词“画图/帮我画/生成图/架构图/流程图”或英文“generate diagram/draw diagram”,随后用自然语言描述需求,例如“画一张 Mem0 架构图,暗黑风格”。技能将自动识别图表类型与风格,生成 SVG 和 1920px PNG 文件,默认输出到当前目录,也可用 `--output` 参数指定路径。
需要安装 `rsvg-convert` 工具。macOS 用户运行 `brew install librsvg`,Ubuntu/Debian 用户运行 `sudo apt install librsvg2-bin`。安装后可通过命令 `rsvg-convert --version` 验证版本。该工具用于将生成的 SVG 无损转换为高清 PNG,无额外字体依赖。
支持。README.zh.md 明确说明可用中文描述系统,例如“画一张 Mem0 的架构图,暗黑风格”,技能会正确识别图表类型(Memory Architecture Diagram)和风格(Style 2),并输出对应文件。中英文输入均可无缝使用。