excalidraw-diagram

1# Excalidraw 手绘图
2 
3本 Skill 指导 Agent 生成**标准的 Excalidraw 图表文件**（`.excalidraw` JSON），在浏览器、Obsidian、VSCode 等集成了 [Excalidraw](https://github.com/excalidraw/excalidraw) 的环境中可直接打开和继续编辑。
4 
5## 使用时机
6 
7- 用户希望生成「手绘风」的系统架构图、模块依赖图、业务流程图、数据流图等。
8- 用户提到「画个架构图」「画流程图」「画模块关系图」「用 Excalidraw 画图」等需求。
9- 用户已有较清晰的模块/步骤/实体列表，希望整理成一张结构化示意图。
10 
11## 支持图类型
12 
13- **系统架构图**：用户 / 前端 / 后端服务 / 数据库 / 外部系统等。
14- **业务流程图 / 近似时序图**：按照步骤或事件顺序，自上而下或自左向右。
15- **数据结构 / 模块依赖图**：实体之间的关联、依赖关系。
16- **自由白板草图**：对论文结构、研究框架、任务分解等进行发散式可视化。
17 
18## 输入格式（在聊天中的推荐写法）
19 
20请引导用户尽量按照如下结构提供信息（中文即可）：
21 
22【图类型】：系统架构图 / 流程图 / 数据结构图 / 自由草图  
23【内容来源】：自由描述 / 论文大纲 / 代码结构 / 接口列表 等  
24【核心要素】：  
25- 节点：列出主要模块 / 实体 / 步骤（可分组）  
26- 关系：说明谁连接谁、方向与含义（如「用户 -> Web 前端」「服务 A 调用 服务 B」）  
27【布局偏好】：自上而下 / 自左向右 / 分层布局（可选）  
28【分组逻辑】：按子系统、按层次（前端/后端/存储等，可选）  
29【颜色规则】：不同类型节点的颜色偏好（可选，若未指定则使用默认配色）
30 
31若用户只给出自然语言描述，Agent 需先在脑中整理出「节点列表 + 关系列表」，再进行画图。
32 
33## 生成规则（Agent 内部步骤）
34 
351. **解析输入，构建抽象模型**  
36   - 抽取所有节点：为每个模块/实体/步骤分配唯一 id、名称与类型。  
37   - 抽取所有关系：source、target、可选 label（调用方式、数据流向等）。  
38   - 确定层次信息：根据图类型与用户的布局偏好，将节点归入不同层（如「用户层 / 前端层 / 服务层 / 数据层」）。
39 
402. **简单布局策略（坐标分配）**  
41   - 不追求复杂自动排版，只需给出「合理、可读」的初始位置：  
42     - 系统架构图：自上而下三层或多层排列，同层节点在一条水平线上。  
43     - 流程图：按步骤顺序纵向或横向排列，用箭头串联。  
44     - 数据结构图：以核心实体为中心，相关实体围绕，保持连线不明显交叉。  
45   - 粗略设定 `x, y` 坐标，例如：同层 y 固定、x 按索引递增；不同层 y 按层级间距递增。
46 
473. **Excalidraw 元素生成约定（含默认箭头与配色）**
48 
49   - **节点元素（默认样式）**：  
50     - 使用 `rectangle` 或 `round rectangle` 表示模块/实体/步骤。  
51     - 每个节点由一个图形元素 + 一个文本元素组成（文本大致居中叠加在矩形上）。  
52     - 默认配色约定（若用户未特别指定）：
53…