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.
Canvas editing for six of ten notations.
Opens with a worked example — nothing to set up.
Ten notations
One text format, ten kinds of document
The same editor, viewer, share link and export for all of them — and Mermaid pastes into seven of the nine — it has no data dictionary and no lifecycle notation. Each card says how that kind is edited.
- C4 modelEdited as text or canvasContext, container and component levels in one file — zoom in and drill from a box into what it contains.
- Sequence diagramEdited as text or canvasLifelines, activation, loops and alt fragments — clickable message by message, with the payload beside each one.
- FlowchartEdited as text or canvasTerminators, guarded decisions, io and call symbols, and loops that hook back — traced end to end as it draws.
- Use caseEdited as text or canvasActors outside a system boundary, associations into it, and «include» or «extend» between cases.
- ER diagramEdited as text or canvasTables with their columns, primary and foreign keys, and crow's-foot cardinality on every relationship.
- Data dictionaryEdited as text or canvasEvery field with what it means, where its value comes from, which values are legal, and whether it is personal data.
- Gantt chartEdited as textHow long each piece takes, and what can't start until it's done
- Milestone timelineEdited as textWhat happened when, and which period it happened in
- LifecycleEdited as textWhat one thing went through, and where it can end up
- Decomposition treeEdited as textWhat breaks down into what, all the way down
nine themes
Pick a theme, and the diagram wears it
arch-lab ships nine themes — Light, Paper, Pastel, Liquid glass, Dark, Midnight, High contrast, Blueprint and E-ink. A theme repaints the diagram, not just the page around it: node fills, connector ink, the canvas ground, and the SVG or PNG you export all follow the one you picked. Every palette is contrast-measured rather than a recolour, and E-ink has no colour at all — it tells the roles apart by texture, so a diagram still reads printed or projected in greyscale. The picker sits in the header on every page, your choice is kept in your browser, and a first visit follows your system's light or dark preference.
Ask your agent for the diagram
The format is plain text, so an AI agent can write it — and arch-lab gives it the two things it cannot guess: the exact grammar, and the real parser's verdict on what it just wrote. 28 read-only tools, over all 10 document kinds. Nothing here can change your files.
Connect the MCP server
Hosted. Nothing to install, no key.
claude mcp add --transport http arch-lab --scope user https://arch-lab.dev/api/mcpOr install the skill
The same grammar as files in your repo — no connector, nothing running.
npx skills add raksitnongbua/arch-lab --skill alabHow you use it
An arch-lab diagram is edited two ways. All ten notations are edited as source text; six of them — C4, sequence, flowchart, use case, ER and dictionary — are also editable on the canvas, where a drag writes a position or an order into that same text rather than into a private layout file. Either way the change lands in the same one-line-per-element text you review in a pull request.
- 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 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 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, and nothing uploaded to open, edit or share it: git is the collaboration layer. Only the optional image URL behind Copy markdown sends a diagram to our server, and only while the page holding that image is open. See finished examples · Drag it on the canvas
Still deciding? The FAQ answers what leaves your browser, what it exports, and how it compares to Mermaid.