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.
