Diagram Source

图源与导出说明

本项目的图解需要截图友好、可维护、可绑定交互状态。优先使用手工整理的 SVG,并遵循稳定 id 约定。

推荐流程

从图源到可交互 SVG

Figma / Excalidraw 草图
导出 SVG
SVGO 优化
补 id / data-role

SVG 命名规范

稳定命名让动画和测试更可靠

node-*

概念节点、流程节点、token 节点。

arrow-*

数据流、控制流、影响关系。

label-*

截图和导出时保留的文字标签。

highlight-*

当前步骤、失败状态、解决状态。

可复用图源

下载首批 SVG 源文件

MVP 核心图解

12 张第一版核心图解

截图友好

每张图都应该能单独传播

保持边距、标题、激活状态和简化说明清晰可见。导出或截图前,优先选择能表达一个核心 aha moment 的状态, 避免把多个控件面板、过长解释和复杂参数同时放进画面。