Flat bands sankey diagram
Sankey Diagram styletype: "sankey"Generate Sankey diagrams with flat source-colored bands — cleaner for dense flows — set per API call. Create flow diagrams free with Imejis.
Design JSON — “Flat bands” variant
{
"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": "source",
"showValues": true,
"valueFormat": "compact",
"opacity": 1,
"linkOpacity": 0.4
}
}
]
}Sankey Diagram examples
Real renders of the flat bands sankey diagram — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Energy flow
Primary sources flowing to sectors, colored by source.
API overrides for this example
{
"sankey.linkColorMode": "source",
"sankey.linkOpacity": 0.4,
"sankey.links": [
{
"source": "Solar",
"target": "Grid",
"value": 120
},
{
"source": "Wind",
"target": "Grid",
"value": 200
},
{
"source": "Gas",
"target": "Grid",
"value": 300
},
{
"source": "Grid",
"target": "Homes",
"value": 340
},
{
"source": "Grid",
"target": "Industry",
"value": 280
}
]
}Spend breakdown
Budget flowing from teams into cost buckets, flat source colors.
API overrides for this example
{
"sankey.linkColorMode": "source",
"sankey.linkOpacity": 0.4,
"sankey.links": [
{
"source": "Marketing",
"target": "Ads",
"value": 260
},
{
"source": "Marketing",
"target": "Events",
"value": 120
},
{
"source": "Product",
"target": "Cloud",
"value": 180
},
{
"source": "Product",
"target": "Tools",
"value": 90
}
],
"sankey.valueFormat": "currency"
}When to use the flat bands style
- Dense multi-stage flows
- Budget breakdowns with many categories
- Material / energy flow accounting
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": "source",
"sankey.showValues": true,
"sankey.valueFormat": "compact",
"sankey.opacity": 1,
"sankey.linkOpacity": 0.4
}'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
See the sankey diagram component page for the full property reference and FAQs.