Documentation, transformed
The same documentation page, two ways. Before has the diagram most docs have: a picture at the
top. After plays the same diagram with diagramium-player, pinned above the text and in step
with it as you read.
Getting started with Diagramium
A real guide: how to use Diagramium itself — types, ready-mades, notes, themes, Explain, export, save.
Static diagram
Nine steps under one picture. By step five the picture is off the screen.
After — diagramium-playerAnimated, synced diagram
The diagram follows you down the page and highlights the step you are reading. Try the theme switch.
How checkout works
A made-up API guide for a shop: one POST /v2/orders, from the request to the receipt email.
Static diagram
One image above eight sections. The reader has to match "step 5" to a box they can no longer see.
After — diagramium-playerAnimated, synced diagram
The diagram builds up as you read. Or press Play the tour and it walks you through.
| Static image | diagramium-player | |
|---|---|---|
| Where the diagram is | At the top, scrolled away | Pinned above the text, always in view |
| Which part is this section about? | The reader has to find it | Highlighted, built up to this step |
| First-time readers | Everything at once | One step at a time, or a guided tour |
| Keeping it up to date | Re-export an image | Edit the diagram, File → Save, replace one .json |
| Matches your site | Whatever the image looks like | setTheme(), setFont() or your own colours |
In each pair, both pages use one file drawn in the
Diagramium editor (getting-started.json,
checkout-flow.json); the static picture is the editor's SVG export of it. The whole integration is
sync-docs.js
— about 90 lines to copy into your own docs — and two lines per page:
import { syncDocs } from './sync-docs.js';
syncDocs({ file: './getting-started.json', theme: 'glassmorphism' });