---
title: "技术图生成"
type: concept
tags: []
sources: [fireworks-tech-graph]
last_updated: 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]]