用途
本技能指导 Agent 生成标准的 Excalidraw 图表文件（.excalidraw JSON），可在浏览器、Obsidian、VSCode 等集成了 Excalidraw 的环境中直接打开和继续编辑。适用于用户希望生成手绘风的系统架构图、模块依赖图、业务流程图、数据流图，或提到「画个架构图」「画流程图」「画模块关系图」「用 Excalidraw 画图」等需求，以及用户已有较清晰的模块、步骤或实体列表，希望整理成一张结构化示意图的场景。
支持的图类型
- 系统架构图：用户 / 前端 / 后端服务 / 数据库 / 外部系统等。
- 业务流程图 / 近似时序图：按照步骤或事件顺序，自上而下或自左向右。
- 数据结构 / 模块依赖图：实体之间的关联、依赖关系。
- 自由白板草图：对论文结构、研究框架、任务分解等进行发散式可视化。
输入格式
技能会引导用户尽量按以下结构提供信息（中文即可）：
- 【图类型】：系统架构图 / 流程图 / 数据结构图 / 自由草图
- 【内容来源】：自由描述 / 论文大纲 / 代码结构 / 接口列表 等
- 【核心要素】：节点（列出主要模块 / 实体 / 步骤，可分组）；关系（说明谁连接谁、方向与含义，如「用户 -> Web 前端」「服务 A 调用 服务 B」）
- 【布局偏好】：自上而下 / 自左向右 / 分层布局（可选）
- 【分组逻辑】：按子系统、按层次（前端/后端/存储等，可选）
- 【颜色规则】：不同类型节点的颜色偏好（可选，若未指定则使用默认配色）
若用户只给出自然语言描述，Agent 需先整理出「节点列表 + 关系列表」，再进行画图。
生成规则
Agent 内部步骤包括：
- 解析输入，构建抽象模型：抽取所有节点（为每个模块/实体/步骤分配唯一 id、名称与类型）；抽取所有关系（source、target、可选 label）；确定层次信息（根据图类型与布局偏好，将节点归入不同层，如「用户层 / 前端层 / 服务层 / 数据层」）。
- 简单布局策略（坐标分配）：不追求复杂自动排版，只需给出合理、可读的初始位置。系统架构图自上而下三层或多层排列，同层节点在一条水平线上；流程图按步骤顺序纵向或横向排列，用箭头串联；数据结构图以核心实体为中心，相关实体围绕，保持连线不明显交叉。粗略设定 x, y 坐标，例如同层 y 固定、x 按索引递增，不同层 y 按层级间距递增。
Excalidraw 元素生成约定
节点元素（默认样式）：使用 rectangle 或 round rectangle 表示模块/实体/步骤；每个节点由一个图形元素 + 一个文本元素组成（文本大致居中叠加在矩形上）。
默认配色约定（若用户未特别指定）：
- 输入 / 输出：白底黑框（backgroundColor: "transparent"，strokeColor: "#1e1e1e"）。
- 计算模块 / 中间层（如 Encoder / Decoder / FFN 等）：浅色背景 + 黑色描边（例如 backgroundColor: "#f5f5ff" 或类似），同一类模块颜色一致。
- 分组大框（如「Encoder Stack」「Decoder Stack」）：圆角矩形、白底黑框，用文本在框内顶部标注标题。
- 可使用 groupIds 将同一子系统下的节点分到同一分组，方便用户后续整体移动。
连线元素（默认箭头）：使用 arrow 连接相关节点，points 按起点到终点直线或略带折线；默认方向从「数据流/调用发起方」指向「接收方」，例如输入 → 嵌入 → Encoder → Decoder → 输出；核心主流程使用较粗黑色箭头（strokeWidth 稍大），辅助关系可以用细线或浅色；如有必要，可增加短文本元素标注连线含义（如「调用」「写入」「Attention」等）。
整体风格：依赖 Excalidraw 的手绘渲染风格，不需要手动模拟抖动；控制元素数量，优先保持结构清晰而非堆满细节；对于类似 Transformer 这类结构，推荐只画出主要块和主干箭头。
Excalidraw 文件结构要求
顶层应符合 Excalidraw 官方 .excalidraw JSON 结构，至少包含：
- type: "excalidraw"
- version 与 source（可标注为 "cursor-skill-excalidraw-diagram"）
- elements: 图元数组
- appState 与 files（若无图片等，可给出合理的默认空结构）
所有元素 id 必须唯一，推荐使用简单的前缀 + 递增数字或 UUID 风格字符串。
输出格式
Agent 输出必须严格分为两部分：
- Part 1 [Diagram Explanation]：用中文简要说明本图的层次结构、各类节点的含义以及主要连线关系（约 1–2 段）。若对用户输入有合理补充或抽象，也在此处说明，方便用户校对。
- Part 2 [Excalidraw JSON]：输出一个完整、可直接保存为 .excalidraw 文件的 JSON。仅输出 JSON 内容本身，不添加注释、Markdown 代码块标记或额外说明文字。确保 JSON 语法正确、无多余逗号，能被 Excalidraw 正常解析。
注意事项
- 若用户未指定图类型或布局偏好，优先按照「自上而下、多层结构」生成，保持直观清晰。
- 若节点过多或关系复杂，应主动做聚合与分组（例如将多个内部模块归为一个「子系统」节点），避免图面过于拥挤。
- 若用户希望后续在 Draw.io 中使用，可提示其：Excalidraw 导出的 SVG/PNG 可再导入 Draw.io，但本技能专注于生成 Excalidraw 原生文件。
- 若用户只是想「手绘草稿」而不在乎结构严谨，可适度放宽布局与分组，只需保证元素不完全重叠即可。
参考资源
- Excalidraw 官方仓库：https://github.com/excalidraw/excalidraw
- 在线应用示例：https://excalidraw.com/