excalidraw-diagrams

🥈Silver

Generate Excalidraw diagrams programmatically. Useful for operations teams to create flowcharts, architecture diagrams, and system designs. Integrates with Claude Code for automated diagram generation.

1210Updated Today

Intermediate30min to implementautomation

Saves ~20 min per use

Quick InstallView Source

git clone https://github.com/robtaylor/excalidraw-diagrams.git

Works with:

Claude

Overview

About This Skill

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/robtaylor/excalidraw-diagrams

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Create an Excalidraw diagram for [COMPANY]'s [INDUSTRY] workflow. The diagram should illustrate [DATA] process. Include key elements like [ELEMENT1], [ELEMENT2], and [ELEMENT3]. Use appropriate shapes and connectors to represent the relationships between these elements. Provide the Excalidraw code for easy integration.

Example Output

```excalidraw
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "version": 123,
      "versionNonce": 123456789,
      "isDeleted": false,
      "id": "user-created-rectangle",
      "fillStyle": "hachure",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 100,
      "y": 100,
      "strokeColor": "#000000",
      "backgroundColor": "#ffffff",
      "width": 200,
      "height": 100,
      "seed": 123456789,
      "groupIds": [],
      "roundness": {
        "type": 3,
        "value": 0.2
      },
      "boundElements": [],
      "updated": 1670209304300,
      "link": null,
      "locked": false,
      "startBindingMode": null,
      "startBindingType": null,
      "startBindingId": null,
      "points": [],
      "lastCommittedPoint": null,
      "startArrowhead": null,
      "endArrowhead": null,
      "startArrowheadType": "none",
      "endArrowheadType": "none",
      "startArrowheadStyle": "none",
      "endArrowheadStyle": "none",
      "startArrowheadSize": "small",
      "endArrowheadSize": "small",
      "text": "Start",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "baseline": 18,
      "textDecoration": 1,
      "fontStyle": "normal",
      "fontWeight": 400,
      "color": "#000000",
      "hasBackgroundColor": false,
      "backgroundColor": "#ffffff",
      "bindings": [],
      "isBindEnabled": false,
      "updatedExternally": false
    },
    {
      "type": "arrow",
      "version": 123,
      "versionNonce": 123456789,
      "isDeleted": false,
      "id": "user-created-arrow",
      "fillStyle": "hachure",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 100,
      "y": 200,
      "strokeColor": "#000000",
      "backgroundColor": "#ffffff",
      "width": 200,
      "height": 100,
      "seed": 123456789,
      "groupIds": [],
      "roundness": {
        "type": 3,
        "value": 0.2
      },
      "boundElements": [],
      "updated": 1670209304300,
      "link": null,
      "locked": false,
      "startBindingMode": null,
      "startBindingType": null,
      "startBindingId": null,
      "points": [
        [0, 0],
        [100, 100]
      ],
      "lastCommittedPoint": null,
      "startArrowhead": null,
      "endArrowhead": null,
      "startArrowheadType": "none",
      "endArrowheadType": "none",
      "startArrowheadStyle": "none",
      "endArrowheadStyle": "none",
      "startArrowheadSize": "small",
      "endArrowheadSize": "small",
      "text": "Process Flow",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "baseline": 18,
      "textDecoration": 1,
      "fontStyle": "normal",
      "fontWeight": 400,
      "color": "#000000",
      "hasBackgroundColor": false,
      "backgroundColor": "#ffffff",
      "bindings": [],
      "isBindEnabled": false,
      "updatedExternally": false
    }
  ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  }
}
```