Links that show the flow
Data dashes along the main path, streams carry packets, a comet traces the call you are explaining. Control and fallback links stay quiet. Components can glow, pulse or spin while busy.
New Draw with AI using your own key. Nothing touches our servers. →
Architecture diagrams that explain themselves.
Draw a system the way you explain it at a whiteboard. Data flows along the links, hovering a service lights up what it talks to, and clicking it tells you why it exists. Or describe the system and let any LLM draw it for you.
- No sign-up
- Saves in your browser
- Works with any LLM
Built for the systems you actually draw
What you get
Everything a whiteboard photo can't do.
A diagram in topo is a live figure. It shows how data moves, answers questions when you point at it, and walks a room through the system one step at a time.
Hover to trace
Point at any component and everything it reads from and writes to lights up. The rest steps back.
An inspector for every part
Click a component for what it does, why it is built that way, and the numbers that matter.
1 / 4
Walk people through it
Add steps and present mode plays them with the arrow keys. Good for design reviews and onboarding. Give steps a time and a status change and present mode becomes an incident replay: see 15 real outages replayed with topo.
Zones for real boundaries
Clusters, VPCs, regions, tenants. Zones size themselves, nest, and move everything inside them.
PNGup to 4×, fonts embedded
SVGanimated, plays in GitHub READMEs
Linkdiagram lives in the URL
Textdiff it, review it, commit it
Export anywhere, share without uploading
Links carry the compressed diagram in the URL, so sharing never sends it to a server. View links open straight into present mode, and one script tag embeds live diagrams in any blog or docs page.
Five canvasesTabs with their own undo history and view.
Keyboard firstEvery tool and action has a shortcut.
150+ iconsAI, data, Kubernetes, network, datacenter.
Your lookLight or dark, three fonts, four text sizes.
Made for the LLM era
Any model can draw it as well as you can.
topo is a small text format with a 3,600-token guide. Models write it the way they write Mermaid, and the result looks drawn by hand: grid layout, zone-aware spacing, routing that goes around things.
Any chat
Copy the prompt
One click copies the guide. Paste it into ChatGPT, Claude, Gemini or a local model, describe your system, and paste the reply onto the canvas.
In the app
Draw with AI
Describe it or paste a README. Bring your own Anthropic key or any OpenAI-compatible endpoint. Calls go straight from your browser to the provider.
For agents
MCP server
Coding agents can read the guide, validate, render SVG and hand you a link.
claude mcp add topo -- node topo-mcp.mjs
Examples
Open one, poke at it.
Each opens in present mode. Hover, click and step through, then edit a copy.
Draw the system you're explaining next.
It takes about five minutes, and nobody needs an account.
Open the editor →