Claude Code使用：Fireworks Tech Graph 安装总结

Fireworks Tech Graph 安装总结

在 Windows 11 + nvm + 已装 Chrome 的本机上，把 fireworks-tech-graph（Claude Code 画图 skill）跑通的一份完整踩坑与配置总结：一句话中/英自然语言 → SVG + 1920px PNG 技术图。

---

一、它能做什么

仓库：github.com/yizhiyanhua-ai/fireworks-tech-graph（MIT，7k+ star），是一个 Claude Code 的「裸 skill」（pure skill，非 plugin）。

核心能力一览：

维度	说明
自然语言输入	一句话（中/英文均可）即可生成技术图，无需手写 Mermaid/PlantUML
双输出格式	同时输出 SVG（矢量、可二次编辑）+ PNG（1920px 高清）
8 种风格	style1~style8，覆盖简约/科技/手绘/暗色等多种视觉调性
14 种图类型	流程图、架构图、时序图、思维导图、网络拓扑、组件关系图等
UML 全覆盖	类图、用例图、活动图、状态图、组件图、部署图等标准 UML
AI-Agent 领域内置	预置 RAG / LLM Pipeline / Agent / Tool-use / Vector-DB 等 AI 领域 pattern，开箱即用
语义形状箭头	根据语义自动选择箭头形状（实线/虚线/粗细/箭头样式）表达不同关系
40+ 内置图标	数据库、云、API、用户、服务、缓存等常用技术图标库

---

二、外部依赖清单

依赖	是否必需	用途	本机状态
Python 3	必需	生成 SVG + 运行 helper 脚本	已装 3.14.5
PNG 渲染器（三选一）	必需	把 SVG 渲染成 1920px PNG	见第三节选型
git	必需	clone 仓库到 skills 目录	已装
Node.js（puppeteer 时）	puppeteer 方案需要	运行 puppeteer 渲染	已装 v25.8.1
系统 Chrome / Edge（puppeteer 时）	puppeteer 方案可复用	免下载 Chromium，直接用系统浏览器内核	已装 Chrome

字体不用额外安装：puppeteer 走系统 Chrome，CJK 字体由 Windows 自带字体栈兜底。

---

三、PNG 渲染器选型（关键决策）

这是整个安装过程中最关键的一步，直接决定中文能否正常显示。

渲染器	渲染质量	中文支持	安装体积	安装方式
cairosvg	好	✗ 中文变方框	小	pip install cairosvg
puppeteer	最佳	✅ 完美	大（可免下载 Chromium）	npm install -g puppeteer
rsvg-convert	一般	✗ 丢中文	中	Windows 上极难装（依赖 librsvg）

结论：本机已有 Chrome 内核 → 选 puppeteer + 系统 Chrome。中文显示完美，且通过 PUPPETEER_SKIP_DOWNLOAD=true 跳过 ~150MB Chromium 下载，3 秒即可装完。

---

四、安装步骤（本机实测）

步骤 1：全局安装 skill（git clone 到 skills 目录）

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

注：

• 别用 npx skills add —— 那是第三方 CLI，非官方；
• /plugin 市场搜不到这个 skill —— 它是「裸 skill」，没有注册到任何 marketplace，只能 git clone。

步骤 2：安装 puppeteer（跳过 Chromium 下载）

PUPPETEER_SKIP_DOWNLOAD=true npm install -g puppeteer

注：本机有 Chrome 内核，跳过 150MB Chromium 下载，3 秒装完。

步骤 3：配置系统环境变量（写到系统级 HKLM）

让 puppeteer 永远指向系统 Chrome：

export MSYS_NO_PATHCONV=1
reg add "HKLM\SYSTEM\CurrentControlSet\Control\Session Manager\Environment" /v PUPPETEER_EXECUTABLE_PATH /t REG_SZ /d "C:\Program Files\Google\Chrome\Application\chrome.exe" /f

设完之后必须重启 Claude Code 让新环境变量生效。

---

五、踩坑记录（实测 10 个坑）

#	现象	根因	解决
1	/plugin 搜不到 skill	裸 skill 未注册 marketplace	git clone 到 ~/.claude/skills/
2	npx skills add 是第三方命令	非官方 CLI	用 git clone 官方仓库
3	下载 Chromium 极慢	国外源下 150MB	PUPPETEER_SKIP_DOWNLOAD=true 跳过，改用系统 Chrome
4	puppeteer 包损坏 / require 失败	中断导致目录只有 node_modules，缺 package.json 和入口 JS	rm -rf 后带 SKIP 重新安装
5	cairosvg 中文变方框	Cairo 字体 API 不 fallback CJK	选 puppeteer
6	python3 报 Python was not found	python3 命中 Windows Store alias	用 python，不用 python3
7	NODE_PATH 下 require 报 MODULE_NOT_FOUND	nvm 反斜杠路径下 node 解析失败	用绝对路径正斜杠 require：require('D:/DEV/Nvm/node/global/node_modules/puppeteer')
8	PowerShell stdin 多行脚本只跑第一行	-Command - 的 stdin 行为	换 reg.exe 或写 .ps1 文件
9	reg.exe 报无效语法	git bash 把 /v /f 当 Unix 路径转换	export MSYS_NO_PATHCONV=1
10	系统级环境变量写失败	HKLM 需要管理员权限	确认管理员身份后再 reg add

---

六、最终配置清单（本机）

• skill 位置：~/.claude/skills/fireworks-tech-graph
• puppeteer 位置：D:\DEV\Nvm\node\global\node_modules\puppeteer（v25.1.0，nvm 全局）
• 系统环境变量：PUPPETEER_EXECUTABLE_PATH = C:\Program Files\Google\Chrome\Application\chrome.exe（HKLM 系统级）
• Python 调用：用 python，不要用 python3
• require puppeteer：用绝对路径 + 正斜杠，如 require('D:/DEV/Nvm/node/global/node_modules/puppeteer')

---

七、使用方法

1. 重启 Claude Code（让环境变量与 skill 生效）；
2. 直接用自然语言下指令即可触发，例如：
   • “画一张 RAG 流程图”
   • “Draw a microservice architecture diagram”
   • “画一个 Agent 工具调用的时序图，用 style3 风格”
3. 可指定：
   • 风格 style1 ~ style8
   • 输出路径（默认输出到当前工作目录）

---

八、执行逻辑图

这张图展示了从「自然语言输入」到「SVG + PNG 双输出」的完整组件依赖与执行流程：Claude Code 解析用户意图 → skill 内置 pattern 库匹配图类型 → Python 生成 SVG → puppeteer 调用系统 Chrome 把 SVG 渲染成 1920px PNG。