OpenClaw

excalidraw-canvas

Create Excalidraw diagrams and render them as PNG images. Use whenever you need to draw, explain complex workflows, visualize UIs/wireframes, or diagram anything.

0xartex0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install 0xartex/excalidraw-canvas

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

Excalidraw Canvas

Render diagrams or any drawings as PNG via a hosted API. Always double-check coordinates of elements or arrows.

Render

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": [...]}')

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

# Get edit URL
echo "$RESULT" | python3 -c "import json,sys; print(json.load(sys.stdin)['editUrl'])"

Response: {"success": true, "png": "<base64>", "editUrl": "https://..../canvas/render-xxxxx"}

Always returns both the PNG image and an edit URL where your owner can modify the diagram in a full Excalidraw editor.

Element Types

All available types: rectangle, ellipse, diamond, text, arrow, line, freedraw

Shapes (rectangle, ellipse, diamond)

{"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?"}

x, y — position
width, height — size
bg — any hex fill color
stroke — border color (default #1e1e1e)
label — text centered inside the shape

Text

{"type":"text","x":100,"y":50,"text":"Title","fontSize":28}

Arrows & Lines

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

Points are relative to x,y. Horizontal: [[0,0],[150,0]], vertical: [[0,0],[0,100]], bent: [[0,0],[0,50],[100,50]].

Freedraw

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

Freehand path — array of [x,y] points relative to position.

Full Example

RESULT=$(curl -s -m 60 -X POST https://exca...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/0xartex/excalidraw-canvas
Version: —
Commit: 11e97352dda1dd1f41da712365526ece7e6d2ff2
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# Excalidraw Canvas

Render diagrams or any drawings as PNG via a hosted API. Always double-check coordinates of elements or arrows.

## Render

```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": [...]}')

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

# Get edit URL
echo "$RESULT" | python3 -c "import json,sys; print(json.load(sys.stdin)['editUrl'])"
```

Response: `{"success": true, "png": "<base64>", "editUrl": "https://..../canvas/render-xxxxx"}`

Always returns both the PNG image and an edit URL where your owner can modify the diagram in a full Excalidraw editor.

## Element Types

All available types: `rectangle`, `ellipse`, `diamond`, `text`, `arrow`, `line`, `freedraw`

### Shapes (rectangle, ellipse, diamond)
```json
{"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?"}
```
- `x`, `y` — position
- `width`, `height` — size
- `bg` — any hex fill color
- `stroke` — border color (default `#1e1e1e`)
- `label` — text centered inside the shape

### Text
```json
{"type":"text","x":100,"y":50,"text":"Title","fontSize":28}
```

### Arrows & Lines
```json
{"type":"arrow","x":300,"y":140,"points":[[0,0],[150,0]]}
{"type":"line","x":0,"y":200,"points":[[0,0],[800,0]]}
```
Points are relative to x,y. Horizontal: `[[0,0],[150,0]]`, vertical: `[[0,0],[0,100]]`, bent: `[[0,0],[0,50],[100,50]]`.

### Freedraw
```json
{"type":"freedraw","x":100,"y":100,"points":[[0,0],[5,3],[10,8],[20,15]]}
```
Freehand path — array of [x,y] points relative to position.

## Full Example

```bash
RESULT=$(curl -s -m 60 -X POST https://exca...

搜索