欢迎回来

登录 EAKE AI,继续您的智能之旅

忘记密码?
还没有账号?立即注册

Excalidraw 手绘图表

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

尺寸指南

  • 最低 fontSize16 用于正文
  • 最低 fontSize20 用于标题
  • 最低形状大小:带标签矩形 120x60

安装指南

复制下方命令,在终端运行即可安装:

# 安装到当前项目
npx skills add excalidraw
# 全局安装 — 所有项目可用
npx skills add excalidraw -g

使用指南

安装完成后,在对话框中直接使用此技能。

基本信息
作者 Community 分类 agent 难度 Intermediate 时长 1 hour
🛠️ 安装命令
# 安装到当前项目
npx skills add excalidraw
# 全局安装
npx skills add excalidraw -g

发表评论