fireworks-tech-graph 深度学习笔记

📋 项目基本信息

🔥 一句话定位

Stop drawing diagrams by hand. Describe your system in English or Chinese — get publication-ready SVG + PNG technical diagrams in seconds.

字段	内容
项目名称	fireworks-tech-graph
GitHub	https://github.com/yizhiyanhua-ai/fireworks-tech-graph
核心定位	Claude Code Skill - 自然语言描述转换为出版级SVG/PNG技术图谱
技术领域	AI辅助可视化、SVG生成、技术文档自动化
主要语言	Claude Code Skill (YAML/SVG/Shell/Python)
许可证	MIT

🎯 核心功能与差异化

与竞品对比

特性	Mermaid	draw.io	fireworks-tech-graph
自然语言输入	❌ 需写DSL	❌ 需拖拽	✅ 支持
AI/Agent领域模式	❌ 无	❌ 无	✅ 内置RAG/Mem0等
多视觉风格	❌ 有限	需手动	✅ 7种内置
高清PNG导出	❌ 需手动	❌ 需手动	✅ 自动1920px
语义箭头颜色	❌ 需手动	❌ 需手动	✅ 自动编码

核心功能矩阵

🎨 7种视觉风格

Flat Icon / Dark Terminal / Blueprint / Notion / Glassmorphism / Claude Official / OpenAI Official

📊 14种UML图支持

Class/Component/Sequence/State/ER等完整UML覆盖

🤖 AI领域知识

内置RAG/Agentic/Mem0/Multi-Agent等AI/Agent领域模式

📐 语义形状词汇

LLM=双边框矩形、Agent=六边形、VectorDB=圆柱体

📤 PNG高清导出

rsvg-convert 1920px Retina输出

✅ 质量验证闭环

语法验证→视觉自检→迭代优化

🛠 技术栈与架构设计

┌─────────────────────────────────────────────────────────────┐
│                     fireworks-tech-graph                      │
├─────────────────────────────────────────────────────────────┤
│  用户输入层                                                     │
│  └── 自然语言描述 ("生成一个Mem0架构图，深色风格")                    │
├─────────────────────────────────────────────────────────────┤
│  语义理解层                                                     │
│  ├── 图谱类型分类 (Architecture/DataFlow/Agent/Memory...)         │
│  ├── 布局规则引擎 (水平层次/垂直时间/径向分支...)                    │
│  └── 结构提取 (节点/边/流/语义分组)                               │
├─────────────────────────────────────────────────────────────┤
│  样式系统层                                                     │
│  ├── 7种风格指南 (references/style-N.md)                      │
│  ├── 颜色令牌 (CSS变量式设计)                                   │
│  └── SVG模板 (渐变/滤镜/标记)                                   │
├─────────────────────────────────────────────────────────────┤
│  形状词汇层                                                     │
│  ├── 语义形状映射 (数据库→圆柱、Agent→六边形)                    │
│  ├── 产品图标库 (40+品牌色彩)                                   │
│  └── 箭头语义系统 (颜色+虚线=含义)                               │
├─────────────────────────────────────────────────────────────┤
│  输出层                                                        │
│  ├── SVG生成 (Python list方法防截断)                           │
│  ├── rsvg-convert PNG导出 (1920px Retina)                     │
│  └── 验证脚本 (语法/布局/碰撞检测)                              │
└─────────────────────────────────────────────────────────────┘

核心文件结构

                fireworks-tech-graph/
