Live Diagram

Quick Start

Running in about five minutes

Drop in one script, point it at a Mermaid block, and the diagram becomes interactive. No build step, no framework.

1. Add the script

<script src="https://cdn.jsdelivr.net/gh/jedionthefly/live-diagram/dist/live-diagram.min.js"></script>

2. Mark up a diagram

<div class="live-diagram">
  graph TD
    A[Idea] --> B[Signal]
    B --> C[Sprint]
    C --> D[Ship]
</div>

3. Bring it to life

LiveDiagram.mount('.live-diagram', {
  toggles: true,   // click nodes to collapse branches
  reshape: true    // drag to reflow the graph
});

That is the whole surface. Every node is now clickable, branches collapse on tap, and the layout reflows as you go.

Dev Docs

How it works under the hood

Live Diagram parses the Mermaid source into a small graph model, renders it to SVG, then keeps a live binding between the two. Interactions mutate the model, and the SVG re-renders from it. No virtual DOM, no dependencies, just the graph and the drawing kept in sync.

Options

LiveDiagram.mount(selector, {
  toggles:   true,      // collapsible branches
  reshape:   true,      // drag-to-reflow layout
  direction: 'TD',      // TD | LR | BT | RL
  onChange:  (model) => {}  // fires on every edit
})

The graph model

Every mount returns a handle. Read the current state with handle.model (nodes and edges as plain objects), or drive it from code with handle.toggle(id), handle.focus(id), and handle.reset(). The onChange callback hands you the full model after each interaction, which is how we wire diagrams to the rest of an app.

The parser, model, and render path each carry their own tests, 87 in all, so a diagram that mounts clean stays clean as your graph grows.

Use Cases

Where we reach for it