Excalidraw 手绘图表
手绘风格 Excalidraw JSON 图表(架构图、流程图、序列图)。
通过编写标准 Excalidraw 元素 JSON 并保存为 .excalidraw 文件来创建图表。这些文件可以拖放到 excalidraw.com 进行查看和编辑。
工作流程
- 编写元素 JSON—Excalidraw 元素对象数组
- 保存文件使用
write_file创建.excalidraw文件 - 可选上传获取可分享链接
保存图表
{
"type": "excalidraw",
"version": 2,
"elements": [ ...你的元素数组... ],
"appState": { "viewBackgroundColor": "#ffffff" }
}
元素格式参考
矩形
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }
带标签形状(容器绑定)
{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
"boundElements": [{ "id": "t_r1", "type": "text" }] },
{ "type": "text", "id": "t_r1", "x": 105, "y": 110, "text": "Hello",
"containerId": "r1", "fontSize": 20, "fontFamily": 1 }
箭头
{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
"points": [[0,0],[200,0]], "endArrowhead": "arrow" }
箭头绑定
{
"type": "arrow", "id": "a1",
"startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
"endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] }
}
调色板
| 用途 | 填充颜色 | 十六进制 |
|---|---|---|
| 主要/输入 | 浅蓝 | #a5d8ff |
| 成功/输出 | 浅绿 | #b2f2bb |
| 警告/外部 | 浅橙 | #ffd8a8 |
| 处理/特殊 | 浅紫 | #d0bfff |
| 错误/关键 | 浅红 | #ffc9c9 |
尺寸指南
- 最低
fontSize:16 用于正文 - 最低
fontSize:20 用于标题 - 最低形状大小:带标签矩形 120x60
安装指南
复制下方命令,在终端运行即可安装:
# 安装到当前项目
npx skills add excalidraw
# 全局安装 — 所有项目可用
npx skills add excalidraw -g
使用指南
安装完成后,在对话框中直接使用此技能。