Tutorials

Getting started

JointJS diagramming library lets you create fully interactive diagramming tools for all modern browsers. JointJS is not only a drawing library but its MVC (more MV) architecture separates graph, element and link models from their rendering. This makes it easy to plug JointJS to your backend application. Moreover, JointJS is built with Backbone MVC library, so if you know Backbone, you'll feel like at home with JointJS. The same goes for a lot of constructs you'll see in JointJS. JointJS is not trying to reinvent the wheel for technologies that are common to web developers. Things that you learn with JointJS will be helpful to you elsewhere. JointJS is based on jQuery, Underscore, Backbone and SVG.

Diagrams consist of elements connected with links. A diagram in JointJS is represented by a model joint.dia.Graph. This model then collects cells (a term representing both elements and links). A cell could therefore be either an element (joint.dia.Element or its inheritants) or a link (joint.dia.Link). In JointJS (starting from version 0.6), you manipulate models, not views.

JointJS high-level architecture

JointJS provides you with basic diagram elements but also with ready-to-use elements of some well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, ...). New plugins can be written pretty easily (later on this).

To be able to see something on the screen, the graph model must be attached to the joint.dia.Paper view.