Vertical flow

The given example illustrates a vertically oriented editor. It has been achieved by making subtle changes to nodes and connections, specifically:

  • using a custom node component with modified structure and some styles.
  • adjusting connection junction points with sockets.
  • changing the connection path to a vertical orientation.
  • modifying port placement points in the arrangement.
The source code for this Pro example is available only to subscribers
Get access

The actual example is built using React.js, but around 75% of the listed changes are stack-agnostic. This means that to utilize them in Angular, Vue.js, or Svelte, you'll need to create a corresponding custom component. If you encounter any issues with it, don't hesitate to reach out via GitHub Issues in the relevant repository.