Turn a Mermaid diagram into a live control surface.
Mermaid renders a picture of your system. live-diagram makes that picture the system's control panel. Bind any diagram to a live state source — nodes light up as work runs, carry badges and data, and emit clicks back to your app.
Paste the Mermaid diagram you already have, add state, share the URL. No rewrite, no build.
start here →Mermaid source in; parallel stages, ticking badges, and the path lighting up as it is taken.
the 5-second version →Clicking a state fires the transition into it — illegal moves are refused. Events out, not just in.
the diagram as an input device →Scrub a finished run backwards and forwards. Same component, different clock.
the part nothing else does →The /jobs API mapped straight onto a diagram — stages inferred, failures in red, replayable.
A polling source drives the diagram. Break the database and watch it degrade.
one line of integration →<div id="diagram" style="height:420px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
<script src="https://unpkg.com/live-diagram/dist/live-diagram.umd.min.js"></script>
<script>
const diagram = new LiveDiagram({
mount: '#diagram',
graph: {
direction: 'LR',
nodes: { build: { label: 'Build' }, test: { label: 'Test' }, ship: { label: 'Ship' } },
edges: [{ from: 'build', to: 'test' }, { from: 'test', to: 'ship' }]
}
});
diagram.patch({ build: 'success', test: { state: 'running', badge: '4s' } });
diagram.on('nodeClick', ({ id }) => console.log('clicked', id));
</script>