Sankey diagram example - Rete.js

Sankey diagram

CustomizationArrange

The Sankey diagram relies on the node editor's classic preset and includes custom components for nodes, connections, and sockets. Nodes are given a predefined capacity (equal to height), and ports are generated for each connection with a height (weight) equal to the connection's weight.

Implementing this feature in your project is easy - just copy the sankey directory and some code from editor.ts, including the Presets.classic.setup options and importGraph. Additionally, you can restrict node movement with createSankeyRestrictor to keep source nodes on the left of target nodes. Finally, add an option to arrange.layout to increase the distance between nodes.

This example was specifically developed for React.js, but you can adapt it for use in other rendering plugins by adapting the custom components to your stack.