# Sankey diagram

::references
  :::ref-guide{link="/examples/customization/react" title="Customization"}
  :::

  :::ref-example{link="/examples/arrange" title="Arrange"}
  :::
::

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.

::kit
::

::example{#rete-js-v2-sankey-diagram-v75qmr module="/src/editor.ts"}
::

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.