5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T749,

■ What it does

Sankey Flow Diagram shows where things come from and where they go — traffic sources to landing pages to sign-ups, budget to channels to results, customers through a journey. You only list the flows (From, To, Value). The component finds the nodes, sorts them into columns, sizes every ribbon by its value and draws smooth curved bands. No manual positioning, no nested frames.

Hover any node or ribbon and the whole path it belongs to lights up while everything else fades back.

■ Customizable properties

- Links — From, To and Value for each flow (same name = same node)

- Direction — Horizontal, or Vertical for mobile layouts

- Labels — Name, Name + Value, Name + %, Name + Value + %, or None

- Link Color — Gradient (from node color to node color), From Node, To Node or Neutral

- Hover — Full Path, Direct Only or Off, plus Dim Opacity

- Align Ends — pull end nodes into the last column

- Tooltip — flow value and share on hover

- Prefix / Suffix — "$", "€", " visits" and more

- Node Width, Node Gap, Node Radius, Link Opacity, Padding

- Palette and per-node color overrides

- Label and Background colors, Font, Alt Text for screen readers

■ Need help?

Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours.

Custom edits are available from $75/hr.

Explore more components at BrandingUp → https://brandingupstudio.com

Built with code but fully customizable via property controls — no coding needed.

Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component.

58:[["$","$L5b",null,{"post":{"id":"01a11fcc-8e71-7684-ab2d-e1da7436ac59","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rDyRPvKnMMFkSN7gJ2G9","resolved":true,"title":"07 Sankey Diagram","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Sankey Flow Diagram shows where things come from and where they go — traffic sources to landing pages to sign-ups, budget to channels to results, customers through a journey. You only list the flows (From, To, Value). The component finds the nodes, sorts them into columns, sizes every ribbon by its value and draws smooth curved bands. No manual positioning, no nested frames."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover any node or ribbon and the whole path it belongs to lights up while everything else fades back."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"- Links — From, To and Value for each flow (same name = same node)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction — Horizontal, or Vertical for mobile layouts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Labels — Name, Name + Value, Name + %, Name + Value + %, or None"}]},{"type":"paragraph","content":[{"type":"text","text":"- Link Color — Gradient (from node color to node color), From Node, To Node or Neutral"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hover — Full Path, Direct Only or Off, plus Dim Opacity"}]},{"type":"paragraph","content":[{"type":"text","text":"- Align Ends — pull end nodes into the last column"}]},{"type":"paragraph","content":[{"type":"text","text":"- Tooltip — flow value and share on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"- Prefix / Suffix — \"$\", \"€\", \" visits\" and more"}]},{"type":"paragraph","content":[{"type":"text","text":"- Node Width, Node Gap, Node Radius, Link Opacity, Padding"}]},{"type":"paragraph","content":[{"type":"text","text":"- Palette and per-node color overrides"}]},{"type":"paragraph","content":[{"type":"text","text":"- Label and Background colors, Font, Alt Text for screen readers"}]},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"Explore more components at BrandingUp → "},{"type":"text","text":"https://brandingupstudio.com","marks":[{"type":"link","attrs":{"href":"https://brandingupstudio.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls — no coding needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component."}]}]},"introduction":"Auto-layout flows with hover paths","slug":"07-sankey-diagram","author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a11fca-e1b5-7692-9b46-7041f60d230c.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T08:34:21.244Z","updatedAt":"2026-10-09T11:04:46.255Z","publishedAt":"2026-10-09T08:34:21.241Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://small-convention-270138.framer.app/sankey-diagram","price":"15","paymentUrl":"https://brandingup.lemonsqueezy.com/checkout/buy/df55731b-ad61-4d34-8959-a00e7b185be1","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"ueP8Uu6z4Ea4akdZq58Y","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-09T08:34:21.937Z","updatedAt":"2026-10-09T08:34:21.937Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you