Four diagrams describing the stack, each generated from a single source definition:
| Diagram | Question it answers |
|---|---|
| 01 — System architecture | Which components exist, and what depends on what? |
| 02 — Collector pipelines | How does a signal travel from receiver to backend? |
| 03 — Deployment topology | What actually runs, on which network, with which ports and volumes? |
| 04 — Signal correlation | Why can one request be followed across metrics, traces and logs? |
| File | Purpose |
|---|---|
<name>.excalidraw |
Editable source — drag it onto excalidraw.com or open it with the Excalidraw VS Code extension. |
<name>.svg |
Rendered output — embedded in README.md and the docs, and safe to drop onto a website. |
Both are written by the same generator, so they always show the same thing.
node tools/diagrams/build.mjsNo dependencies — plain Node.js (18+). The generator lives in
tools/diagrams/:
lib.mjs— style tokens, element factories (boxes, bands, orthogonal connectors, legends) and the SVG writerbuild.mjs— the four diagram definitions
The diagrams deliberately avoid the Excalidraw hand-drawn look, in favour of a flat, technical
"Visio" style: roughness: 0, square corners, solid fills, a Helvetica-class font, an Office-style
blue/green/orange/purple palette, and orthogonal connectors with labels on the segments.
If you edit an .excalidraw file by hand, keep the new shapes consistent with that style — or make the
change in build.mjs instead, which is the actual source of truth. Hand edits are overwritten the next
time the generator runs.