Excalidraw Architect MCP

Every diagram your engineering docs need — as hand-drawn Excalidraw, generated by your AI.

Twenty-five diagram types. Architecture and flowcharts, but also sequence diagrams, state machines, ER models, swimlanes, timelines, Gantt charts, quadrants, funnels, and hand-sketched bar/line/scatter charts. No coordinates to hallucinate, no Figma, no stale PNGs.

The Problem

When you're onboarding onto a codebase, designing a new system, or documenting how something works, a diagram communicates in seconds what pages of text can't. But the options aren't great.

Mermaid is quick to generate and locked down — you can't drag a node, group things visually, or annotate it afterwards. Figma means thirty minutes of manual work per picture. And when an LLM writes Excalidraw JSON directly it hallucinates coordinates: boxes overlap, arrows tangle, and you fix it by hand.

Worse, most tools only cover one diagram type well. The moment your doc needs a sequence diagram next to the architecture sketch, you're switching tools and the two look nothing alike.

The Solution

excalidraw-architect-mcp separates the what from the where — the AI describes structure, the engine does the pixel math.

Your LLM says what the components, actors, tiers, or data points are. The MCP picks the layout algorithm for that diagram type, styles it, and writes a real .excalidraw file you can open and keep editing. 50+ technologies (Kafka, PostgreSQL, Redis…) get auto-styled, every diagram can be revised in natural language, and it runs fully offline in Cursor/Claude Code/Windsurf — no API keys.

• 25 diagram types, one grammar — see them all, from architecture to Gantt to scatter plots
• Genuinely hand-drawn output — a pure-Python port of the roughjs stroke generator, so exported SVG/PNG looks like the Excalidraw canvas, not a clean-geometry approximation
• Perfect layouts every time — Sugiyama with adaptive spacing for graphs; purpose-built geometry for everything else
• Architecture-aware styling — say "Kafka" and get a stream-styled node, not a generic rectangle
• Talk to your diagrams — add, remove, or rewire any diagram in natural language; the spec lives in the file
• Export to SVG & PNG — no browser, no Node.js
• Living architecture knowledge graph — optionally persist your system as a version-controlled model the AI can query and lint (details)

📐 25 Diagram Types

Every image below is a real .excalidraw file generated by this MCP — zero manual positioning. Click any one to see it full size.

Choosing and calling

The gallery above is ordered by how often you'll reach for each type. Internally they fall into five families, which is what decides the layout engine:

architecture and flowchart are graphs and take nodes + connections. Every other type takes a diagram_type and a spec shaped for it:

create_diagram(
    output_path="./checkout.excalidraw",
    diagram_type="sequence",
    spec={
        "title": "Checkout authorization",
        "actors": [{"id": "web", "label": "Web app"}, {"id": "psp", "label": "Payment PSP"}],
        "messages": [
            {"from_id": "web", "to_id": "psp", "label": "authorize"},
            {"from_id": "psp", "to_id": "web", "label": "approved",
             "kind": "return", "focal": True},
        ],
    },
)

Call list_diagram_types() for when-to-use guidance on each, and get_diagram_schema("<type>") for the exact spec shape. Or just ask: "draw the PR review flow as a swimlane".

Two conventions worth knowing. Mark one or two elements "focal": true — that earns the accent color,