46 lines
1.9 KiB
Markdown
46 lines
1.9 KiB
Markdown
---
|
||
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]]
|