React Flow · Next.js · TypeScript
A starter for hand-placed system maps: typed data, cards that say what they are, wires that say what they carry, and the whole canvas exported as PNG or SVG in either theme.
Not a dashboard and not a diagram tool. A map is drawn once, by hand, so that the next person can find their way through a system without asking you.
Where does a request come in?
One external caller and one public boundary, on the edge host
What decides what happens next?
Orchestrator, the one primary card on the map
Where does the result end up?
Object storage, and a report you can see on the card itself
Typed data, split in two
Identity and position in one file, values that change in another
Hand-placed, then measured
Three audits catch wires through cards, clipped text and crowded labels
Export in either theme
The whole canvas as PNG or SVG, at 1×, 2× or 3×, dark or light
Every graph reduces to one path. This is the example's, with the handoff named on the wire between the steps.
The trace scrolls sideways on its own
A system you cannot explain is a system you cannot fix. So draw it, wire by wire, from what is actually running.
Copy data/example/ and app/example/, then edit these. The renderer never imports your data, so a second map costs a folder and a route.
Who is on the map and where: cards, frames, lanes and the wires between them.
8 cards · 7 flowsThe values that change: status, latency, queue depth, capacity.
kept apart from identityTurns both into React Flow nodes and edges. Sizes live here, once.
no layout engineEvery number the page and legend print, derived from the topology.
never typed by handEach one is a React component with a fixed size, so layouts stay on a grid and the audits know what they are measuring.
service
A normal running service
primaryService
The main decision point
external
Something outside the boundary
storage
A path or capacity-bearing store
artefact
The output itself, as a picture
infra
A host frame with listeners and facts
cluster
A labelled frame around related cards
lane
A reading-order label
stat
One derived figure
bars
Ranked values with visible numbers
Node.js 22 or newer. No database, no runtime data source, no account — the example is the whole contract. Drawing with a coding agent? Add the react-flow skill.
npm ci
npm run dev
# http://localhost:3000/example
# optional, for coding agents
npx skills add existential-birds/beagle --skill react-flow