Quick tutorial

This tutorial is probably your first touch with JointJS library. It shows you how to create a simple Finite State Machine diagram. At the end of this tutorial you can also find a popular "Hello world" program.

Getting started

Scripts:

Example: To create a Finite state machine diagram, put these scripts into your document's header:

    
<script src="raphael-min.js" type="text/javascript"></script>
<script src="joint.min.js" type="text/javascript"></script>
<script src="joint.dia.min.js" type="text/javascript"></script>
<script src="joint.dia.fsa.min.js" type="text/javascript"></script>
Or alternatively you can use the standalone package provided which includes both Joint and Joint.dia libraries, all plugins and Raphaël library, all in one file. 
    
<script src="joint.all-min.js" type="text/javascript"></script>

Then you have to create a holder for your diagram. 

    
<div id="myfsa"></div>

Once you have the holder created, you have to initialize diagram paper. 

    
Joint.paper("myfsa", 1000, 200);  /*(id or HTMLElement, width, height)*/

Creating your first Finite State Machine diagram

Each kind of diagram is implemented as a separate plugin. FSA plugin contains elements such as State, StartState, EndState and definition of the arrow suitable for FSA diagrams Joint.dia.fsa.arrow. Concrete elements are created using create method. This method takes as an argument object containing all necessary parameters for the element. (for list of all options, see FSA plugin API)

    
var s0 = fsa.StartState.create({ position: {x: 50, y: 50} });
var se = fsa.EndState.create({ position: {x: 450, y: 150} });
var s1 = fsa.State.create({ position: {x: 120, y: 120}, label: "state 1" });
var s2 = fsa.State.create({ position: {x: 300, y: 50}, label: "state 2" });

Joint library provides API for creating your own arrows which reside both connection ends. Usually, diagram plugins should provide arrows specific for diagrams they implement. Connections can register objects to which they can stick. You can also refine what connection end you want to stick to what object. For normal purposes (especially FSA diagrams) it is a good practice to create an array which holds all the diagram elements. Note the usage of registerForever() method. The difference between register() and registerForever is that the latter stores a reference to the array object provided as the only argument. That means that all elements added later to the array are registered as well. 

    
var all = [s0, s1, s2, se];
s0.joint(s1, fsa.arrow).registerForever(all);
s1.joint(s2, fsa.arrow).registerForever(all);
s2.joint(se, fsa.arrow).registerForever(all);

The final diagram is by default interactive. You can drag arrows, break connections and move states:

Hello world!

Joint library is independent of diagram plugins. It means that it can be used on its own for connecting vector objects created by Raphaël library. This is useful if you just want a functionality of connecting vector objects together. Connections as well as arrows and behavior is fully customizable. For more details, see Joint library API. 

    
<html>
<head>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="joint.min.js"></script>
</head>
<body>
<div id="hello_world"></>
<script type="text/javascript">
var r = Raphael("hello_world", 1000, 50),
    c1 = r.circle(50, 20, 10),
    c2 = r.circle(250, 25, 10);
c1.joint(c2);
</script>
</body>
</html>