excalidraw

name	excalidraw
description	Excalidraw diagram generation: create architecture diagrams, flowcharts, system maps, and wireframes as Excalidraw JSON files — saveable, version-controllable, and editable in excalidraw.com

Excalidraw Skill

When to activate

• Creating an architecture diagram for a codebase or system
• Drawing a service dependency map for microservices
• Building a data flow or infrastructure diagram
• Generating a wireframe or UI sketch
• Producing a diagram to embed in a README or docs

When NOT to use

• Simple flowcharts that render in GitHub/Notion — use the mermaid skill instead
• Presentation slides — export to PNG and use in your slide tool
• Real-time collaborative whiteboarding — open excalidraw.com directly

Instructions

Architecture diagram

Generate an Excalidraw architecture diagram for [system].

System: [describe — services, databases, external APIs, data flows]
Style: [minimal / detailed / colour-coded by layer]
Save to: [docs/architecture.excalidraw or path of choice]

Diagram conventions:
- Rectangles with rounded corners: services and applications
- Cylinders: databases and storage
- Diamonds: decision points or gateways
- Parallelograms: external services or third-parties
- Arrows: data flow direction
- Colour coding: frontend (blue), backend (orange), data (green), external (grey)

Example system description:
"Next.js frontend on Vercel, Express API on Railway,
PostgreSQL on Neon, Redis on Upstash, Stripe for payments"

Output: valid Excalidraw JSON saved to the specified path.

Service dependency map

Create an Excalidraw service dependency map for [architecture].

Services: [list all services]
Dependencies: [which services call which]
Highlight: [critical path / bottlenecks / single points of failure]

Show:
- Each service as a labelled box
- Synchronous calls as solid arrows
- Async/event-driven calls as dashed arrows
- External dependencies in a different colour
- Annotations for protocols (REST, gRPC, events)

Infrastructure diagram

Draw an Excalidraw infrastructure diagram for [deployment].

Cloud: [AWS / GCP / Azure / multi-cloud]
Components: [list — load balancer, compute, database, cache, CDN, etc.]
Regions/zones: [single region / multi-AZ / multi-region]

Conventions:
- Group components by VPC / network boundary using container shapes
- Show public/private subnet boundaries
- Label each component with its cloud service name (e.g. "ALB", "ECS Fargate", "RDS Aurora")
- Show traffic flow with directional arrows

Wireframe

Create an Excalidraw wireframe for [screen/component].

Screen: [describe — dashboard, form, landing page, mobile screen]
Key elements: [list UI components — nav, sidebar, cards, table, form, buttons]
Layout: [desktop / mobile / both]
Fidelity: [low (boxes only) / medium (labels + rough shapes)]

Use Excalidraw's hand-drawn style for wireframes (looks intentionally rough).
Label every component with its purpose.

Opening and editing

# Open in VS Code (requires Excalidraw VS Code extension)
code docs/architecture.excalidraw

# Open in browser
open https://excalidraw.com
# Then: File → Open → select your .excalidraw file

# Export to PNG/SVG from Excalidraw:
# Menu → Export image → PNG or SVG

# Embed in README:
# Export to SVG → commit to repo → reference in markdown:
# ![Architecture](docs/architecture.svg)

Excalidraw MCP (if configured)

If the Excalidraw MCP server is configured, Claude can generate diagrams directly:

Use the Excalidraw MCP to draw an architecture diagram for our app:
- React frontend → Express API → PostgreSQL + Redis
- Deployed on Vercel + Railway
Save as docs/architecture.excalidraw

See mcp/excalidraw.md for setup instructions.

Example

User: Create an architecture diagram for a SaaS app: Next.js frontend, API routes + Prisma + PostgreSQL, Stripe webhooks, Resend for email, Cloudflare CDN.

Claude generates:

{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {
      "type": "rectangle",
      "x": 100, "y": 100,
      "width": 180, "height": 60,
      "strokeColor": "#3b82f6",
      "backgroundColor": "#dbeafe",
      "label": { "text": "Next.js Frontend\n(Vercel)" }
    },
    {
      "type": "rectangle",
      "x": 380,  
         
       
       
          
    
    
       
         
         
       
       
          
    
  

Save to docs/architecture.excalidraw and open at excalidraw.com to view and edit.

---