Systems Lab UI

Build an explorable explanation of a real system. Treat the canvas as executable documentation, not decoration.

Workflow

1. Compile the system into visual facts

   • Inspect the code, contracts, docs, and runtime data before drawing.
   • Inventory actors, durable records, interfaces, transitions, identities, queues, waits, and pressure points.
   • Finish when every proposed card and connection has a named semantic owner.

2. Select the host

   • Reuse the project's existing application shell, design system, dependencies, and routing.
   • Prefer React Flow when the topology is movable, stateful, or has crossing connections.
   • Use ordinary layout or SVG only for small, static diagrams.