A diagram in JointJS is represented by a Graph model (
joint.dia.Graph) to which you add
models of cells - either Elements (subtypes of
joint.dia.Element) or Links (subtypes of
To present the diagram, attach it to a Paper view (
In JointJS, you manipulate models, not views; the paper generates ElementViews and
LinkViews for you from the data provided by the graph models.
The architecture is illustrated in the following diagram.
JointJS provides a visual library of common geometric shapes, as well as an extensive collection of ready-to-use components from several well-known diagramming languages (ERD, OrgChart, FSA, UML, PN, DEVS, ...). The JointJS framework has been designed with an eye towards modularity. This makes it easy for advanced users to create their own shapes and to extend built-in functionality with custom plugins. JointJS+, a commercial extension to JointJS, provides a number of pre-made plugins that extend its functionality with widgets, interactive components, and additional shapes (BPMN diagrams).
Let's learn how create great diagrams with JointJS. We will start by examining a simple Hello, World! application together.
If you are already comfortable with the basics of JointJS, you can learn about some more complex concepts in the intermediate section of the tutorial.