{"type":"rectangle","x":100,"y":100,"width":200,"height":80,"bg":"#a5d8ff","label":"My Box"}
{"type":"ellipse","x":100,"y":100,"width":150,"height":100,"bg":"#b2f2bb","label":"Node"}
{"type":"diamond","x":100,"y":100,"width":140,"height":100,"bg":"#ffec99","label":"Decision?"}

{"type":"arrow","x":300,"y":140,"points":[[0,0],[150,0]]}
{"type":"line","x":0,"y":200,"points":[[0,0],[800,0]]}

{"type":"freedraw","x":100,"y":100,"points":[[0,0],[5,3],[10,8],[20,15]]}

Excalidraw 画布

通过托管的 API 将图表或任何绘图渲染为 PNG 格式。务必仔细检查元素或箭头的坐标。

渲染

bash
RESULT=$(curl -s -m 60 -X POST https://excalidraw-mcp.up.railway.app/api/render \
-H Content-Type: application/json \
-H Accept: application/json \
-d {elements: [...]})

保存 PNG

echo $RESULT | python3 -c import json,sys,base64; d=json.load(sys.stdin); open(/tmp/diagram.png,wb).write(base64.b64decode(d[png]))

获取编辑链接

echo $RESULT | python3 -c import json,sys; print(json.load(sys.stdin)[editUrl])

响应：{success: true, png: , editUrl: https://..../canvas/render-xxxxx}

始终同时返回 PNG 图像和一个编辑链接，所有者可以在完整的 Excalidraw 编辑器中修改图表。

元素类型

所有可用类型：rectangle（矩形）、ellipse（椭圆）、diamond（菱形）、text（文本）、arrow（箭头）、line（线条）、freedraw（自由绘制）

形状（矩形、椭圆、菱形）

json {type:rectangle,x:100,y:100,width:200,height:80,bg:#a5d8ff,label:我的框} {type:ellipse,x:100,y:100,width:150,height:100,bg:#b2f2bb,label:节点} {type:diamond,x:100,y:100,width:140,height:100,bg:#ffec99,label:决策？}

• - x、y — 位置
• width、height — 尺寸
• bg — 任意十六进制填充颜色
• stroke — 边框颜色（默认 #1e1e1e）
• label — 在形状内居中的文本

文本

json {type:text,x:100,y:50,text:标题,fontSize:28}

箭头与线条

json {type:arrow,x:300,y:140,points:[[0,0],[150,0]]} {type:line,x:0,y:200,points:[[0,0],[800,0]]}

点坐标相对于 x、y。水平：[[0,0],[150,0]]，垂直：[[0,0],[0,100]]，折线：[[0,0],[0,50],[100,50]]。

自由绘制

json {type:freedraw,x:100,y:100,points:[[0,0],[5,3],[10,8],[20,15]]}

手绘路径 — 相对于位置的 [x,y] 点数组。

完整示例

bash
RESULT=$(curl -s -m 60 -X POST https://excalidraw-mcp.up.railway.app/api/render \
-H Content-Type: application/json \
-H Accept: application/json \
-d {elements: [
{type:text,x:250,y:20,text:系统设计,fontSize:28},
{type:rectangle,x:50,y:80,width:180,height:70,bg:#a5d8ff,label:前端},
{type:rectangle,x:300,y:80,width:180,height:70,bg:#b2f2bb,label:API},
{type:rectangle,x:550,y:80,width:180,height:70,bg:#ffec99,label:数据库},
{type:arrow,x:230,y:115,points:[[0,0],[70,0]]},
{type:arrow,x:480,y:115,points:[[0,0],[70,0]]}
]})

echo $RESULT | python3 -c import json,sys,base64; d=json.load(sys.stdin); open(/tmp/diagram.png,wb).write(base64.b64decode(d[png])); print(d[editUrl])

发送给用户

message(action=send, filePath=/tmp/diagram.png, caption=✏️ 编辑：{editUrl})

始终包含编辑链接，以便用户可以调整图表。