Stratum Engine is a plain-JavaScript rendering engine for structural diagrams — the drawings where a box is a node, a line is a relationship, and both carry meaning. It ships as five script files and a stylesheet: no build step, no dependencies, no framework. A consumer includes the files, hands the engine a data object describing tiers, nodes, links, and flows, and the engine does the rest: tiered layout, edge routing that keeps lines clear of the boxes they pass, packet animation along the routed path, a camera with fitted and sticky modes, and a node inspector fed by authored notes or a live provider. The diagrams on this page are exactly that contract in action — data in, drawing out — with the tours and the moving traffic driven by the same schemas a product would use.
Service topology with live request traffic. The inspector is fed from your real metrics; the traffic is your real flow.
flows / live provider / tag colours
A factory floor: the batch is a packet, the line is the graph, and rework is an edge that runs the wrong way on purpose.
multi-hop flows / pills / declared order
A narrated tour of the system for a new engineer: steps bind to nodes, the camera obeys a contract, and nothing is a video.
tours / focus / trace dimming
Pinned before/after drawings of an infrastructure proposal. Strict containment keeps a host a sealed box until you step inside.
pinned placement / containment
Generation as tiers, the backbone as a bulkhead, the mix as tags, and the load as traffic you can watch move.
bulkheads / tags / flows
Departments as groups, spans as drill-down, and a decision as a packet that can travel upstream.
groups / drill-down / upward flows
| Stratum Engine | Mermaid | D3 (roll your own) | react-flow | Graphviz | |
|---|---|---|---|---|---|
| In-app interactive component | ✓ | — | you build it | ✓ | — |
| Automatic tiered layout | ✓ | partial | you build it | you build it | partial |
| Edge routing with obstacle avoidance | 3 styles × 3 avoidance | — | you build it | basic | ✓ (static) |
| Packet/flow animation on the path | ✓ | — | you build it | you build it | — |
| Virtual clock + cron live mode | ✓ | — | you build it | you build it | — |
| Tour schema + camera contract | ✓ | — | you build it | — | — |
| Inspector (static or live provider) | ✓ | — | you build it | partial | — |
| Camera: content framing, sticky focus | ✓ | — | you build it | pan/zoom | — |
| Framework required | none | none | none | React | server |
| Build step | none | optional | yours | yours | yours |
If you need a static SVG in a doc, Mermaid is less work. If you need fully bespoke visualization, D3 is the right tool. If you're already in React and only need a draggable node graph, react-flow will do. Stratum Engine is for when the diagram is a surface of your product — navigable, alive, narrated — and you want it embedded, not imported.
Five files, included in order, plus a small markup shell the engine paints into — the shell this page itself provides:
<script src="layout.js"></script> <script src="render.js"></script> <script src="flow.js"></script> <script src="profile.js"></script> <link rel="stylesheet" href="engine.css">
Then the paint loop — estimate, paint, measure, recompute — on every change. The same loop runs on this page:
// the two-pass paint: text is estimated, painted, measured, recomputed
let L = LAYOUT.compute(D, state.focus, state.hidden);
RENDER.paint(D, L, state);
const measured = RENDER.measureNodes();
L = LAYOUT.compute(D, state.focus, state.hidden, measured);
RENDER.paint(D, L, state);
Selection is yours. You wire the clicks, own the state, and call the engine's actions — the engine reflects the selection and gives you the moves (panel, focusNode, trace dimming, packets). Profiles turn whole subsystems off; a consumer runs exactly what it wants. Theming is a set of token variables — the four tabs above are the same page re-skinned by swapping tokens, one line of code per theme. Pinning is a versioned tarball with a checksum, consumed as a generated dependency: an upgrade is a re-fetch, not a merge.
The full contract — the markup shell, the data shape, every key, the resize wiring, the tour schema — is in the README. It is the documentation.
Stratum Engine is licensed under the MIT License, copyright toks.love. It has been in use at toks.love and a few select clients before it went public — powering an authored diagramming tool and a live operations console, both of which consume a pinned engine revision.
toks.love developed Stratum Engine with AI assistance: an agent wrote most of the code under the careful direction and review of toks.love; toks.love owns the code, as well as any mistakes or omissions.