rnjn/cc-excalidraw-skill/rnjn-excalidraw

Excalidraw Diagram Creation

This skill enables you to create beautiful, hand-drawn style diagrams in the Excalidraw JSON format.

File Format Overview

Excalidraw files (.excalidraw) are JSON with this structure:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}

Quick Start - Creating Elements

Every element needs at minimum: type, id, x, y, and styling properties.

Minimal Rectangle

{
  "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 }
}

Text Element

{
  "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
}

Arrow Element

{
  "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
}

Element Types

Color Palette (Recommended)

Backgrounds

• #a5d8ff - Light blue
• #b2f2bb - Light green
• #ffec99 - Light yellow
• #ffc9c9 - Light red/pink
• #e9ecef - Light gray
• #d0bfff - Light purple
• #99e9f2 - Light cyan

Strokes

• #1e1e1e - Default black
• #1971c2 - Blue
• #2f9e44 - Green
• #f08c00 - Orange
• #e03131 - Red
• #9c36b5 - Purple

Styling Properties

Connecting Elements with Arrows

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" }]
}

Font Families

Best Practices

1. Generate unique IDs - Use descriptive prefixes like rect-1, arrow-2, text-header
2. Use random seeds - Each element needs a unique seed for consistent rendering
3. Space elements well - Leave 50-100px between elements
4. Align elements - Use consistent x/y coordinates for visual alignment
5. Group related items - Use matching groupIds arrays
6. Use the color palette - Stick to Excalidraw's built-in colors for consistency

Diagram Types You Can Create

Reference Documentation

• [diagram-patterns.md](diagram-patterns.md) - Professional patterns for each diagram type (flowcharts, sequence diagrams, mind maps, architecture, etc.)
• [examples.md](examples.md) - Complete working JSON examples you can use as templates
• [element-reference.md](element-reference.md) - Full property reference for all element types
• [best-practices.md](best-practices.md) - Design tips, color theory, typography guidelines

Quick Tips for Beautiful Diagrams

1. Use `roughness: 0` for formal/technical diagrams, roughness: 1 for friendly sketches
2. Use `fontFamily: 2` (Helvetica) for professional look, fontFamily: 1 (Virgil) only when casual look is requested
3. Consistent spacing - 100px between major elements, 50px for related items
4. Color semantics - Blue for info/input, Green for success/data, Yellow for decisions, Red for errors
5. Arrow conventions - Solid for actions, Dashed for responses/async