Fireworks Tech Graph - 技术图表生成 Skill
Fireworks Tech Graph 是一个用于生成高质量技术图表的 OpenClaw Skill，支持架构图、流程图、序列图、类图、ER 图等多种图表类型，输出格式为 SVG + PNG。
安装
从 GitHub 安装：
npx skills add yizhiyanhua-ai/fireworks-tech-graph
强制更新：
npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y
依赖
需要安装 rsvg-convert 用于 PNG 导出：
# macOS
brew install librsvg
# Ubuntu/Debian
sudo apt install librsvg2-bin
# Windows (scoop)
scoop install rsvg-convert
支持的图表类型
图表类型 |
说明 |
|---|---|
Architecture Diagram |
架构图，横向分层布局 |
Data Flow Diagram |
数据流图，强调数据转换 |
Flowchart |
流程图，决策菱形节点 |
Agent Architecture |
Agent 架构图 |
Memory Architecture |
记忆架构图（Mem0 风格） |
Sequence Diagram |
时序图，消息交换 |
Class Diagram |
UML 类图 |
Use Case Diagram |
UML 用例图 |
State Machine Diagram |
UML 状态机图 |
ER Diagram |
实体关系图 |
Network Topology |
网络拓扑图 |
Mind Map |
思维导图 |
Timeline / Gantt |
时间线/甘特图 |
Comparison Matrix |
功能对比矩阵 |
使用方式
在 OpenClaw 对话中使用自然语言触发：
帮我画一个微服务架构图
生成一个用户登录的流程图
画一个 Agent 记忆架构图
触发关键词：画图、帮我画、生成图、架构图、流程图、generate diagram、visualize 等。
样式选择
提供 7 种内置样式：
样式 |
适用场景 |
|---|---|
Style 1: Flat Icon（默认） |
博客、文档、演示 |
Style 2: Dark Terminal |
GitHub、技术文章 |
Style 3: Blueprint |
架构设计文档 |
Style 4: Notion Clean |
Notion 文档 |
Style 5: Glassmorphism |
产品展示、Keynote |
Style 6: Claude Official |
Anthropic 风格图表 |
Style 7: OpenAI Official |
OpenAI 风格图表 |
输出路径
默认输出到当前目录：
./[图表名].svg
./[图表名].png
自定义路径：
输出到 /path/to/diagram.svg
SVG 生成规范
OpenClaw 会按照以下规范生成 SVG：
ViewBox: 默认
0 0 960 600，高度图0 0 960 800字体: 内嵌样式，不依赖外部字体
箭头: 统一使用
<marker>定义颜色: 使用语义化颜色（蓝色=数据流、绿色=记忆、橙色=控制流）
图例: 多种箭头类型时自动添加图例
辅助脚本
Skill 提供四个辅助脚本用于复杂场景：
scripts/generate-diagram.sh验证 SVG + 导出 PNG
scripts/generate-from-template.py从 JSON 配置生成 SVG
scripts/validate-svg.sh验证 SVG 语法
scripts/test-all-styles.sh批量测试所有样式
验证生成的 SVG
rsvg-convert diagram.svg -o /tmp/test.png 2>&1 && echo "✓ 有效" && rm /tmp/test.png
导出高清 PNG
rsvg-convert -w 1920 diagram.svg -o diagram.png