---
title: "SVG图表生成"
type: concept
tags: []
sources: [baoyu-skills]
last_updated: 2026-04-19
---

## Overview

SVG 图表生成是 [[baoyu-diagram]] 技能的核心方法——不调用任何图像生成模型，由 LLM 直接通过手算坐标生成 SVG 代码，一次确认后批量输出多张图表，内嵌深色模式样式。

## Five Chart Types

| 类型 | 适用场景 | 触发动词 |
| --- | --- | --- |
| `flowchart` | 按顺序走一遍流程 | 流程、步骤、工作流、生命周期、状态机 |
| `sequence` | 谁和谁通信、按什么顺序 | 协议、握手、认证流程、OAuth、TCP |
| `structural` | 展示什么包含什么、如何组织 | 架构、组件、拓扑、布局 |
| `illustrative` | 建立直觉——画出机制本身 | 怎么工作、原理、为什么、直观解释 |
| `class` | 类型是什么、它们如何关联 | 类图、UML、继承、接口、数据模型 |

## Technical Approach

**无图像生成模型**：LLM 直接手算 SVG 坐标生成矢量代码，确保每个图表符合统一设计规范。

**内嵌样式**：
- `<style>` 块包含 `@media (prefers-color-scheme: dark)` 深色模式覆盖
- 同一个 SVG 文件在浅色和深色模式下均正确渲染
- 自包含，无需外部依赖

**输出格式**：
- `.svg` 文件，可直接嵌入任意支持 SVG 的宿主环境
- 可指定 `--out` 输出路径生成单张图表

## Design Constraints

- 统一设计规范（字体、颜色、线宽、间距等）
- 语义形状词汇表（如需引用其他文档中的形状规范）
- 语义箭头系统（颜色+虚线编码含义）

## Connections
- [[baoyu-diagram]] ← implements ← SVG图表生成
- [[baoyu-skills]] ← 包含 ← SVG图表生成