├── SKILL.md                      # 主技能文件 - 图谱类型/布局规则/形状词汇
├── README.md / README.zh.md      # 中英文文档
├── references/
│   ├── style-1-flat-icon.md     # Flat Icon风格指南
│   ├── style-2-dark-terminal.md # Dark Terminal风格指南
│   ├── style-3-blueprint.md      # Blueprint风格指南
│   ├── style-4-notion-clean.md   # Notion Clean风格指南
│   ├── style-5-glassmorphism.md  # Glassmorphism风格指南
│   ├── style-6-claude-official.md # Claude官方风格
│   ├── style-7-openai.md         # OpenAI官方风格
│   └── icons.md                  # 40+产品图标+语义形状
├── agents/                       # Agent元数据
├── fixtures/                     # 回归测试样本
├── scripts/
│   ├── generate-diagram.sh       # SVG验证+PNG导出
│   ├── generate-from-template.py # 模板SVG生成器
│   ├── validate-svg.sh           # SVG语法验证
│   └── test-all-styles.sh        # 全风格批量测试
├── templates/                    # SVG模板
└── assets/samples/              # 展示样本
            

💡 核心特性与实现机制

1. 语义形状词汇系统 (Shape Vocabulary)

形状编码语义含义，一致性贯穿所有风格：

概念	形状	视觉信号
User/Human	圆形+身体路径	人形图标
LLM/Model	圆角矩形+双边框	智能=双边框
Agent/Orchestrator	六边形	活跃控制器
Memory (短时)	虚线边框矩形	短暂=虚线
Memory (长时)	圆柱体	持久=实体
Vector Store	带内环圆柱体	向量=内部网格
Graph DB	三圆重叠	图结构
Tool/Function	齿轮矩形	功能=齿轮
Decision	菱形	决策点

2. 箭头语义系统 (Arrow Semantics)

颜色+虚线=含义编码规范：

流类型	颜色	虚线	含义
主要数据流	蓝色 #2563eb	无	主请求/响应
控制/触发	橙色 #ea580c	无	系统A触发B
内存读取	绿色 #059669	无	从存储检索
内存写入	绿色 #059669	5,3	写入/存储操作
异步/事件	灰色 #6b7280	4,2	非阻塞事件驱动
反馈/循环	紫色 #7c3aed	曲线	迭代推理

3. 七种视觉风格系统

🎨 Style 1: Flat Icon

背景: 白色 #ffffff
字体: Helvetica Neue
适用: 博客、文档、演示

🖥️ Style 2: Dark Terminal

背景: 近黑 #0f0f1a
字体: SF Mono / Fira Code
适用: GitHub README

📐 Style 3: Blueprint

背景: 深蓝 #0a1628
字体: Courier New
适用: 架构文档、工程图

📝 Style 4: Notion Clean

背景: 白色，最小化
字体: system-ui
适用: Notion、Wiki

✨ Style 5: Glassmorphism

背景: 深色渐变
特点: 毛玻璃卡片
适用: 产品网站、Keynote

🤖 Style 6: Claude Official

背景: 暖奶油色 #f8f6f3
品牌: Anthropic风格
适用: Claude项目文档

4. AI/Agent领域内置模式

                # RAG Pipeline
Query → Embed → VectorSearch → Retrieve → Augment → LLM → Response

# Agentic RAG
Query → Embed → VectorSearch → [Agent Loop + Tool Use] → LLM → Response

# Mem0 Memory Layer
Input → Memory Manager → [Write: VectorDB + GraphDB] / [Read: Retrieve+Rank] → Context

# Agent Memory Types
Sensory → Working → Episodic → Semantic → Procedural

# Multi-Agent
Orchestrator → [SubAgent A / SubAgent B / SubAgent C] → Aggregator → Output

# Tool Call Flow
LLM → Tool Selector → Tool Execution → Result Parser → LLM (loop)
            

5. SVG生成技术要点

⚠️ Python List方法 (防截断)

项目要求必须使用Python List方法生成SVG，防止大文本截断和语法错误：

                python3 << 'EOF'
lines = []
lines.append('')
lines.append('  ')
# 每行独立添加
lines.append('  ')
# ...
with open('output.svg', 'w') as f:
    f.write('\n'.join(lines))
EOF
            

✅ 验证检查清单

