Arrow icon
See all demos

UML Class Diagrams

A Unified Modeling Language (UML) Class diagram describes a system by visualizing the different types of objects within a system. JointJS can help users easily build this type of static diagram that describes the structure of a system. Using familiar SVG attributes, or custom JointJS properties, you will be able to visualize classes, their attributes, operations and relationships of a given system.
Demo instructions
Change the position of elements in the diagram using drag and drop.
UML Class Diagrams

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.