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.
About this skill
The 'excalidraw-canvas' skill empowers AI agents to programmatically generate vector-based diagrams using the popular Excalidraw application via a hosted API. Agents can construct detailed visuals by supplying a JSON array of elements, including various shapes (rectangles, ellipses, diamonds), text, arrows, lines, and even freehand drawings. The skill processes this input and returns a base64-encoded PNG image of the diagram, making it immediately viewable, alongside a unique URL to edit the diagram in a full Excalidraw web editor. This capability is invaluable for AI agents that need to communicate complex ideas visually, document processes, or prototype user interfaces. Instead of describing intricate systems or layouts purely through text, an agent can render a clear, concise diagram. This enhances comprehension, reduces ambiguity, and provides a tangible visual asset that can be further refined by a human user through the provided edit URL. Its primary strength lies in its ability to translate abstract instructions into concrete visual representations, offering a powerful tool for visual problem-solving, explanation, and design assistance within AI-driven workflows. The flexibility in element types and properties allows for a wide range of diagramming needs.
Best use case
The primary use case for this skill is to enable AI agents to generate visual diagrams and schematics on demand, transforming textual descriptions into clear graphical representations. This benefits developers, designers, project managers, and anyone collaborating with an AI to conceptualize, explain, or document systems, workflows, or user interfaces more effectively than with text alone. It's particularly useful for quickly mocking up ideas, demonstrating concepts, or visualizing data flows.
Create Excalidraw diagrams and render them as PNG images. Use whenever you need to draw, explain complex workflows, visualize UIs/wireframes, or diagram anything.
A base64-encoded PNG image of the generated Excalidraw diagram, along with an editable web URL to open and modify the diagram in a browser.
Practical example
Example input
Draw a simple login flowchart: Start, then 'Enter Credentials', followed by a 'Decision?' on 'Authenticate', leading to 'Success' or 'Fail'.
Example output
Generated a PNG diagram visualizing the login flowchart. You can view it here: /tmp/diagram.png. Edit this diagram online: https://excalidraw-mcp.up.railway.app/canvas/render-xxxxx
When to use this skill
- When you need to explain complex workflows, processes, or system architectures visually.
- To quickly generate UI wireframes or mockups from a description.
- When a visual diagram is more effective for communication than a textual explanation.
- To create quick visual aids during brainstorming or problem-solving sessions.
When not to use this skill
- For highly artistic illustrations or graphic design tasks requiring advanced tools.
- When an offline diagramming solution is strictly required (it relies on a hosted API).
- If the diagram is extremely simple and a text-based ASCII art representation suffices.
- For direct manipulation of existing local Excalidraw files without an API interaction.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/excalidraw-canvas/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How excalidraw-canvas Compares
| Feature / Agent | excalidraw-canvas | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Create Excalidraw diagrams and render them as PNG images. Use whenever you need to draw, explain complex workflows, visualize UIs/wireframes, or diagram anything.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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://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":"System Design","fontSize":28},
{"type":"rectangle","x":50,"y":80,"width":180,"height":70,"bg":"#a5d8ff","label":"Frontend"},
{"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":"Database"},
{"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'])"
```
## Sending to User
```
message(action="send", filePath="/tmp/diagram.png", caption="✏️ Edit: {editUrl}")
```
Always include the edit URL so the user can tweak the diagram.Related Skills
obsidian-canvas-creator
Create Obsidian Canvas files from text content, supporting both MindMap and freeform layouts. Use this skill when users want to visualize content as an interactive canvas, create mind maps, or organize information spatially in Obsidian format.
excalidraw-diagram
Generate Excalidraw diagrams from text content. Supports three output modes - Obsidian (.md), Standard (.excalidraw), and Animated (.excalidraw with animation order). Triggers on "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram", "标准Excalidraw", "standard excalidraw", "Excalidraw动画", "动画图", "animate".
excalidraw
Generate hand-drawn style diagrams, flowcharts, and architecture diagrams as PNG images from Excalidraw JSON
---
name: article-factory-wechat
humanizer
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
find-skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
tavily-search
Use Tavily API for real-time web search and content extraction. Use when: user needs real-time web search results, research, or current information from the web. Requires Tavily API key.
baidu-search
Search the web using Baidu AI Search Engine (BDSE). Use for live information, documentation, or research topics.
agent-autonomy-kit
Stop waiting for prompts. Keep working.
Meeting Prep
Never walk into a meeting unprepared again. Your agent researches all attendees before calendar events—pulling LinkedIn profiles, recent company news, mutual connections, and conversation starters. Generates a briefing doc with talking points, icebreakers, and context so you show up informed and confident. Triggered automatically before meetings or on-demand. Configure research depth, advance timing, and output format. Walking into meetings blind is amateur hour—missed connections, generic small talk, zero leverage. Use when setting up meeting intelligence, researching specific attendees, generating pre-meeting briefs, or automating your prep workflow.
self-improvement
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.
botlearn-healthcheck
botlearn-healthcheck — BotLearn autonomous health inspector for OpenClaw instances across 5 domains (hardware, config, security, skills, autonomy); triggers on system check, health report, diagnostics, or scheduled heartbeat inspection.