45 lines
1.7 KiB
Markdown
45 lines
1.7 KiB
Markdown
---
|
||
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图表生成
|