System Architecture Map

Gateway, auth, API, queue and database — a living diagram generated from your infra.

Drag nodes, pan and zoom — this is a live React Flow canvas.

How it works

A parser converts infrastructure-as-code into nodes and edges, ELK lays out nested groups, and the diagram regenerates on every deploy so it never goes stale.

Source code

tsx

const graph = parseTerraform(state);
const layouted = await elkLayout(graph, { algorithm: "layered" });