Search

PythonReactSEOPDF
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 source installs☆ 0 Repository stars

Installation

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.

SkillHub CLI

skillhub install 0xartex/excalidraw-canvas

Inspect the source and compatibility requirements, then follow its installation steps.

Give your agent the source link and ask it to inspect instructions and dependencies before explaining the installation steps.

View source ↗Guides

Skill instructions

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 information

Source
github
Repository
openclaw/skills
Path
skills/0xartex/excalidraw-canvas
Version
—
Commit
11e97352dda1dd1f41da712365526ece7e6d2ff2
Classification source
rules
Status
active
Visibility
public

These signals come from indexed source analysis and may lag behind changes. Check the current source files.

Extracted content

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...

Related skills

OpenClaw

13-Day Sprint Method

galizki

Productivity system based on Maya calendar with 13 natural tones for project management and personal development

OpenClaw

1password

daggerkun007

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.