Menu
创建和编辑 Excalidraw 技术示意图。当用户要求创建流程图、架构图、序列图、数据流图、思维导图或任何 .excalidraw 格式的可视化图表时使用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | excalidraw |
| description | 创建和编辑 Excalidraw 技术示意图。当用户要求创建流程图、架构图、序列图、数据流图、思维导图或任何 .excalidraw 格式的可视化图表时使用。 |
生成手绘风格的技术示意图，输出 Excalidraw JSON 格式（.excalidraw 文件）。
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [],
"appState": {
"viewBackgroundColor": "#ffffff",
"gridSize": null
},
"files": {}
}
index（order key）字段invalid order key: xx。index 字段。index；如果出现 order key 错误，优先移除全文件元素的 index 字段后再保存。fontFamily 默认必须为 5（ExcalFont）。只有用户明确要求其他字体时，才可使用 1/2/3。每个元素必须包含以下完整属性：
{
"id": "unique-id",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 100,
"height": 100,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"seed": 12345,
"version": 1,
"versionNonce": 12345,
"isDeleted": false,
"groupIds": [],
"boundElements": null,
"link": null,
"locked": false
}
| 类型 | 用途 |
|---|---|
rectangle | 组件、模块、容器、流程框 |
ellipse | 状态节点、开始/结束点、数据对象 |
diamond | 条件判断、分支逻辑、决策节点 |
text | 标注说明、代码片段 |
arrow | 数据流向、调用关系 |
line | 连接线（无箭头）、生命线 |
freedraw | 手绘路径 |
frame | 分组/框架元素 |
| 颜色系 | 边框色 | 背景色 | 语义 |
|---|---|---|---|
| 紫色系 | #7c3aed | #faf5ff | 核心概念、架构组件 |
| 绿色系 | #059669 | #ecfdf5 | 成功状态、正向流程、调度器 |
| 蓝色系 | #0ea5e9 | #f0f9ff | 数据容器、任务队列 |
| 青色系 | #0891b2 | #f0fdff | 次要元素、辅助功能 |
| 橙色系 | #ea580c | #fff7ed | 执行阶段、动作操作 |
| 红色系 | #dc2626 | #fef2f2 | 重要提示、优先级 |
| 黄色系 | #ca8a04 | #fefce8 | 特殊处理、工作循环 |
| 靛蓝系 | #6366f1 | #f5f3ff | 任务项、组件单元 |
#374151（gray-700）strokeWidth: 2{
"type": "text",
"text": "内容",
"fontSize": 20,
"fontFamily": 5,
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "内容",
"autoResize": true,
"lineHeight": 1.25
}
| 属性 | 值 |
|---|---|
fontFamily | 5 ExcalFont（默认且优先），2 Helvetica（仅用户明确要求专业排版），3 Cascadia（仅代码标注且用户明确要求），1 Virgil（仅用户明确要求休闲风） |
fontSize | 标题 28-36，节标题 24，标签 20，描述 16，注释 14 |
textAlign | "left", "center", "right" |
verticalAlign | "top", "middle" |
{
"type": "arrow",
"points": [[0, 0], [200, 0]],
"startArrowhead": null,
"endArrowhead": "arrow",
"startBinding": { "elementId": "rect-1", "focus": 0, "gap": 5 },
"endBinding": { "elementId": "rect-2", "focus": 0, "gap": 5 }
}
points 第一个点始终为 [0, 0]，后续点相对于元素 x/ywidth/height 必须匹配 points 的边界框null, "arrow", "bar", "dot", "triangle"boundElements 中声明形状绑定文本： 形状元素的 boundElements 需包含文本元素ID，文本元素的 containerId 需指向形状元素ID。
{
"id": "rect-1",
"boundElements": [{ "id": "text-1", "type": "text" }]
}
{
"id": "text-1",
"containerId": "rect-1"
}
形状绑定箭头： 形状元素的 boundElements 需包含箭头元素ID，箭头元素的 startBinding 或 endBinding 需指向形状元素ID。
{
"id": "rect-1",
"boundElements": [{ "id": "arrow-1", "type": "arrow" }]
}
{
"id": "arrow-1",
"startBinding": { "elementId": "rect-1", "focus": 0, "gap": 5 }
}
| 属性 | 值 |
|---|---|
fillStyle | "solid", "hachure", "cross-hatch" |
strokeWidth | 1（细），2（中），4（粗） |
strokeStyle | "solid", "dashed", "dotted" |
roughness | 0（精确），1（微手绘），2（草图） |
roundness | { "type": 3 } 圆角，null 直角 |
| 类型 | 关键形状 | 流向 |
|---|---|---|
| 流程图 | rectangle + diamond | 上→下 |
| 序列图 | rectangle + line(dashed) + arrow | 左→右时间 |
| 架构图 | rectangle 分层 | 上→下 |
| 思维导图 | ellipse + line | 中心→外 |
| 数据流图 | ellipse + rectangle + arrow | 各种 |
| ERD | rectangle + line | 无固定 |
id 和 seed 必须全局唯一rect-、text-、arrow-、diamond-fontFamily: 5；未收到明确字体要求时，不要切换到 1/2/3index 字段（避免 invalid order key）arrow/line 的 points 第一个点必须是 [0, 0]，并保持 width/height 与 points 边界一致docs/public/diagrams/ 目录，按模块分类在输出 .excalidraw 前，至少检查：
id 唯一。index 字段。arrow/line 元素 points[0] === [0,0]。text 元素默认 fontFamily === 5（除非用户明确指定其他字体）。frameId（若存在）都指向有效 frame。若用户反馈 invalid order key：
index 字段。