Intermediate Tutorial

In the basic section of the tutorial, we learned how to create a simple JointJS application. By now, you should be able to:

• Install JointJS and include it in your pages
• Create a graph and a paper
• Add simple elements to the diagram
• Connect elements with simple links

In other words, you should be able to turn a simple Hello, World! application...

...into an amazing diagram like this one:

In this section of the tutorial, we will go one step further, to understand more involved topics that allow us to customize our diagrams more fully:

• JointJS special attributes
• Events (interaction)
• Data serialization (persistence)
• Defining custom elements
• Defining custom links
• Link labels
• Element tools
• Link tools

We will look at each of these steps in turn. Use this list as an index of the intermediate tutorial topics.

Let's start with JointJS special attributes.