<< All versions
Skill v1.0.1
currentAutomated scan100/100xstongxue/best-skills/excalidraw-diagram
1 files
──Details
PublishedMay 18, 2026 at 07:00 AM
Content Hashsha256:0eda7a8ef93fd305...
Git SHA09de13dcc271
Bump Typepatch
──Files
Files (1 file, 6.5 KB)
SKILL.md6.5 KBactive
SKILL.md · 106 lines · 6.5 KB
version: "1.0.1" name: excalidraw-diagram description: 基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。
Excalidraw 手绘图
本 Skill 指导 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 官方
.excalidrawJSON 结构,至少包含: 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,但本 Skill 专注于生成 Excalidraw 原生文件。
- 若用户只是想「手绘草稿」而不在乎结构严谨,可适度放宽布局与分组,只需保证元素不完全重叠即可。
参考资源
- Excalidraw 官方仓库:
https://github.com/excalidraw/excalidraw - 在线应用示例:
https://excalidraw.com/