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

fireworks-tech-graph用自然语言生成专业技术图表fireworks-tech-graph是一个创新的命令行工具它能够将你用中文或英文描述的系统架构瞬间转化为出版级别的 SVG 和 PNG 技术图表。它内置了8种视觉风格、支持全部14种UML图并深度理解AI与Agent工作流的常见模式。核心价值告别手动绘图这个工具的核心思想是“描述即所得”。你无需学习任何DSL语法如Mermaid也无需在图形界面中拖拽只需专注于描述你的系统。工作流程示例输入用户描述 “生成一个暗色风格的Mem0内存架构图”处理工具将其分类为“内存架构图”并应用“暗色终端”风格输出在几秒内生成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-Archivepowershell-commandExpand-Archive -Path fireworks-tech-graph.zip -DestinationPath ~/.claude/skills/# 重命名文件夹renC:\Users\Administrator\.claude\skills\fireworks-tech-graph-mainfireworks-tech-graph2. 更新重新运行安装命令并加上--force参数即可获取最新版本npx skillsaddyizhiyanhua-ai/fireworks-tech-graph--force-g-y3. 依赖PNG渲染器要导出PNG你需要安装至少一个渲染器。强烈推荐cairosvg它在质量和安装成本之间取得了最佳平衡。渲染器质量安装命令适用场景cairosvg (推荐)✅ 良好pip install cairosvg默认选择平衡最佳rsvg-convert⚠️ 一般brew install librsvg(macOS) /sudo apt install librsvg2-bin(Ubuntu)无Python环境时使用puppeteer✅✅ 最佳npm install puppeteer处理复杂CSS或浏览器生成的SVG安装后可通过以下命令验证python3-cimport cairosvg; print(cairosvg.__version__)核心功能与使用方法基本用法工具会自动响应包含以下关键词的提示generate diagram/draw diagram/create chart/visualizearchitecture 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种独特的视觉风格适配不同的使用场景#风格名称背景色字体最佳用途1Flat Icon (默认)#ffffff白色Helvetica博客、演示文稿、文档2Dark Terminal#0f0f1a深色SF Mono / Fira CodeGitHub README、开发者文章3Blueprint#0a1628深蓝Courier New工程架构文档4Notion Clean#ffffff白色system-uiNotion、Confluence等维基5Glassmorphism#0d1117渐变Inter产品官网、主题演讲6Claude Official#f8f6f3暖白system-uiAnthropic/Claude项目风格7OpenAI Official#ffffff纯白system-uiOpenAI项目风格8Dark Luxury#0a0a0a深黑Georgia (标题) sans-serif高端、独特的产品展示全面的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 → ResponseAgentic RAG: 在RAG基础上增加Agent loop Tool useMulti-Agent:Orchestrator → [SubAgent×N] → Aggregator → OutputTool 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 managerDraw an OAuth2 authorization code flow sequence diagram项目资源GitHub仓库https://github.com/yizhiyanhua-ai/fireworks-tech-graphNPM包https://www.npmjs.com/package/yizhiyanhua-ai/fireworks-tech-graph许可证MIT