---
title: "Aisol Flow Map — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Aisol Studio · Maps. Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them."
canonical: "https://framer.elliotli.dev/component/aisol-flow-map"
---

[Home](/)/[Components](/components)/[Maps](/components/category/maps)/Aisol Flow Map

# Aisol Flow Map

Steps, and the lines between

[View on Framer](https://framer.com/marketplace/components/aisol-flow-map/?via=elliot-li)

![Aisol Flow Map preview image 1](https://framer.elliotli.dev/og/component/aisol-flow-map/fd2109c3a519457c/1600x1200.jpg)

## Summary

Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them.

## Description

Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them. Use it for a course path, an admissions flow, a process with a branch in the middle.

Nodes are placed by grid cell — column and row, not pixels — and the connectors are drawn in the same grid coordinates. That is the whole trick: nothing is measured, so the diagram cannot drift 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. There are no arrowheads by design — a stretched SVG marker distorts — so direction is carried by the order and by wording you control.

\- Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached.

\- Nothing is measured. No getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work.

\- The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state.

What you control

• Nodes: key, label, note, grid column and row, tone (default / accent / optional), link

• Connections: from, to, dashed or solid, and which way the elbow turns

• Grid size, gap, radius, line width, line colour

• Draw-in animation with duration and stagger, or off

• Heading level, text size, five colours

• Bind a CMS collection through the node slots

• Map name for screen readers, the leads-to wording used on phones, and the empty-state text

On phones the lines are dropped and each node says where it leads in words — the connections survive the layout change instead of disappearing with the drawing. A connection pointing at a key that does not exist is skipped rather than drawn wrong, and screen readers get the relationships as a sentence.

More components at Aisol Studio → https://thistle-timing-694660.framer.app/

## Rank history [How rankings work →](/terms#rankings)

-   All · #9584

## Details

- **Author**: Aisol Studio
- **Price**: $8.00
- **Published**: 2026-09-03
- **Updated**: 2026-10-02
- **Added**: 2026-09-03
- **Categories**: Maps

## More like this

-   [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map
-   [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key
-   [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase
-   [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…