它能做什么

仓库：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 让新环境变量生效。