Excalidraw Architect

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.

Architecture Components + connections

DP integration Sources → core → consumers

Sequence Messages over time

Timeline Events on an axis

Gantt Tasks and phases

Quadrant Two-axis positioning

Pyramid / funnel Ranked tiers or drop-off

Venn Set overlap

Loop Flywheel around a hub

Bar chart Categorical comparison

Line chart Trends over time

Scatter plot Distribution + correlation

Nested Hierarchy by containment

Layer stack Stacked abstractions

Medallion Data quality tiers

ER / data model Entities + fields

High-level Stack inside a boundary

IT current-state Legacy landscape

Swimlane Cross-functional flow

Process Multi-actor workflow

Data flow Role-scoped pipeline

Flowchart Decision logic with branches

Tree Parent → children

Org chart Ownership + escalation

State machine States + transitions

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(" ") 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, and marking five spends the signal. And chrome (axes, gridlines, lane dividers) deliberately renders crisp while shapes and data marks render hand-drawn; that contrast is what keeps a sketchy chart legible instead of noisy.

Editing works on every type. The validated spec is stored inside the .excalidraw file, so you patch it rather than rebuild it:

modify_diagram(path, [{"op": "update_spec", "patch": {"title": "Revised plan"}}])

Lists are replaced wholesale — to change one tier, send the whole tiers list.

Regenerate every image above with python scripts/generate_showcase.py --png.

See It In Action

Every frame below is generated entirely by AI using this MCP - zero manual positioning.

E-Commerce Platform Architecture

Payment Processing Flow

Use Cases

• Onboarding onto a new codebase — point it at a service and get a high-level architecture diagram without reading a line of code, then a sequence diagram for the one flow that matters.
• Design docs and RFCs — an architecture sketch, a state machine for the new lifecycle, a quadrant for the options you rejected, and a Gantt for the rollout. One tool, one visual language.
• Runbooks and incident write-ups — sequence diagrams for what happened, timelines for when, swimlanes for who did what.
• Data platform documentation — medallion tiers, role-scoped pipelines, integration topology.
• Reporting without a BI tool — hand-drawn bar/line/scatter charts that sit next to your architecture diagram instead of clashing with it.
• Documentation that stays alive — commit the .excalidraw file and revise it in natural language as the system changes. No more stale diagrams from six sprints ago.

Quick Start

Install

pip install excalidraw-architect-mcp

For PNG export support (SVG works out of the box):

pip inst