flowgraph

Tiny, zero-dependency, themeable, animated node-link diagrams. Give it nodes (with positions) and edges (by id); it renders an SVG with orthogonal "elbow" connectors, a flowing dashed current, and traveling pulse dots — the operating-graph / architecture picture that's a pain to hand-draw. ~150 lines, no build step.

Install

Copy flowgraph.js and flowgraph.css into your project, or:

<link rel="stylesheet" href="flowgraph.css">
<script src="flowgraph.js"></script>

It also works as an ES/CommonJS module (const flowgraph = require('flowgraph')).

Use

flowgraph(document.querySelector('#graph'), {
  nodes: [
    { id: 'src',  x: 300, y: 20,  w: 200, h: 62, title: 'SOURCE', sub: 'the input' },
    { id: 'work', x: 300, y: 170, w: 200, h: 62, title: 'WORKER', sub: 'does the thing', cat: 'accent' },
    { id: 'ok',   x: 80,  y: 320, w: 180, h: 56, title: 'DONE',   cat: 'ok' },
    { id: 'err',  x: 540, y: 320, w: 180, h: 56, title: 'RETRY',  cat: 'alert' },
  ],
  edges: [
    { from: 'src',  to: 'work', label: 'run' },
    { from: 'work', to: 'ok',   label: 'pass', cat: 'ok' },
    { from: 'work', to: 'err',  label: 'fail', cat: 'alert', dashed: true },
  ],
})

Open index.html for a live demo.

API

flowgraph(container, spec, opts) — renders into container (replacing its contents) and returns the <svg>.

spec.nodes[] — { id, x, y, w, h, title?, sub?, cat?, rx? }. Positions are yours (flowgraph is a renderer, not an auto-layout engine — you decide where nodes go).

spec.edges[] — { from, to, label?, cat?, dashed?, d?, lx?, ly? }. Routed automatically from from→to. Pass an explicit SVG path d to override the router for feedback loops or shared buses; lx/ly place the label.

opts — { padding = 20, pulse = true }.

Theming

Everything is styled through CSS custom properties, so it inherits your page's theme (light or dark). Set a color per category (cat) as --fg-<cat>:

#graph .flowgraph {
  --fg-ink: #1a1a1a;      /* node title text */
  --fg-ink-soft: #666;    /* node subtitle */
  --fg-edge: #999;        /* default edges + nodes */
  --fg-accent: #d4af37;
  --fg-ok: #2e7d32;
  --fg-alert: #c62828;
}

Respects prefers-reduced-motion (drops the flow animation and pulses).

Why

We kept hand-writing this exact style of diagram — orthogonal routing, animated flow, themeable — over and over, so we pulled it out into one small file. If you've ever fought SVG to draw a clean architecture diagram, this is for you.

License

MIT — do anything, no attribution required. Contributions welcome.