A general-purpose visualization engine: one renderer, one animation vocabulary, one camera, one inspector. Plain script files — no build step, no dependencies. Include five files and you have a live, navigable diagram in any page.
Position
The engine draws anything with structure: services and the calls between them, hosts and the traffic crossing them, processes, orgs, pipelines. The vocabulary is generic — nodes, edges, tiers, groups, tags — and it says nothing about what the diagram is about.
It grew out of a network drawing tool, and it still draws networks well. But the engine doesn't even know the word VLAN: a coloured category is just a tag, a flow is just a sequence of hops, and a tour is just narrated steps with a camera contract. The network is one domain among many, not the shape of the API.
Drawing
Top-to-bottom bands (or left-to-right columns). A row that outgrows the stage grows the stage — bands never overlap.
Padded boxes around related nodes, contiguity preserved by the ordering passes. Collapse, filter, solo.
Derived: structural data becomes geometry. Pinned: the author owns every coordinate. Everything downstream is identical.
Glyphs, pills, metrics, badges, states, drill-down chevrons — each reserving its own space in the layout.
Curved, soft-metro, or metro; fanout or point attachment; three avoidance levels. Same-side edges spread along the box instead of stacking.
Open or strict containment, focus with children, hidden groups re-derive the layout — no ghost geometry.
Motion
Packets ride the routed edge path — there is no second geometry model. A flow is a sequence of hops; rules describe what the infrastructure does underneath, and their packets run smaller and faded. Hops are what the orchestrator does; rules are what the machine does.
Live mode runs a virtual clock and fires flows on authored 5-field cron schedules — one simulated minute per real second — so a stagger you wrote down is the stagger you see. Interval scheduling can't express that; the engine's clock can.
Tours are data: steps with narration, focus, highlights, traces, and per-step camera. The engine defines the schema and provides every primitive a step needs; the step player is yours — the one in Stratum is the reference implementation, and it plays any tour the schema describes.
The camera has three modes (fit, width, free), frames the content rather than the empty stage, re-centres a focused node when the page resizes, honours trackpad pinch, and respects reduced motion.
Integration
Five files, included in order, plus a small markup shell the engine paints into:
<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:
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. Capability profiles turn whole subsystems off (search, live mode, tours, the inspector) — a consumer runs exactly what it wants. Theming is a set of token variables; pinning is a versioned tarball with a checksum, consumed as a generated dependency.
The full contract — the markup shell, the data shape, every key — is in the README. It is the documentation.
Proof
Stratum is the authored side: diagrams you design, tours you narrate, a static inspector. Aquarium is the live side: a glass box over running systems, a dynamic inspector, a narrator that compiles observed traffic into tour steps. Different products, different inspectors, the same renderer and the same animation vocabulary — which is the point. Both consume a pinned engine revision; the copy in each tree is generated, never edited.
Comparison
Mermaid is text-to-diagram: excellent for the diagram in the doc, static by design — no camera, no inspector, no traffic, no live mode. D3 and the other charting libraries are parts: they give you scales and selections, and you build the renderer, the layout, and the animation language yourself. The network-diagramming tools do one domain and bundle an app with it. Stratum Engine is the middle: a finished renderer and a generic vocabulary, shipped as five files you own.
Provenance
Stratum Engine is licensed under the MIT License, copyright toks.love. toks.love developed it 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.
Consumers pin a release and verify its checksum. Upgrades are a re-fetch, not a merge.