### Setup Excalidraw Rendering Environment

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/SKILL.md

These commands set up the necessary environment for rendering Excalidraw diagrams. It involves changing to the reference directory, synchronizing packages with `uv`, and installing the Playwright browser binaries for rendering. This is a one-time setup.

```bash
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium
```

--------------------------------

### Install and Configure Excalidraw Diagram Skill

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Commands to clone the repository into a project's skills directory and set up the Playwright-based rendering pipeline for visual validation.

```bash
# Clone the repository
git clone https://github.com/coleam00/excalidraw-diagram-skill.git

# Copy to your project's skills directory
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
```

```bash
# Navigate to the references directory
cd .claude/skills/excalidraw-diagram/references

# Install dependencies with uv
uv sync

# Install Chromium for Playwright
uv run playwright install chromium
```

--------------------------------

### Define Excalidraw Diagram JSON Structure

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Example of the required JSON structure for an .excalidraw file, including element definitions for shapes and text, as well as global app state.

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "id": "trigger_rect",
      "x": 100,
      "y": 100,
      "width": 180,
      "height": 90,
      "strokeColor": "#c2410c",
      "backgroundColor": "#fed7aa",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 0,
      "opacity": 100,
      "angle": 0,
      "seed": 100001,
      "version": 1,
      "versionNonce": 100002,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [{"id": "trigger_text", "type": "text"}],
      "link": null,
      "locked": false,
      "roundness": {"type": 3}
    },
    {
      "type": "text",
      "id": "trigger_text",
      "x": 130,
      "y": 132,
      "width": 120,
      "height": 25,
      "text": "Start Process",
      "originalText": "Start Process",
      "fontSize": 16,
      "fontFamily": 3,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#374151",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 0,
      "opacity": 100,
      "angle": 0,
      "seed": 100003,
      "version": 1,
      "versionNonce": 100004,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "trigger_rect",
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": 20
  },
  "files": {}
}
```

--------------------------------

### Define Fan-Out Visual Pattern in Excalidraw JSON

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Provides a structural example of a fan-out pattern where a central node connects to multiple target nodes using arrow elements. This JSON format is compatible with the Excalidraw editor.

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "ellipse",
      "id": "source",
      "x": 100, "y": 150,
      "width": 80, "height": 80,
      "strokeColor": "#c2410c",
      "backgroundColor": "#fed7aa",
      "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid",
      "roughness": 0, "opacity": 100, "angle": 0,
      "seed": 1001, "version": 1, "versionNonce": 1002,
      "isDeleted": false, "groupIds": [],
      "boundElements": [
        {"id": "source_text", "type": "text"},
        {"id": "arrow_top", "type": "arrow"},
        {"id": "arrow_mid", "type": "arrow"},
        {"id": "arrow_bot", "type": "arrow"}
      ],
      "link": null, "locked": false
    },
    {
      "type": "arrow",
      "id": "arrow_top",
      "x": 180, "y": 170,
      "width": 120, "height": 90,
      "strokeColor": "#c2410c", "backgroundColor": "transparent",
      "fillStyle": "solid", "strokeWidth": 2, "strokeStyle": "solid",
      "roughness": 0, "opacity": 100, "angle": 0,
      "seed": 3001, "version": 1, "versionNonce": 3002,
      "isDeleted": false, "groupIds": [], "boundElements": null,
      "link": null, "locked": false,
      "points": [[0, 0], [120, -90]],
      "startBinding": {"elementId": "source", "focus": 0, "gap": 2},
      "endBinding": {"elementId": "target_top", "focus": 0, "gap": 2},
      "startArrowhead": null, "endArrowhead": "arrow"
    }
  ],
  "appState": {"viewBackgroundColor": "#ffffff", "gridSize": 20},
  "files": {}
}
```

--------------------------------

### Define Structural Line Element

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/element-templates.md

Template for a basic line segment. It uses a points array to define the start and end coordinates.

```json
{
  "type": "line",
  "id": "line1",
  "x": 100, "y": 100,
  "width": 0, "height": 200,
  "strokeColor": "<structural line color from palette>",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 44444,
  "version": 1,
  "versionNonce": 55555,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "points": [[0, 0], [0, 200]]
}
```

--------------------------------

### Render Excalidraw Diagrams to PNG using Python Script

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Demonstrates the command-line usage of a Python script (`render_excalidraw.py`) for converting Excalidraw files to PNG format. It covers basic usage, specifying output paths, adjusting scale factors, setting viewport width, and combining multiple options for customized rendering.

