nexus/wiki/concepts/技术图生成.md

title, type, tags, sources, last_updated

title	type	tags	sources	last_updated
技术图生成	concept		fireworks-tech-graph	2026-04-18

Description

用自然语言描述系统架构、流程或关系，自动生成可直接发布的 SVG/PNG 技术图的过程。核心技术栈包括 LLM 生成 SVG 代码 + 渲染工具导出 PNG。

核心流程

1. 自然语言描述 → 用户用文字描述想要的图（架构/流程/对比/思维导图等）
2. LLM 解析 + SVG 生成 → AI 理解描述，生成符合形状词汇表和箭头语义的 SVG 代码
3. 渲染导出 → rsvg-convert 将 SVG 渲染为 1920px PNG
4. 发布 → PNG 直接嵌入文章/Slide/文档

关键工具

• fireworks-tech-graph：Claude Code Skill，内置 7 种风格 + 14 种 UML 图
• rsvg-convert：SVG → PNG 渲染工具
• 7种视觉风格系统：确保图形风格一致性
• 语义形状词汇表：确保图形元素语义一致性
• 语义箭头系统：确保箭头语义一致性
• 14种UML图：覆盖完整 UML 图类型

应用场景

• 技术文档：RAG 架构图、Agent 流程图、系统架构图
• 博客文章：配图生成，提升文章可读性
• 演示文稿：Keynote/Slide 配图，支持多种视觉风格
• 内部 Wiki：知识图谱、流程说明
• GitHub README：项目架构图、流程图

优势

• 速度：几秒生成，无需手动绘图
• 一致性：形状词汇表 + 语义箭头系统确保视觉语义统一
• 可编辑：SVG 输出可随时修改
• 可发布：PNG 可直接嵌入文档

Relationships

• 技术图生成 uses fireworks-tech-graph
• 技术图生成 uses 7种视觉风格系统
• 技术图生成 uses 语义形状词汇表
• 技术图生成 uses 语义箭头系统
• 技术图生成 uses 14种UML图
• 技术图生成 uses rsvg-convert