nexus/wiki/concepts/SVG图表生成.md

title, type, tags, sources, last_updated

title	type	tags	sources	last_updated
SVG图表生成	concept		baoyu-skills	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图表生成