Diagrams that actually move.
Build animated, interactive architecture diagrams in the browser. Draw the boxes, then show the traffic actually flowing between them — and share, embed or export it when you are ready.
Your first diagram saves in this browser — nothing to sign up for until you want it in the cloud.
The four that matter
Four things a picture of a diagram cannot do.
Boxes and arrows are table stakes. These are the reasons the tab stays open — and all four are in the free editor.
Motion that carries the meaning.
A connection can march as a dash, pulse, glow, or carry an object along its path. A node can fade, rise, pop, bounce, shake, throb or glow. Speed, delay, repeat and the pause between runs are four fields in one panel — there is no timeline to learn and no keyframes to write.
- The same controls on a node and on a connection
- A per-element start delay, so a run plays out instead of arriving at once
- Readers get a replay button too — not just you
Click any node to open its panel. Double-click the orders service to drill in.
The context panel is the doc.
Click an element and its panel opens over the canvas — markdown, code blocks, lists, links, and a way into the sub-diagram behind it. Short notes ride on the node itself, as a marker, a label, or on hover. Your reader gets the explanation at the moment they point at the thing.
- Markdown for the long story, a 280-character note for the short one
- Works the same on a shared link and inside an embed
- Drill into a node's own diagram, breadcrumb back out
One link, or an iframe in your docs.
Publish a read-only link and anyone can open the diagram — pan it, click a node, read the panel, drill down a level. Paste the snippet into your docs site, wiki or handbook and the same interactive view renders inline, animation included. Rotate the token and every embed of it goes dark at once.
- Read-only by construction — no editing code ships to an embed
- Size and theme as query parameters on the snippet
- Revoke a token and the link stops working immediately
Handbook / Architecture
Order pipeline
Checkout writes through the orders service, which is the only thing holding a connection to the primary. Everything downstream reacts to the event.
<iframe src="http://localhost:3000/embed/8f2c41?theme=default"
width="100%" height="480" loading="lazy"
title="Order pipeline"></iframe>The whole layer, at full size — not a screenshot of what happened to be on screen.
Animated GIF for the point. PNG for the deck.
Export the whole layer at 1×, 2× or 3×, on the diagram background or transparent, with the padding you choose. A GIF when the movement is the argument; a still PNG for the slide, the PR description, the wall.
- Everything on the layer, whatever the viewport was showing
- Transparent drops the grid as well as the fill
- Nothing is trapped in here — share a read-only link or embed the same diagram
What you can build
Ten ways in. None of them locked.
Each one starts you on a template with the right shapes already placed. The type is a starting point, never a restriction — put a C4 boundary on a flowchart if that is what the drawing needs.
Examples
Three diagrams, actually running.
Every one of these was built in the free editor. Open any of them and start editing — they are read-only links until you make them yours.
Zoom out to context. Double-click to go deeper.
Person, system, container and component shapes are in the palette from the start, and every relationship can carry its technology label. Give a container its own sub-diagram and the canvas drills into it — with a breadcrumb back out.
- Layers all the way down — context, containers, components
- System boundaries you can drag nodes in and out of
- One click to auto-arrange the whole level
Watch the request travel, not just the arrow.
A connection can march as a dashed line, pulse, glow, or carry an object along its path at the speed you set. Group services into a boundary, pull in the cloud and network shape libraries, and the picture explains itself in a standup without you narrating it.
- Cloud, network, org and tech shape libraries included
- Boundaries that keep their contents when you drag them
- Canvas themes, or your own background and per-node styling
Transitions that play out in order, one after another.
Drop the states on the canvas and connect them. Give each transition its own start delay and the run plays out along the path instead of arriving all at once — then hand the reader a replay button so they can watch it again.
- A start delay per transition — no timeline to learn
- Speed, repeat and the pause between runs on every element
- Replay the run at any time, in the editor or on the shared link
In the editor
All of this, before you pay anything.
The free editor is the whole editor. A paid plan is about where your diagrams live and who you share them with — never about which shapes you are allowed to use.
Still deciding
The questions engineers actually ask.
Six of them, with the honest answer rather than the marketing one.
Do I really not need an account?
Really. The editor opens on click and everything in it works. An account only becomes necessary when you want a second diagram, or the same one on another machine.
Where does my free diagram live?
In this browser's local storage, on this device. Clearing site data clears it — so move it to the cloud with a plan if it matters.
Can I put one in our docs site?
Yes — paste the iframe snippet anywhere that accepts one. The embed is the read-only viewer: panning, the context panel and drill-down all work, editing does not exist in that bundle.
Does the animation survive an export?
A GIF keeps it; a PNG is the resting state of the diagram, which is what you want on a slide. Both come out of the same dialog.
Am I locked into one notation?
No. A diagram's type is a label on the document, not a rulebook — put a C4 boundary on a flowchart or an ERD entity in a cloud diagram if that is what explains the thing.
Can I bring in a diagram I already have?
A whole diagram is a single file, so import it and keep editing. The format is versioned, and older documents keep opening.
Your architecture diagram is about four minutes away.
Open the canvas, drop in the services, connect them, and press play. Decide about an account later — or never.