```bash
# Basic usage - outputs diagram.png next to the input file
cd .claude/skills/excalidraw-diagram/references
uv run python render_excalidraw.py /path/to/diagram.excalidraw

# Specify custom output path
uv run python render_excalidraw.py /path/to/diagram.excalidraw --output /path/to/output.png

# Adjust scale factor (default: 2)
uv run python render_excalidraw.py /path/to/diagram.excalidraw --scale 3

# Set maximum viewport width (default: 1920)
uv run python render_excalidraw.py /path/to/diagram.excalidraw --width 2560

# Combined options
uv run python render_excalidraw.py /path/to/diagram.excalidraw -o output.png -s 2 -w 1920
```

--------------------------------

### Render Excalidraw Diagram to PNG

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/SKILL.md

This command renders an Excalidraw diagram file into a PNG image. It requires navigating to a specific directory and executing a Python script with the path to the Excalidraw file as an argument. The output PNG is generated in the same directory as the input file. Dependencies include Python and the `uv` package manager.

```bash
cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
```

--------------------------------

### Render Excalidraw Diagrams Programmatically with Python

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Demonstrates how to use the render module to validate Excalidraw JSON files, calculate element bounding boxes, and export diagrams to PNG format. Requires the render_excalidraw library.

```python
from pathlib import Path
from render_excalidraw import render, validate_excalidraw, compute_bounding_box
import json

# Load and validate Excalidraw JSON
excalidraw_path = Path("diagram.excalidraw")
data = json.loads(excalidraw_path.read_text())

# Validate the structure
errors = validate_excalidraw(data)
if errors:
	print("Validation errors:")
	for err in errors:
		print(f"  - {err}")
else:
	# Compute bounding box of all elements
	elements = [e for e in data["elements"] if not e.get("isDeleted")]
	min_x, min_y, max_x, max_y = compute_bounding_box(elements)
	print(f"Diagram bounds: ({min_x}, {min_y}) to ({max_x}, {max_y})")

	# Render to PNG
	output_path = render(
		excalidraw_path=excalidraw_path,
		output_path=Path("output.png"),  # Optional, defaults to same name with .png
		scale=2,                          # Device scale factor
		max_width=1920                    # Maximum viewport width
	)
	print(f"Rendered to: {output_path}")
```

--------------------------------

### Implement Arrow Bindings in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Demonstrates how to define an arrow element with startBinding and endBinding properties to connect two distinct elements by their IDs.

```json
{
  "type": "arrow",
  "id": "arrow_process_flow",
  "x": 282,
  "y": 145,
  "width": 118,
  "height": 0,
  "strokeColor": "#c2410c",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 200001,
  "version": 1,
  "versionNonce": 200002,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "points": [[0, 0], [118, 0]],
  "startBinding": {"elementId": "trigger_rect", "focus": 0, "gap": 2},
  "endBinding": {"elementId": "process_rect", "focus": 0, "gap": 2},
  "startArrowhead": null,
  "endArrowhead": "arrow"
}
```

--------------------------------

### Render Excalidraw Diagram to SVG using JavaScript

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/render_template.html

This JavaScript function takes Excalidraw diagram data (elements, appState, files) as JSON or an object and renders it as an SVG element. It forces a white background and disables dark mode export. The generated SVG is appended to the DOM element with the ID 'root'. Error handling is included to catch and report rendering issues.

```javascript
import { exportToSvg } from "https://esm.sh/@excalidraw/excalidraw?bundle";

window.renderDiagram = async function(jsonData) {
  try {
    const data = typeof jsonData === "string" ? JSON.parse(jsonData) : jsonData;
    const elements = data.elements || [];
    const appState = data.appState || {};
    const files = data.files || {};

    // Force white background in appState
    appState.viewBackgroundColor = appState.viewBackgroundColor || "#ffffff";
    appState.exportWithDarkMode = false;

    const svg = await exportToSvg({
      elements: elements,
      appState: {
        ...appState,
        exportBackground: true,
      },
      files: files,
    });

    // Clear any previous render
    const root = document.getElementById("root");
    root.innerHTML = "";
    root.appendChild(svg);

    window.__renderComplete = true;
    window.__renderError = null;

    return { success: true, width: svg.getAttribute("width"), height: svg.getAttribute("height") };
  } catch (err) {
    window.__renderComplete = true;
    window.__renderError = err.message;
    return { success: false, error: err.message };
  }
};

// Signal that the module is loaded and ready
window.__moduleReady = true;
```

