System Map

A system map is the picture you draw on a whiteboard when someone asks how the thing is put together: boxes for the parts, arrows for what talks to what, and a dotted outline around the parts you run yourself. This tool draws one from a short description. Nothing is uploaded, there is no account, and the whole map travels in the link.

You describe it; the page places it

There are no coordinates anywhere in the description, and that is the one design decision everything else follows from. You say a component exists and what it is; you say which things connect; the page works out where the boxes go. The same description always produces the same picture, so a map you send someone is a map, not a screenshot of one.

It also means something that cannot see can write one. Hand an AI assistant this page and the three statements below, and it can compose the whole link — you get a diagram back in the conversation rather than a paragraph describing one. That is not a bolted-on feature: it is what dropping the coordinates buys.

The three statements

• id[role] "Label" declares a component. The id is how you refer to it on other lines; the label is what appears in the box, and if you leave it out the id is used. The role decides the colour and the caption.
• from > to : label draws an arrow between two components you have declared. The label is optional — good ones are short: https, sql, enqueue.
• group "Label" { id id } draws a dotted boundary around the components you list. Use it for a trust boundary, a VPC, a vendor, or anything else where "these are on one side of a line" is part of the point.

Seven roles are available: ui, service, store, queue, cloud, security and external. Each gets a coloured edge and a caption under its label, so the map stays readable printed in black and white or by someone who does not distinguish two of the colours.

Anything the page cannot read is listed under the editor with its line number, and the rest of the map still draws. A misspelled role, an arrow to something you never declared, a duplicate id — each says what is wrong on which line rather than failing as a whole.

What it will not do

You cannot drag a box. The layout is computed, and letting you nudge one would mean storing a position, which is the thing that makes a map unwritable by anything but a person with a mouse. If you want to place boxes by hand, that is a different tool — the flowchart maker on this site does exactly that.

Arrows are straight lines between the layers they cross; they route around layers, not around boxes. Cycles are drawn, but the map is laid out as though the loop were cut, so a circular dependency reads correctly while sitting in the position its forward direction earns.

Sharing and exporting

The address bar updates as you type. The map is packed into the part of the URL after the #, which browsers never send to a server, so the link is the map and whoever opens it gets an editable copy rather than a picture.

SVG is the export to prefer — it is text, it scales without going soft, and it drops into documents and slides unchanged. PNG is there for places that will not take an SVG, rendered from exactly the same drawing at twice the on-screen size. Both follow the theme the page is showing.

Your working map is also saved in this browser, so closing the tab and coming back finds it where you left it. That copy never leaves the machine and clearing site data clears it too — export or copy the link for anything worth keeping.

When you need a different kind of diagram

This draws one shape of picture: components, what connects them, and what sits inside a boundary. If you want a sequence diagram, a state machine, an ER diagram or a Gantt chart — all from text, with the same live preview and a shareable link — use Mermaid Live. It needs no account and exports PNG and SVG. The one thing it has no word for is the vocabulary here: that a box is a datastore rather than a service, and that a dotted outline is a trust boundary rather than decoration.