Arrow icon
See all demos

Sequence Diagram

The demo, written in JavaScript and compatible with other frameworks, showcases the use of JointJS, an open-source diagramming library. Sequence diagrams are popular interaction diagrams that help companies and individuals visualize how operations are performed. In our case, the diagram depicts the interaction between the browser, web server, and database server and maps all the important messages transmitted in order to execute an HTTP request.
Demo instructions
Change the position of lifelines and messages by interacting with the diagram. Note how you can move grouped elements (web server and database server).
Sequence Diagram

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 sequence diagram

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 set of prebuilt features that make creating visual applications containing diagramming studios such as sequence diagrams a breeze.

We equip developers with all the features they need to save time and focus their energy elsewhere such as:

  • highlighters, 
  • restrictTranslate, 
  • markAvailable, 
  • validateConnection, 
  • linkTools, 
  • elementTools, 
  • sequence.

New to this topic? Learn more about sequence diagrams 👇

What is a sequence diagram?

As stated above, sequence diagrams are interaction diagrams designed to visualize how operations are executed. They are time-focused using vertical lines that act as timelines carrying specific actions and messages. Messages are transmitted between vertical lines and represent the interaction between objects (which are in cooperation).

To understand how sequence diagrams work, let's add a step-by-step description of our demo above. The operation starts with an HTTP request sent from the browser to the web server. The web server, which requires some additional information, sends an SQL command to the database server and waits for a response. The database server sends the requested data back to the web server, which may eventually send an HTTP response back to the browser.

A visual representation of such an operation allows us to better understand the process, its participants, and the messages that are transmitted between them.

Use cases for sequence diagrams

Let's take a look at some of the most common uses of sequence diagrams. Lucidchart has done a great job of explaining the three main use cases:

  • “Usage scenario: A usage scenario is a diagram of how your system could potentially be used. It's a great way to make sure that you have worked through the logic of every usage scenario for the system.
  • Method logic: Just as you might use a UML sequence diagram to explore the logic of a use case, you can use it to explore the logic of any function, procedure, or complex process.
  • Service logic: If you consider a service to be a high-level method used by different clients, a sequence diagram is an ideal way to map that out.”

The key components of sequence diagrams

There are several key components of sequence diagrams that are worth mentioning at this point. We'll go over the basic ones, but if you'd like to dig deeper into this topic, you can learn more.

  • Actor: a role that interacts with the system.
  • Lifeline: a representation of an object involved in the process.
  • Activations: a box placed on the lifeline to indicate that an object is active (in interaction between objects).
  • Message: a message – synchronous or asynchronous – is a communication between two objects.

There is much more to learn about this special type of diagram. We recommend you check out this article from IBM, GeeksforGeeks or learn from other diagram experts in our community.

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 sequence diagram 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.