Create and edit Excalidraw diagrams programmatically. Use when the user asks to create diagrams, flowcharts, architecture diagrams, wireframes, or any visual drawings in Excalidraw format (.excalidraw files).
From design-toolsnpx claudepluginhub nickloveinvesting/nick-love-plugins --plugin design-toolsThis skill uses the workspace's default tool permissions.
best-practices.mddiagram-patterns.mdelement-reference.mdexamples.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
This skill enables you to create beautiful, hand-drawn style diagrams in the Excalidraw JSON format.
Excalidraw files (.excalidraw) are JSON with this structure:
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [],
"appState": {
"viewBackgroundColor": "#ffffff",
"gridSize": null
},
"files": {}
}
Every element needs at minimum: type, id, x, y, and styling properties.
{
"type": "rectangle",
"id": "rect-1",
"x": 100,
"y": 100,
"width": 200,
"height": 100,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"seed": 1234,
"version": 1,
"versionNonce": 1234,
"isDeleted": false,
"groupIds": [],
"boundElements": null,
"link": null,
"locked": false,
"roundness": { "type": 3 }
}
{
"type": "text",
"id": "text-1",
"x": 120,
"y": 130,
"width": 160,
"height": 25,
"text": "Hello World",
"fontSize": 20,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"seed": 5678,
"version": 1,
"versionNonce": 5678,
"isDeleted": false,
"groupIds": [],
"boundElements": null,
"link": null,
"locked": false,
"containerId": null,
"originalText": "Hello World",
"autoResize": true,
"lineHeight": 1.25
}
{
"type": "arrow",
"id": "arrow-1",
"x": 300,
"y": 150,
"width": 100,
"height": 0,
"points": [[0, 0], [100, 0]],
"startArrowhead": null,
"endArrowhead": "arrow",
"startBinding": null,
"endBinding": null,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"seed": 9012,
"version": 1,
"versionNonce": 9012,
"isDeleted": false,
"groupIds": [],
"boundElements": null,
"link": null,
"locked": false
}
| Type | Use For |
|---|---|
rectangle | Boxes, containers, cards |
ellipse | Circles, ovals, nodes |
diamond | Decision points, conditions |
text | Labels, descriptions |
arrow | Connections, flow direction |
line | Connectors without arrowheads |
freedraw | Hand-drawn paths |
image | Embedded images |
frame | Grouping/framing elements |
#a5d8ff - Light blue#b2f2bb - Light green#ffec99 - Light yellow#ffc9c9 - Light red/pink#e9ecef - Light gray#d0bfff - Light purple#99e9f2 - Light cyan#1e1e1e - Default black#1971c2 - Blue#2f9e44 - Green#f08c00 - Orange#e03131 - Red#9c36b5 - Purple| Property | Values | Description |
|---|---|---|
fillStyle | "solid", "hachure", "cross-hatch" | Fill pattern |
strokeWidth | 1, 2, 4 | Line thickness |
strokeStyle | "solid", "dashed", "dotted" | Line style |
roughness | 0, 1, 2 | Hand-drawn feel (0=smooth, 2=rough) |
opacity | 0-100 | Transparency |
roundness | { "type": 3 } | Rounded corners |
To connect shapes with arrows, use bindings:
{
"type": "arrow",
"id": "arrow-1",
"startBinding": {
"elementId": "rect-1",
"focus": 0,
"gap": 5
},
"endBinding": {
"elementId": "rect-2",
"focus": 0,
"gap": 5
},
"points": [[0, 0], [200, 0]]
}
Also add boundElements to the connected shapes:
{
"type": "rectangle",
"id": "rect-1",
"boundElements": [{ "id": "arrow-1", "type": "arrow" }]
}
| Value | Font |
|---|---|
1 | Hand-drawn (Virgil) |
2 | Normal (Helvetica) |
3 | Code (Cascadia) |
rect-1, arrow-2, text-headerseed for consistent renderinggroupIds arrays| Type | Description |
|---|---|
| Flowcharts | Process flows, algorithms, decision trees |
| Sequence Diagrams | API calls, user interactions, message flows |
| Architecture Diagrams | System design, microservices, infrastructure |
| Mind Maps | Brainstorming, concept mapping, idea organization |
| Data Flow Diagrams | Data movement, system analysis |
| ERD | Database schemas, entity relationships |
| Wireframes | UI mockups, layout sketches |
roughness: 0 for formal/technical diagrams, roughness: 1 for friendly sketchesfontFamily: 2 (Helvetica) for professional look, fontFamily: 1 (Virgil) only when casual look is requested