Arrow icon
See all demos

Hierarchical Diagrams

Interested in advanced tips for working with hierarchical diagrams? Try this demo, which offers features such as inserting elements into a container, dropping a container over children to embed them, embedding validations, resizing a container based on the elements inside and automatic positioning of elements in the container.
Demo instructions
Insert the elements into the container or drop the container over the elements (children) and watch them embed into the parent object. Watch as the size of the container adjusts depending on the elements inside.
Hierarchical Diagrams

See the Pen JointJS: Hierarchical Diagrams by JointJS (@jointjs) on CodePen.

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.

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.