logoImejis.io

Sankey Diagram component

Datatype: "sankey"

A Sankey diagram — flows between nodes with band widths proportional to value, for budgets, user journeys and conversion paths at a glance.

Edit it — this is the actual editor panel
Design JSON
{
  "title": "Sankey sample",
  "description": "A signup-to-paid user-flow diagram",
  "dimensions": {
    "width": 820,
    "height": 440
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-sankey",
      "key": "sankey",
      "type": "sankey",
      "position": {
        "x": 40,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 740,
        "height": 360
      },
      "dynamic": true,
      "properties": {
        "links": [
          {
            "source": "Visits",
            "target": "Signup",
            "value": 620
          },
          {
            "source": "Visits",
            "target": "Bounce",
            "value": 380
          },
          {
            "source": "Signup",
            "target": "Activated",
            "value": 410
          },
          {
            "source": "Signup",
            "target": "Dormant",
            "value": 210
          },
          {
            "source": "Activated",
            "target": "Paid",
            "value": 180
          },
          {
            "source": "Activated",
            "target": "Free",
            "value": 230
          }
        ],
        "linkColorMode": "gradient",
        "showValues": true,
        "valueFormat": "compact",
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Sankey Diagram examples

Real renders of the sankey diagram — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

User-flow diagram

Visits split into signup vs bounce, then activation and paid conversion.

API overrides for this example
{
  "sankey.links": [
    {
      "source": "Visits",
      "target": "Signup",
      "value": 620
    },
    {
      "source": "Visits",
      "target": "Bounce",
      "value": 380
    },
    {
      "source": "Signup",
      "target": "Activated",
      "value": 410
    },
    {
      "source": "Signup",
      "target": "Dormant",
      "value": 210
    },
    {
      "source": "Activated",
      "target": "Paid",
      "value": 180
    },
    {
      "source": "Activated",
      "target": "Free",
      "value": 230
    }
  ],
  "sankey.showValues": true
}

Budget allocation

Revenue flowing into departments and then cost categories.

API overrides for this example
{
  "sankey.links": [
    {
      "source": "Revenue",
      "target": "Engineering",
      "value": 420
    },
    {
      "source": "Revenue",
      "target": "Sales",
      "value": 300
    },
    {
      "source": "Revenue",
      "target": "Ops",
      "value": 180
    },
    {
      "source": "Engineering",
      "target": "Salaries",
      "value": 320
    },
    {
      "source": "Engineering",
      "target": "Cloud",
      "value": 100
    },
    {
      "source": "Sales",
      "target": "Salaries",
      "value": 210
    },
    {
      "source": "Sales",
      "target": "Ads",
      "value": 90
    },
    {
      "source": "Ops",
      "target": "Salaries",
      "value": 120
    },
    {
      "source": "Ops",
      "target": "Tools",
      "value": 60
    }
  ],
  "sankey.valueFormat": "currency",
  "sankey.showValues": true
}

All sankey diagram styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

Gradient bandsFlow bands blend from the source color to the target color.
Flat bandsBands take a single source color — cleaner for dense diagrams.
DarkA vivid flow diagram on a dark card for social and dashboards.

Use cases

What developers typically build with the sankey diagram component.

  • User-journey / conversion-path flows for growth reports
  • Budget and spend allocation diagrams for finance
  • Traffic-source → page → outcome flows for analytics
  • Energy / material flow visuals

Use it dynamically via the API

Push fresh flows per render with '<key>.links' (or just '<key>') as [{ source, target, value }]; node colors via '<key>.nodes'.

Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "sankey.links": [
        {
            "source": "Visits",
            "target": "Signup",
            "value": 620
        },
        {
            "source": "Visits",
            "target": "Bounce",
            "value": 380
        },
        {
            "source": "Signup",
            "target": "Activated",
            "value": 410
        },
        {
            "source": "Signup",
            "target": "Dormant",
            "value": 210
        },
        {
            "source": "Activated",
            "target": "Paid",
            "value": 180
        },
        {
            "source": "Activated",
            "target": "Free",
            "value": 230
        }
    ],
    "sankey.linkColorMode": "gradient",
    "sankey.showValues": true,
    "sankey.valueFormat": "compact",
    "sankey.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Property reference

Every property the sankey diagram component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
linksobject[]text[]Flows: array of { source, target, value } — names reference the nodes.
nodesobject[]text[]Optional node colors/order: [{ name, color }]; derived from links otherwise.
colorscolor[]text[]Node palette (cycled) when a node has no explicit color.
nodeWidthnumber1414Width of the node bars (px).
nodePaddingnumber1212Vertical gap between nodes in a column (px).
linkColorMode'gradient' | 'source' | 'target'gradientsourcetarget"gradient"Band color: gradient (source→target), source, or target.
linkOpacitynumber0.450.45Opacity of the flow bands.
nodeLabelColorcolor#334155"#334155"Node label text color.
showValuesbooleanfalsefalseAppend each node's total flow to its label.
valueFormat'number' | 'compact' | 'percent' | 'currency'numbercompactpercentcurrency"compact"How printed values are formatted (1,200 / 1.2K / $1,200).
currencySymbolstringtext"$"Symbol used with the 'currency' format.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Send '<key>.links' as an array of { source, target, value } — node names are matched by string and each band's width is proportional to its value.

Nodes are placed in columns automatically by flow direction (sources on the left, sinks on the right); keep the graph acyclic for the cleanest layout.

Pass a colors palette or per-node colors via nodes[]; linkColorMode sets whether bands blend source→target ('gradient') or take the source/target color.

Enable showValues to append each node’s total flow to its label; valueFormat controls the number style.