This skill should be used when the user needs to create a diagram using Excalidraw — a hand-drawn style whiteboard tool. Use when the user wants a sketch-style architecture diagram, system design, concept map, user flow, or any visual that benefits from the informal, freehand aesthetic of Excalidraw. Outputs an embedded Excalidraw file ready for use in Obsidian or standalone.
This skill creates diagrams using the Excalidraw format — a JSON-based drawing format rendered by the Excalidraw library and its integrations. The output has a distinctive hand-drawn, whiteboard aesthetic that is ideal for architecture sketches, concept maps, brainstorming visuals, and informal system diagrams.
Unlike Mermaid which produces precise, flow-based diagrams from DSL text, Excalidraw uses geometric primitives (rectangles, ellipses, arrows, text, lines) laid out on a freeform canvas. The hand-drawn style makes it suitable for early-stage thinking, workshop facilitation, and documentation where the informal look communicates "this is a sketch, not a specification."
In Obsidian, Excalidraw files are supported via the Excalidraw plugin by Zsolt Viczian, which renders .excalidraw files natively and allows embedding them in notes.
Invoke this skill when:
.excalidraw file or embedded in a Markdown noteDo NOT use this skill when:
mermaid-diagram insteadobsidian-canvas instead| Format | Use Case |
|---|---|
Obsidian embed (.md with JSON) | Embedded in an Obsidian note, edited with the Excalidraw plugin |
Standalone .excalidraw file | Opened directly in Excalidraw app or excalidraw.com |
| Animated SVG | Excalidraw plugin "export animated" feature — for presentations |
Boxes representing services/components connected with labeled arrows. Uses color to group related components (e.g., blue for frontend, green for backend, orange for external).
Central concept with radiating branches. Each branch is a related idea. Uses curved arrows and freeform text nodes.
Horizontal swim lanes for actors. Steps flow left to right. Decision points use diamond shapes.
Four levels: System Context → Container → Component → Code. Each level drawn as nested boxes with arrows for interactions.
Actors as columns, time flowing downward. Message arrows between columns with labels.
From the user's request, determine:
If the user's request is vague ("draw our system"), ask one clarifying question:
Plan the component positions before writing the Excalidraw JSON:
Color guidelines:
#1971c2 / fill #d0ebff) — user-facing or frontend components#2f9e44 / fill #d3f9d8) — backend or processing components#e8590c / fill #ffe8cc) — external systems or third-party services#862e9c / fill #f3d9fa) — data storage or databases#495057 / fill #f1f3f5) — infrastructure or platform componentsExcalidraw diagrams are JSON objects with an elements array. Each element is a shape with position, size, style, and content properties.
Element schema:
{
"type": "rectangle",
"id": "unique-id",
"x": 100,
"y": 200,
"width": 160,
"height": 80,
"strokeColor": "#1971c2",
"backgroundColor": "#d0ebff",
"fillStyle": "hachure",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"text": "Component Name",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle"
}
Shape types:
rectangle — boxes for components and systemsellipse — circles/ovals for actors or rounded shapesdiamond — decision pointsarrow — directed connections between componentsline — undirected connectionstext — standalone labelsArrow element:
{
"type": "arrow",
"id": "arrow-1",
"x": 260,
"y": 240,
"width": 140,
"height": 0,
"points": [[0, 0], [140, 0]],
"startBinding": {"elementId": "source-id", "gap": 5, "focus": 0},
"endBinding": {"elementId": "target-id", "gap": 5, "focus": 0},
"strokeColor": "#343a40",
"strokeWidth": 2,
"roughness": 1
}
Full Excalidraw file structure:
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [...],
"appState": {
"gridSize": null,
"viewBackgroundColor": "#ffffff"
}
}
For standalone .excalidraw file output:
Output the complete JSON block in a fenced code block labeled json. Instruct the user to save it as DiagramName.excalidraw.
For Obsidian embed:
Wrap the JSON in an Obsidian Excalidraw note format — a Markdown file with an excalidraw-plugin: parsed frontmatter and the JSON embedded in a code fence:
---
excalidraw-plugin: parsed