Generate Excalidraw diagrams. Use when creating flowcharts, ER diagrams, sequence diagrams, block diagrams, or any .excalidraw files.
Generate valid Excalidraw diagram files for flowcharts, ER diagrams, sequence diagrams, and block diagrams. Use when users request any visual diagram or when creating `.excalidraw` files.
/plugin marketplace add tenzir/claude-plugins/plugin install excalidraw@tenzirThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/elements/frames.mdreferences/elements/freedraw.mdreferences/elements/images.mdreferences/elements/linear.mdreferences/elements/polygons.mdreferences/elements/shapes.mdreferences/elements/text.mdreferences/styling/colors.mdreferences/styling/fill-stroke.mdreferences/styling/grouping.mdreferences/styling/positioning.mdGenerate valid .excalidraw JSON files.
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [],
"appState": {
"viewBackgroundColor": "#ffffff"
},
"files": {}
}
| Field | Type | Description |
|---|---|---|
type | string | Always "excalidraw" |
version | number | Schema version (currently 2) |
source | string | Origin URL |
elements | array | All diagram elements |
appState | object | Canvas settings (background, etc.) |
files | object | Binary files keyed by fileId (images) |
Before writing a diagram, verify:
startBinding and endBinding setx,y sits at the source shape's edge, not floating in spaceboundElements (bidirectional)containerId pointing to their containerboundElements referencing their textgroupIds (not containerId)boundElements must be nullcontainerId, textAlign: "center", verticalAlign: "middle"Load references progressively based on need:
| Reference | Load When |
|---|---|
| shapes.md | Using rectangles, diamonds, ellipses |
| text.md | Adding labels, fonts, text styling |
| linear.md | Creating arrows, lines, bindings |
| freedraw.md | Hand-drawn paths |
| images.md | Embedding images |
| frames.md | Slides/artboards for presentations |
| polygons.md | Custom polygon shapes |
| Reference | Load When |
|---|---|
| fill-stroke.md | Fill patterns, strokes |
| colors.md | Color palette selection |
| positioning.md | Layout, alignment, spacing |
| grouping.md | Groups, z-ordering |
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.