---

name: excalidraw-diagram description: Create an Excalidraw diagram from a text description. Use when the user wants to create a diagram, flowchart, architecture diagram, or visual explanation for their blog post.

Create Excalidraw Diagram

Generate an Excalidraw diagram from a text description that the user can import into Excalidraw.

Instructions

1. Understand what the user wants to visualize:

   • Ask clarifying questions if needed
   • Identify the type of diagram (flowchart, architecture, comparison, timeline, etc.)
   • Note key elements, relationships, and groupings

2. Generate Excalidraw JSON:

   • Create valid Excalidraw JSON format
   • Use appropriate shapes (rectangles, arrows, text, etc.)
   • Apply sensible positioning and sizing
   • Use colors that work well together

3. Provide the output:

   • Save the JSON to a .excalidraw file in a sensible location
   • Give instructions on how to use it

Excalidraw JSON Structure

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "id": "unique-id",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 60,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#a5d8ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roundness": { "type": 3 },
      "seed": 12345
    },
    {
      "type": "text",
      "id": "unique-id-2",
      "x": 120,
      "y": 120,
      "text": "Label",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center"
    },
    {
      "type": "arrow",
      "id": "unique-id-3",
      "x": 300,
      "y": 130,
      "width": 100,
      "height": 0,
      "points": [[0, 0], [100, 0]]
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

Color Palette (Hand-drawn friendly)

Use these Excalidraw default colors:

| Purpose | Color Code | Name | |---------|------------|------| | Safe/Good | #b2f2bb | Light green | | Warning/Caution | #ffec99 | Light yellow | | Danger/Avoid | #ffc9c9 | Light red | | Info/Neutral | #a5d8ff | Light blue | | Highlight | #d0bfff | Light purple | | Stroke | #1e1e1e | Dark gray |

Common Element Types

• rectangle - Boxes, containers
• ellipse - Circles, ovals
• diamond - Decision points
• arrow - Connections, flow
• line - Simple connections
• text - Labels, descriptions
• freedraw - Hand-drawn elements

Output

1. Save the file to assets/excalidraw/[descriptive-name].excalidraw

2. Tell the user how to open and export:

To use this diagram:
1. Go to https://excalidraw.com
2. Click the menu (hamburger icon) → Open
3. Select the .excalidraw file
4. Edit as needed, then export as PNG/SVG to assets/images/

Example

User: "Create a diagram showing the three port ranges"

Output: An Excalidraw file with:

• Three colored rectangles (green for safe range, yellow for system, red for ephemeral)
• Labels for each range (0-1023, 1024-49151, 49152-65535)
• Text descriptions below each
• Arrow pointing to the recommended range