Arrow icon
See all demos

Petri Nets

A Petri net is a mathematical modeling language describing distributed systems. In this demo, we will look at such a distributed system described by a Petri net to illustrate data synchronization and transition.
Demo instructions
Manipulate places and transitions or adjust the arcs that connect them.
Petri Nets

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.

The role of JointJS in building an application containing a Petri Net

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a wide range of prebuilt features that make creating applications containing diagramming studios such as Petri net a breeze.

We equip developers with all the needed features to save time and focus their energy elsewhere such as transitions and Petri net shapes.

New to this topic? Learn more about Petri net 👇

What is a Petri Net?

As stated above, Petri net is a mathematical modeling language describing distributed systems. It has a precise mathematical definition and graphical notation (like the one you see in the example above), which distinguishes it from other concepts like UML class diagrams or BPMN. The most common uses we will explore below include modeling artificial systems such as manufacturing systems and communication protocols.

Petri Net basics

We have already touched on the basic elements of a Petri net: places (represented by the circle) and transitions (represented by the rectangle). These are connected by arcs that allow data (tokens) to be synchronized based on certain rules. There are two types of places: input and output. Input places are those from which arcs lead to the transition, output places are, as expected, those to which arcs lead from the transition.

Places can contain any number of tokens (represented by dots) that can be fired from input places to output places via transitions, if and only if the transition is enabled – this happens when there are enough tokens in the input places. When the transition fires, it expends the required tokens from the input places and generates them at the output places. This process changes the state of the Petri net.

Common uses of Petri net

As Matthew O'Brien from the University of Pittsburgh says in his work, “Petri net can be used to describe and study information processing systems of various types”. There are many use cases where this modeling language can be of value, including:

  • data flow mapping,
  • communication protocol design,
  • modeling synchronisation mechanisms,
  • representation of state machines.

To learn more about how Petri net can be used, we recommend reading O'Brien's presentation summarizing the most common use cases.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Visit our Github profile to get the source code of the Petri net demo and learn from other diagramming enthusiasts.

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.