--------------------------------

### Create Code Snippet Background in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Defines a rectangle element to serve as the background for a code snippet in Excalidraw diagrams. This element uses a dark background color to simulate a code editor theme. The JSON object specifies its type, position, dimensions, and styling, including grouping and bounding elements.

```json
{
  "type": "rectangle",
  "id": "code_block_bg",
  "x": 400,
  "y": 100,
  "width": 300,
  "height": 120,
  "strokeColor": "#1e293b",
  "backgroundColor": "#1e293b",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 500001,
  "version": 1,
  "versionNonce": 500002,
  "isDeleted": false,
  "groupIds": ["code_block_group"],
  "boundElements": [{"id": "code_text", "type": "text"}],
  "link": null,
  "locked": false,
  "roundness": {"type": 3}
}
```

--------------------------------

### Create Free-Floating Text Labels in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Defines a free-floating text element for use in Excalidraw diagrams. This allows for visual hierarchy without containers, using customizable font sizes and colors for titles, subtitles, and details. The JSON object specifies properties like text content, font size, color, and alignment.

```json
{
  "type": "text",
  "id": "section_title",
  "x": 100,
  "y": 50,
  "width": 200,
  "height": 30,
  "text": "Data Processing Pipeline",
  "originalText": "Data Processing Pipeline",
  "fontSize": 24,
  "fontFamily": 3,
  "textAlign": "left",
  "verticalAlign": "top",
  "strokeColor": "#1e40af",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 300001,
  "version": 1,
  "versionNonce": 300002,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": null,
  "lineHeight": 1.25
}
```

--------------------------------

### Define Free-Floating Text Element

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/element-templates.md

Template for a standalone text label without a container. It specifies font settings, alignment, and basic styling properties.

```json
{
  "type": "text",
  "id": "label1",
  "x": 100, "y": 100,
  "width": 200, "height": 25,
  "text": "Section Title",
  "originalText": "Section Title",
  "fontSize": 20,
  "fontFamily": 3,
  "textAlign": "left",
  "verticalAlign": "top",
  "strokeColor": "<title color from palette>",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 11111,
  "version": 1,
  "versionNonce": 22222,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": null,
  "lineHeight": 1.25
}
```

--------------------------------

### Create Code Snippet Text in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Defines a text element to display code content within a code snippet block in Excalidraw diagrams. This element is styled with a distinct text color (green) and uses line breaks for multi-line code. The JSON object specifies text content, font size, color, alignment, and its association with a background element.

```json
{
  "type": "text",
  "id": "code_text",
  "x": 410,
  "y": 110,
  "width": 280,
  "height": 100,
  "text": "{
  \"event\": \"RUN_STARTED\",
  \"timestamp\": 1699900000
}",
  "originalText": "{
  \"event\": \"RUN_STARTED\",
  \"timestamp\": 1699900000
}",
  "fontSize": 14,
  "fontFamily": 3,
  "textAlign": "left",
  "verticalAlign": "top",
  "strokeColor": "#22c55e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 500003,
  "version": 1,
  "versionNonce": 500004,
  "isDeleted": false,
  "groupIds": ["code_block_group"],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": "code_block_bg",
  "lineHeight": 1.25
}
```

--------------------------------

### Apply Rounded Corners to Rectangles

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/json-schema.md

This snippet demonstrates the property required to enable rounded corners on rectangle elements. Setting the roundness type to 3 applies the standard rounded corner effect.

```json
"roundness": { "type": 3 }
```

--------------------------------

### Define Arrow Element

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/element-templates.md

Template for an arrow connecting two elements. Uses startBinding and endBinding to attach to specific element IDs.

```json
{
  "type": "arrow",
  "id": "arrow1",
  "x": 282, "y": 145, "width": 118, "height": 0,
  "strokeColor": "<arrow color — typically matches source element's stroke from palette>",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 33333,
  "version": 1,
  "versionNonce": 44444,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "points": [[0, 0], [118, 0]],
  "startBinding": {"elementId": "elem1", "focus": 0, "gap": 2},
  "endBinding": {"elementId": "elem2", "focus": 0, "gap": 2},
  "startArrowhead": null,
  "endArrowhead": "arrow"
}
```

--------------------------------

### Define Centered Text Element

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/element-templates.md

Template for text that is bound to a container element. Uses containerId to link the text to its parent shape.

