Dark sankey diagram

Sankey Diagram styletype: "sankey"

Generate dark-mode Sankey diagram images — vivid gradient flows on a dark card for social and dashboards. Fresh flows per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Sankey sample",
  "description": "A signup-to-paid user-flow diagram",
  "dimensions": {
    "width": 820,
    "height": 440
  },
  "background": {
    "color": "#0f172a"
  },
  "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,
        "nodeLabelColor": "#e2e8f0",
        "linkOpacity": 0.55
      }
    }
  ]
}

Sankey Diagram examples

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

Dark user flow

A signup-to-paid journey on slate with gradient bands.

API overrides for this example

{
  "sankey.nodeLabelColor": "#e2e8f0",
  "sankey.linkColorMode": "gradient",
  "sankey.linkOpacity": 0.55,
  "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
    }
  ]
}

Dark budget flow

Revenue into departments and costs on a near-black card.

API overrides for this example

{
  "sankey.nodeLabelColor": "#e2e8f0",
  "sankey.linkColorMode": "gradient",
  "sankey.linkOpacity": 0.55,
  "sankey.links": [
    {
      "source": "Revenue",
      "target": "R&D",
      "value": 380
    },
    {
      "source": "Revenue",
      "target": "GTM",
      "value": 300
    },
    {
      "source": "R&D",
      "target": "Salaries",
      "value": 300
    },
    {
      "source": "R&D",
      "target": "Cloud",
      "value": 80
    },
    {
      "source": "GTM",
      "target": "Salaries",
      "value": 200
    },
    {
      "source": "GTM",
      "target": "Ads",
      "value": 100
    }
  ],
  "sankey.valueFormat": "currency"
}

When to use the dark style

Dark-theme growth / journey cards
Dashboard flow exports on dark backgrounds
Social graphics for funnels & budgets

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 this variant'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,
    "sankey.nodeLabelColor": "#e2e8f0",
    "sankey.linkOpacity": 0.55
}'

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

Other sankey diagram styles

Default Gradient bands Flat bandsDark

See the sankey diagram component page for the full property reference and FAQs.