Skip to content
arch-lab
Runs in your browser · no account, nothing uploaded

Architecture diagrams you can present, and an agent can write.

arch-lab is a browser-based editor for architecture diagrams written as plain text. Describe a system in a few lines and it draws it — a C4 model you can drill into, or a sequence flow you can click through message by message. Your AI agent can write that text for you.

Open a live diagramBuild a C4 model

Opens with a worked example — nothing to set up.

Not a picture

A diagram you can talk through

Every element answers a gesture, so the diagram keeps up with the conversation instead of sitting behind it.

click
Spotlight one message
Its arrow redraws itself and holds while the rest recede — with the endpoint, payload and failure modes beside it.
double-click
Open the level beneath
Drill from a C4 box into what it contains, and follow the breadcrumb back out. One model, told at whatever depth the question needs.
immersive
Take the whole screen
Immersive for the room you are presenting to. Export any view as SVG, PNG, or an animated GIF for the doc nobody opens live.
Click through a checkout flowDrill a C4 model
Focus moves message by message — the same draw a click gives you.
Beta

Ask your agent for the diagram

The format is plain text, so an AI agent can write it — and the MCP server gives it the two things it cannot guess: the exact grammar, and the real parser's verdict on what it just wrote. 10 read-only tools, over both document kinds. Nothing here can change your files.

Claude Code
claude mcp add --transport http arch-lab --scope user https://arch-lab-dev.vercel.app/api/mcp
Connect your agentRead the format

How you actually use it

  1. 1 of 3

    Open a playground

    Nothing to install and no account. A worked example is already on screen — edit the text beside it and the diagram follows as you type.

  2. 2 of 3

    Or let your agent write it

    Point Claude Code, Cursor or any MCP client at the server. It gets the grammar and the real parser's verdict, so what it hands you is valid before you open it.

  3. 3 of 3

    Commit the text

    The diagram is one .alab file — stable ids, one line per element. It sits next to the code it describes and a reviewer sees what changed in the architecture.

It is your file, and you can read it. A model is one .alab text file — stable ids, one line per element, deterministic order, so a diff shows what changed in the architecture rather than a reshuffled blob. JSON is one click away for tools that want it, and Mermaid pastes straight in. No account, no server, nothing uploaded: git is the collaboration layer. See finished examples · Try the canvas editor