cc-excalidraw-skill

🥈Silver

Create and edit hand-drawn style diagrams in Excalidraw JSON format. Use for flowcharts, architecture diagrams, wireframes, and visual drawings.

6920Updated 2mo ago

Intermediate30min to implementautomation

Saves ~20 min per use

Quick InstallView Source

git clone https://github.com/rnjn/cc-excalidraw-skill.git

Works with:

Claude

Overview

About This Skill

The Excalidraw skill enables you to programmatically create and edit diagrams in Excalidraw JSON format (.excalidraw files). It supports a wide range of diagram types including flowcharts, sequence diagrams, architecture diagrams, mind maps, data flow diagrams, entity-relationship diagrams, and wireframes. The skill provides tools to create rectangles, ellipses, diamonds, text, arrows, lines, and other elements with full control over styling, colors, positioning, and connections. You can generate professional diagrams with consistent spacing, semantic color conventions, and hand-drawn aesthetics or formal technical styling.

Use Cases

Create flowcharts and process diagrams for algorithms and workflows

Design system architecture and microservices diagrams

Build wireframes and UI mockups for application design

Generate entity-relationship diagrams for database schemas

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/rnjn/cc-excalidraw-skill

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

I want to create an Excalidraw diagram for [COMPANY] in the [INDUSTRY] sector. The diagram should visualize [DATA] with the following elements: [ELEMENTS]. Please generate the Excalidraw JSON code for this diagram.

Example Output

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "version": 123,
      "versionNonce": 123456789,
      "isDeleted": false,
      "id": "rectangle-id",
      "fillStyle": "hachure",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 100,
      "y": 100,
      "strokeColor": "#000000",
      "backgroundColor": "transparent",
      "width": 200,
      "height": 100,
      "seed": 123456789,
      "groupIds": [],
      "roundness": {
        "type": 3,
        "value": 0.2
      },
      "boundElements": [],
      "updated": 1634613077967,
      "link": null,
      "locked": false,
      "customData": {}
    },
    {
      "type": "ellipse",
      "version": 123,
      "versionNonce": 123456789,
      "isDeleted": false,
      "id": "ellipse-id",
      "fillStyle": "hachure",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 300,
      "y": 100,
      "strokeColor": "#000000",
      "backgroundColor": "transparent",
      "width": 100,
      "height": 100,
      "seed": 123456789,
      "groupIds": [],
      "roundness": {
        "type": 2,
        "value": 0.5
      },
      "boundElements": [],
      "updated": 1634613077967,
      "link": null,
      "locked": false,
      "customData": {}
    }
  ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  }
}
```