VisualFlow

ETL Data Pipeline

Source to warehouse: Postgres and Kafka feed dbt models that land in Snowflake.

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

How it works

Pipeline stages lay out left to right with dagre. Edge labels carry row counts and node colours reflect health from a polling feed.

Source code

tsx
const layouted = dagreLayout(nodes, edges, { rankdir: "LR" });
<ReactFlow nodes={layouted.nodes} edges={layouted.edges} fitView />