Documentation

Diagramium is a diagram editor where diagrams explain themselves: you draw one, add a short note to each step, and press Explain — it builds itself step by step and reads your notes aloud. This guide follows the diagram below; as you read, it builds up to the step you are on.

Start in 30 seconds

1. Pick a type. Choose one from Open an editor on the home page or the Diagrams menu.
2. Pick a ready-made from the list that opens — or Blank canvas — and change the words.
3. Press Explain. It plays step by step. Then Export a PNG, PDF, GIF or video.

No account, no install. Everything below works the moment the page loads.

1 · Pick a diagram type

There are twenty-seven types — each with its own editor, and all sharing the same canvas, Explain and exports, so learning one teaches you the rest. A quick way to choose:

• Order or timing matters → Sequence or Timeline.
• Steps and decisions → Flowchart, Decision tree or Swimlane.
• Structure and relationships → Org chart, Mind map or Architecture.
• Systems and security → State machine, Data flow, Network or Threat model.

See the full list of diagram types, or read which diagram for which job.

2 · Start from a ready-made

An empty editor opens on its ready-made diagrams — more than 1,500 across all types — with Blank canvas at the top of the list. Starting from the one closest to your idea is faster than starting from nothing: open it and change the words. Explore and Search browse the whole collection, and Menu → New offers the list again at any time.

3 · Draw, edit, or type

• Drag shapes from the library on the left onto the canvas. To connect two shapes, drag from a dot on one shape's edge to the other.
• Edit a label by selecting the shape and simply typing, or by double-clicking it. ⌘Z undoes anything.
• Type instead in the Text editor tab — fast for keyboard users and easy to keep in version control. Sequence diagrams have the richest syntax:

User->WebApp: Sign in (email, password)
WebApp->Auth: Verify credentials
Auth-->WebApp: Token
WebApp-->User: Welcome back

A solid arrow -> is a call; a dashed arrow --> is a reply; anything after the colon is the label. Canvas and text are two views of one diagram — change either and the other follows.

4 · Add step notes

Every shape is a step of the explanation, in the order you added it. Press O and click the shapes in turn to change that order. In the Notes tab, write what should be said at each step — and, if you like, a short why this matters line that appears beside it.

5 · Choose a theme

The Theme tab restyles the whole diagram in one click — 23 looks, from Executive Navy and Forest to Glassmorphism, Linear Midnight and Bento Card — all free. Colours you set on a shape yourself are kept, and the Design tab fine-tunes the canvas, arrows and text.

6 · Press Explain

Explain plays your diagram full screen: shapes appear one at a time while your notes are read aloud by a voice on your own device. Step with ← / →, play or pause with Space, and exit with Esc. Record in Explain turns the show into a video file.

7 · Export

Export asks one question first — an image or an animation:

• Images: PNG, SVG (crisp at any size), PDF or a copy to the clipboard.
• Animations: an animated SVG, a GIF or a video of the Explain playback.
• Text: the plain-text form of the diagram, to paste anywhere.

An image can include the step notes and the legend beside the diagram.

8 · Save your work

Your work saves automatically in this browser as you go — reopen the tab and it is still there. To keep a diagram, move it or share it, save it as a file: Menu → File → Save (⌘S) writes a .json on your device, and Save as… (⇧⌘S) makes a copy under a new name. The toolbar shows which file you are working on; File → Open… brings one back. Nothing is uploaded — clearing your browser's site data erases the browser copy, so keep the files that matter.

9 · Put it in your own pages

That saved .json is also what diagramium-player plays — a small open-source library that puts a Diagramium diagram in any web page and lets your code drive it: themes, fonts, live data, and the story. The diagram on this page is one.

import { DiagramiumPlayer } from 'diagramium-player';
DiagramiumPlayer.fromUrl('/my-diagram.json', { container: '#diagram' });

Tuned to your skill level

Keyboard shortcuts

The Text editor tab is a complete keyboard-only path — everything the canvas can do, you can also type.

Privacy & data

Everything that matters runs in your browser: your diagrams live on your device and in the files you save, and no feature uploads them. There are no accounts and no sign-in, and the app collects nothing — no analytics, no counts. See the privacy policy.

FAQ

Is it free? Yes — every feature, free, with no account.

Does it work offline? Once the page has loaded, yes — it runs entirely in your browser.

Where are my diagrams? In your browser on this device, plus any files you save. Diagrams are never uploaded.

Can I collaborate? Send a saved .json or the Text form — a teammate opens it and keeps editing.

Still stuck? Browse the diagram types, read the blog, or just open the editor and experiment.