animated-mermaid-diagrams · rev 1.0.0

Diagrams that draw themselves.

Step-by-step animation for 13 Mermaid diagram types — sequence to sankey, flowchart to git graph. The same layout engine as Mermaid, one script tag, ~45 KB.

npm install animated-mermaid-diagrams

FIG. 00 — SEQUENCE, LIVE

An order placed across six services

Every arrow is one step — watch the request travel, fail, retry, and confirm. Scroll away and back and it replays.

READY

source

FIG. 01 — SEQUENCE

Frames and activations

alt/else frames, notes, and activation bars — parsed from plain Mermaid text.

source

FIG. 02 — FLOWCHART

Decisions, tier by tier

Nodes reveal a tier at a time; each edge draws itself to connect them.

source

FIG. 03 — STATE MACHINE

Under manual control

Drive the controller yourself — or focus the diagram: ←/→ step, Space pauses and resumes, Home resets.

source

const ctrl = stateDiagram(el, {
  states: [
    { id: 'idle', text: 'Idle' },
    { id: 'loading', text: 'Loading' },
    { id: 'ready', text: 'Ready' },
    { id: 'error', text: 'Error', highlight: 'red' },
  ],
  transitions: [
    { from: 'idle', to: 'loading', label: 'fetch()' },
    { from: 'loading', to: 'ready', label: 'success' },
    { from: 'loading', to: 'error', label: 'failure' },
    { from: 'error', to: 'loading', label: 'retry()' },
    { from: 'ready', to: 'idle', label: 'reset()' },
  ],
  initial: 'idle',
  options: { trigger: 'manual', keyboard: true },
})
// ctrl.play() / .pause() / .resume() / .goToStep(n) / .reset()

FIG. 04 — FLOWCHART, INTERACTIVE

Click to explore

Click a lit node (or focus it and press Enter) to open its branches. Nothing runs on a timer.

source

FIG. 05 — SEQUENCE, INTERACTIVE

Click to step

Click the diagram to advance one message at a time.

source

FIG. 06 — STATE MACHINE

Composite states

state Working { … } renders as a container; transitions cross its border.

source

FIG. 07 — AUTO-INIT, CLASS MARKER

The Mermaid convention

Put your Mermaid text in a <pre class="animated-mermaid-diagrams"> and call init() once — the block becomes a live diagram. Coming from Mermaid's <pre class="mermaid">? Just change the class.

sequenceDiagram
  actor User
  participant App
  User->>App: Hello
  App-->>User: Hi

source

<pre class="animated-mermaid-diagrams">
sequenceDiagram
  actor User
  participant App
  User->>App: Hello
  App-->>User: Hi
</pre>

<script>AnimatedMermaidDiagrams.init()</script>

FIG. 08 — AUTO-INIT, DATA ATTRIBUTE

Any element, options in markup

Add data-animated-mermaid to any element that holds Mermaid text, and set options as attributes — data-amd-theme, data-amd-trigger, or data-animated-mermaid="click" for click-to-explore. Try it below: click a node.

flowchart LR A[Write markup] --> B[Call init] B --> C[Diagram]

source

<div data-animated-mermaid="click" data-amd-trigger="immediate">
flowchart LR
  A[Write markup] --> B[Call init]
  B --> C[Diagram]
</div>

<script>AnimatedMermaidDiagrams.init()</script>

<!-- the marker value is shorthand for data-amd-advance="click";
     any option travels as data-amd-*: theme, trigger, advance,
     keyboard, step-duration, step-delay, width, height, padding … -->

FIG. 09 — USER JOURNEY

Scored tasks, one face at a time

New in 0.3.0. Each task is one animation step — its face and height track the 1–7 score, and section bands appear with their first task.

source

FIG. 10 — TIMELINE

Periods and their events

New in 0.3.0. Each period pops onto the spine with its events stacking below; : continuation lines add more events to a period.

source

FIG. 11 — CLASS DIAGRAM

Hierarchies, compartment by compartment

New in 0.4.0. Layer by layer: interfaces and generics, dashed realizations with hollow triangles, composition and aggregation diamonds with cardinalities, dependencies, and a self-relation.

source

FIG. 12 — ENTITY RELATIONSHIP

Crow's feet, one relationship at a time

New in 0.4.0. Entities pop in with typed attribute rows and PK/FK badges; relationships draw with crow's-foot cardinality at both ends, dashed when non-identifying.

source

FIG. 13 — PIE CHART

One slice at a time

New in 0.5.0. Slices fade in clockwise with their legend rows; showData puts the raw values in the legend, percentages live in the slices.

source

FIG. 14 — GANTT CHART

Bars grow along the timeline

New in 0.5.0. Each bar draws left-to-right in time order — after dependencies resolve automatically, milestones pop as diamonds, and done/active/crit take status colors.

source

FIG. 15 — MINDMAP

Branch by branch

New in 0.6.0. The root pops first, then each branch grows outward node by node — branches alternate sides and keep their own color.

source

FIG. 16 — SANKEY

Flows, one ribbon at a time

New in 0.6.0. Nodes size themselves to their throughput; each flow ribbon fades in with thickness proportional to its value.

source

FIG. 17 — GIT GRAPH

History, commit by commit

New in 0.6.0. Commits land dot by dot along their branch lanes; branch-offs curve away and merges curve back, tags ride above.

source

FIG. 18 — ARCHITECTURE

Services, then the wiring

New in 0.6.0. Group boxes appear, service cards pop in with their icons, then the connections draw between the requested edges.

source