```json
{
  "type": "text",
  "id": "text1",
  "x": 130, "y": 132,
  "width": 120, "height": 25,
  "text": "Process",
  "originalText": "Process",
  "fontSize": 16,
  "fontFamily": 3,
  "textAlign": "center",
  "verticalAlign": "middle",
  "strokeColor": "<text color — match parent shape's stroke or use 'on light/dark fills' from palette>",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 11111,
  "version": 1,
  "versionNonce": 22222,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": "elem1",
  "lineHeight": 1.25
}
```

--------------------------------

### Create Timeline Marker Dot Element in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Defines an ellipse element to be used as a marker dot on a timeline in Excalidraw diagrams. This element is styled with specific stroke and background colors to visually indicate points in a sequence. The JSON object details its type, position, dimensions, and color properties.

```json
{
  "type": "ellipse",
  "id": "timeline_dot_1",
  "x": 94,
  "y": 94,
  "width": 12,
  "height": 12,
  "strokeColor": "#3b82f6",
  "backgroundColor": "#3b82f6",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 400003,
  "version": 1,
  "versionNonce": 400004,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false
}
```

--------------------------------

### Define Marker Dot Element

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/element-templates.md

Template for a small circular marker. It uses the ellipse type with equal width and height dimensions.

```json
{
  "type": "ellipse",
  "id": "dot1",
  "x": 94, "y": 94,
  "width": 12, "height": 12,
  "strokeColor": "<marker dot color from palette>",
  "backgroundColor": "<marker dot color from palette>",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 66666,
  "version": 1,
  "versionNonce": 77777,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false
}
```

--------------------------------

### Create Timeline Spine Element in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Defines a vertical line element to serve as the spine for a timeline in Excalidraw diagrams. This element is styled with a specific stroke color and width to represent the sequence. It is defined using a JSON object specifying its type, position, dimensions, and styling properties.

```json
{
  "type": "line",
  "id": "timeline_spine",
  "x": 100,
  "y": 100,
  "width": 0,
  "height": 300,
  "strokeColor": "#1e3a5f",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 400001,
  "version": 1,
  "versionNonce": 400002,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "points": [[0, 0], [0, 300]]
}
```

--------------------------------

### Define Rectangle Container

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/element-templates.md

Template for a rectangle shape, often used as a container for text. Includes roundness property for styling.

```json
{
  "type": "rectangle",
  "id": "elem1",
  "x": 100, "y": 100, "width": 180, "height": 90,
  "strokeColor": "<stroke from palette based on semantic purpose>",
  "backgroundColor": "<fill from palette based on semantic purpose>",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0,
  "opacity": 100,
  "angle": 0,
  "seed": 12345,
  "version": 1,
  "versionNonce": 67890,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": [{"id": "text1", "type": "text"}],
  "link": null,
  "locked": false,
  "roundness": {"type": 3}
}
```

--------------------------------

### Define Binding Format for Excalidraw Elements

Source: https://github.com/coleam00/excalidraw-diagram-skill/blob/main/references/json-schema.md

This JSON structure defines how an element binds to another shape within the Excalidraw canvas. It requires an elementId, focus point, and gap distance to establish the connection.

```json
{
  "elementId": "shapeId",
  "focus": 0,
  "gap": 2
}
```

--------------------------------

### Define Semantic Shape Colors in Excalidraw

Source: https://context7.com/coleam00/excalidraw-diagram-skill/llms.txt

Provides JSON objects defining stroke and background color pairs for various semantic purposes in Excalidraw diagrams. These color definitions are used to visually distinguish elements like triggers, success states, decisions, AI/LLM components, primary elements, and errors, aiding in diagram interpretation.

```json
// Start/Trigger element (orange tones)
{
  "strokeColor": "#c2410c",
  "backgroundColor": "#fed7aa"
}
```

```json
// End/Success element (green tones)
{
  "strokeColor": "#047857",
  "backgroundColor": "#a7f3d0"
}
```

```json
// Decision element (amber tones)
{
  "strokeColor": "#b45309",
  "backgroundColor": "#fef3c7"
}
```

```json
// AI/LLM element (purple tones)
{
  "strokeColor": "#6d28d9",
  "backgroundColor": "#ddd6fe"
}
```

```json
// Primary/Neutral element (blue tones)
{
  "strokeColor": "#1e3a5f",
  "backgroundColor": "#3b82f6"
}
```

```json
// Error element (red tones)
{
  "strokeColor": "#b91c1c",
  "backgroundColor": "#fecaca"
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.