Aisol Flow Map — nodes on a grid, lines between them, Framer component

A small diagram component: labelled nodes in a grid, lines between them.

Nodes are placed by grid cell — column and row, not pixels — and the connectors are drawn in the same grid coordinates. Nothing is measured, so the diagram never drifts when a font loads or a container resizes, and the Framer canvas stays still.

• Flow reads left to right, top to bottom; each step leads to the next. No arrowheads by design — a stretched SVG marker distorts — so direction is carried by order and by wording you control.

• On phones the lines are dropped and each node says where it leads in words. The connections survive the layout change instead of vanishing with the drawing.

• A connection pointing at a missing key is skipped, never drawn wrong.

• The lines are decorative to assistive technology; the relationships are exposed once as a sentence.

• Draw-in animation on scroll, or off. Reduced motion means no animation and no observer.

• Bind a CMS collection through the node slots.

Good for a course path, an admissions flow, or any process with a branch in the middle.

How to use: copy the component in, give each node a key and a grid cell, then list the connections by key.

Live preview: https://thistle-timing-694660.framer.app/aisol-flow-map