箭头-组件碰撞: 箭头不得穿过组件内部
文本溢出: 文本必须适配形状 (text.length × 7px ≤ shape_width - 16px)
箭头-文本对齐: 箭头端点必须连接到形状边缘，标签必须有背景矩形
线交叉: 使用跳弧(jump-over arcs)处理不可避免的交叉

🔍 关键洞察

1. 技术图谱的构建方法

核心洞察: fireworks-tech-graph本质上是一个结构化知识图谱→可视化图谱的转换引擎：

自然语言描述
    ↓ [LLM语义理解]
结构化数据 (节点、边、层次)
    ↓ [形状词汇映射]
语义化SVG元素 (形状+颜色+连接)
    ↓ [风格系统应用]
出版级技术图谱

可借鉴点:

语义形状编码: 将抽象概念映射到具体视觉符号
模式库内置: 预置AI/Agent领域常见模式，降低用户认知负担
风格与内容分离: 样式系统独立于内容结构，便于扩展

2. 知识表示与存储方案

当前方案: Markdown参考文件存储风格指南和形状模板

可改进方向:

结构化存储: 将形状词汇、箭头语义、布局规则存入JSON/YAML
知识图谱化: 节点=形状类型，边=组合关系，属性=视觉参数
可查询性: 支持"哪些形状适合表示时间序列数据？"等查询

3. 检索与推理机制

当前机制: LLM直接理解用户描述并映射到内部知识

可增强方向:

显式检索: 用户查询→知识库检索→最匹配形状/模式
推理链: Complex Query→分解→子图谱→组合→完整图谱
学习反馈: 用户修正→更新形状映射库

4. 可视化方案

核心方案: SVG + rsvg-convert PNG导出

技术优势:

矢量无损: SVG适合编辑，PNG适合嵌入
Retina支持: 1920px 2x分辨率
跨平台兼容: SVG是W3C标准

🔗 与一人公司SOP的关联价值

直接可借鉴技术

可借鉴项	应用场景	实现方式
语义形状词汇	技能节点、知识概念可视化	复用形状映射表
风格系统设计	知识库视觉一致性	提取风格指南
箭头语义编码	流程/关系/依赖表示	颜色+虚线规范
AI领域模式库	预置Agent/RAG模式	复用内置模式
Python List生成法	大型SVG/JSON生成	防截断技巧

设计模式融合

🎯 技能图谱可视化

融合方案: 将一人公司SOP的8个Phase技能图谱可视化

Phase节点 = 语义形状 (六边形=主动技能，矩形=知识节点)
依赖边 = 箭头语义 (Prerequisite=蓝色实线, Transfer=紫色虚线)
风格选择 = 根据场景 (内部文档=Notion Clean, 对外展示=Claude Official)

关键启发

1️⃣ 知识→可视化转换管道

fireworks-tech-graph示范了如何将抽象知识结构转换为直观可视化

2️⃣ 语义层设计

形状和颜色编码语义，而非仅装饰性使用

3️⃣ 领域知识内置

预置AI/Agent模式，降低用户门槛

4️⃣ 质量验证闭环

语法验证→视觉自检→迭代优化

📦 可复用模块

1. 形状词汇表 (Shape Vocabulary)

                # 可直接复用的形状定义
shapes:
  user: { type: "circle+path", category: "human" }
  llm: { type: "rounded-rect", style: "double-border", signal: "intelligent" }
  agent: { type: "hexagon", category: "controller" }
  memory_short: { type: "rect", style: "dashed-border" }
  memory_long: { type: "cylinder", category: "persistent" }
  vector_store: { type: "cylinder", style: "inner-rings" }
  graph_db: { type: "circle-cluster", count: 3 }
  tool: { type: "rect", style: "gear-icon" }
  decision: { type: "diamond" }
            

2. 箭头语义表 (Arrow Semantics)

                # 可直接复用的箭头定义
