Turn your tangle of automations into a living map

Every team past a certain size ends up with the same invisible mess: a few n8n workflows, a couple of Airtable automations, a cron job or two, a handful of webhooks — each built by a different person on a different afternoon. Individually they're fine. Collectively, nobody holds the whole picture, so nobody notices when one link quietly breaks and a downstream step stops firing.

This guide builds the antidote: a single living map of every automation you run. Each one becomes a star, positioned by where it sits in your lifecycle (capture → enrich → route → engage → report), colored by health, ringed by the platform it runs on. You can zoom the whole galaxy, drill into one lifecycle stage as a clean "metro line", spotlight a broken chain on hover, and share the exact framing as a URL.

The techniques that make it feel alive rather than like a static diagram:

• Data-first modelling — an automation is reduced to the handful of fields the map actually draws.
• Deterministic layout — golden-angle packing, identical on server and client (no hydration drift) and stable across reloads.
• One requestAnimationFrame — a single loop eases the camera and publishes the zoom as a CSS variable, so labels counter-scale in CSS with zero React re-renders per frame.
• Drill-down + spotlight — overview to metro-line, and a hover that lights only the dependency chain.