Arrow icon
See all demos

Diagram Index

The Diagram Index demo allows the user to display multiple JointJS diagrams while navigating each cell of a certain diagram via a TreeView component. Thus you or your customers can get a better overview of all elements contained in your diagrams, and work in a more organized way.
Demo instructions
Click on the TreeView Items to navigate the diagram elements. The selected item will be highlighted in the diagram. Clicking on the diagram and element links also allow you to traverse the TreeView. The selected item will also be reflected in the navigation. Alternatively, navigate Tree items via the keyboard. Left and right arrow keys will collapse and expand respectively.
Diagram Index

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

The full source code of this demo can be found on GitHub (react-diagram-index, vue3-diagram-index, angular-diagram-index, svelte-diagram-index).

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.