arrows:
  primary_flow:
    color: "#2563eb"
    stroke: 2
    dash: "none"
    meaning: "main-request-response"
  control_trigger:
    color: "#ea580c"
    stroke: 1.5
    dash: "none"
    meaning: "system-trigger"
  memory_read:
    color: "#059669"
    stroke: 1.5
    dash: "none"
    meaning: "retrieval"
  memory_write:
    color: "#059669"
    stroke: 1.5
    dash: "5,3"
    meaning: "write-store"
  async_event:
    color: "#6b7280"
    stroke: 1.5
    dash: "4,2"
    meaning: "non-blocking"
  feedback_loop:
    color: "#7c3aed"
    stroke: 1.5
    dash: "curved"
    meaning: "iterative-reasoning"
            

3. 产品图标库 (Product Icons)

类别	产品	颜色
AI/ML	OpenAI	#10A37F
	Anthropic/Claude	#D97757
	Google Gemini	#4285F4
	Hugging Face	#FFD21E
向量数据库	Pinecone	#1C1C2E
	Weaviate	#FA0050
	Qdrant	#DC244C
	Chroma	#FF6B35
数据库	PostgreSQL	#336791
	MongoDB	#47A248
	Redis	#DC382D

📚 学习总结

核心收获

🎯 语义可视化思维

将抽象知识结构通过语义化的形状和颜色编码，实现"所见即所知"的可视化效果

🔀 风格与内容分离设计

7种风格系统证明了"内容结构+视觉样式"分离架构的可行性

📚 领域知识内置策略

预置RAG/Agent/Mem0等AI领域模式，降低用户门槛，提升输出质量

✅ 质量验证闭环

SVG语法验证→PNG导出→视觉自检→迭代优化，确保生产级输出质量

应用计划

应用方向	具体行动	优先级
知识库图谱可视化	将一人公司SOP技能图谱用fireworks方法可视化	🔴 高
形状词汇复用	提取shape vocabulary用于知识节点表示	🔴 高
风格系统融合	开发"知识库风格"适配现有HTML模板	🟡 中
AI模式库扩展	补充MCP/A2A等新协议的领域模式	🟡 中

待深入研究

SVG渲染优化: 如何在大规模节点图谱中保持性能
交互式图谱: 从静态SVG扩展到可交互的图谱系统
图谱查询语言: 设计类似Cypher的知识图谱查询接口

🎨 fireworks-tech-graph 深度学习笔记

📋 项目基本信息

🔥 一句话定位

🎯 核心功能与差异化

与竞品对比

核心功能矩阵

🎨 7种视觉风格

📊 14种UML图支持

🤖 AI领域知识

📐 语义形状词汇

📤 PNG高清导出

✅ 质量验证闭环

🛠 技术栈与架构设计

核心文件结构

💡 核心特性与实现机制

1. 语义形状词汇系统 (Shape Vocabulary)

2. 箭头语义系统 (Arrow Semantics)

3. 七种视觉风格系统

🎨 Style 1: Flat Icon

🖥️ Style 2: Dark Terminal

📐 Style 3: Blueprint

📝 Style 4: Notion Clean

✨ Style 5: Glassmorphism

🤖 Style 6: Claude Official

4. AI/Agent领域内置模式

5. SVG生成技术要点

⚠️ Python List方法 (防截断)

✅ 验证检查清单

🔍 关键洞察

1. 技术图谱的构建方法

2. 知识表示与存储方案

3. 检索与推理机制

4. 可视化方案

🔗 与一人公司SOP的关联价值

直接可借鉴技术

设计模式融合

🎯 技能图谱可视化

关键启发

1️⃣ 知识→可视化转换管道

2️⃣ 语义层设计

3️⃣ 领域知识内置

4️⃣ 质量验证闭环

📦 可复用模块

1. 形状词汇表 (Shape Vocabulary)

2. 箭头语义表 (Arrow Semantics)

3. 产品图标库 (Product Icons)

📚 学习总结

核心收获

🎯 语义可视化思维

🔀 风格与内容分离设计

📚 领域知识内置策略

✅ 质量验证闭环

应用计划

待深入研究