Mermaid.js is a js library that transforms text into diagrams (sequence, Gantt or class diagrams, flow charts, …).
- Js-sequence-diagram is implemented in a similar way. There is a difference though. With Js-sequence-diagram, the whole diagram is re-rendered every time you type in a letter. It is kind of distraction. ZenUML is implemented with VueJs. VueJs implements a Virtual DOM, and it only updates what you have changed (participant names, messages, etc.).
- Sequence diagrams are known to be the best way to visually describe this. That’s why it is the foundation for designing the syntax and semantics of the Ballerina language. Ballerina provides the flexibility of a general-purpose language while having features to model solutions based on higher-level abstractions.
Integrates one sequence diagram in another sequence diagram define with sd name in the corner, then use the name in the diagram with ref in the corner Gate: allows to send and receive messages beyond boundaries of interaction fragment state invariant: asserts certain condition has to be true at certain time.
So far the ones that I am particularly keen on using are the sequence diagrams, you can find all of the documentation, on the mermaid site.
So let’s have a simple example. We will be mapping with some notes and colors the simple call flow of a client talking to an app.This is pretty basic but covers most of our daily needs.
Writing down in simple mermaid script a call flow:
By default gitlab understand the markdown formatting
mermaid so it’s pretty straightforward in your markdown file.But elsewhere like in this blog I am putting the above syntax in a
<div> so that it will get picked up and rendered. (Kramdown which is the highlighting engine for jekyll and GitHub is not yet mermaid compatible).
And here it is the rendered diagram:
The Basic, like using tabs and
sequenceDiagram to create a sequence diagram.You can also
autonumber to add a number to each step of the sequence.
%% is used to add comments and won’t be rendered.
And here is some cheat sheet for the things you can do with it.
- Participants with just letters:
participant C as client
- Specific squared actions with par, loop or opt blocks
- Add block of notes in yellow using. If multiple actors, use the comma to separate them (usually when you want your note over multiples actors).
Lines are basically the steps in your sequence diagram:
- You have the syntax looking like that:
- If the Participant is the same, the line will just kind of loop on itself (like with database step above).
For the lines it always have
- Two dash
--means dotted (like
- Two chevrons
>>means arrow head (like
- A cross
xmeans cross in the arrow (like
You can also have a
- that will create a box at the edge of the link to indicate it’s activated or deactivated.
SequenceDiagram.org is an online tool / software for creating UML sequence diagrams. Founded in 2014 with the purpose to improve the efficiency when creating and working with sequence diagrams by combining text notation scripting and drawing by clicking and dragging in the same model.
All parsing, processing, and drawing is done client side. The benefit of this is that SequenceDiagram.org is fast and convenient to work with; it also doesn’t transfer your diagram data over the Internet like many other sequence diagram tools on the market. This also means that it is possible to work with the tool offline.
The tool is developed, maintained, and used by people who create a lot of sequence diagrams in their daily work. If you have any question / comments / suggestions / bugs please contact [email protected] The more feedback we get the better we can prioritize.
Privacy and data protection information
Are diagrams/scripts created using SequenceDiagram.org subject to any license?
No license is imposed by SequenceDiagram.org on the generated output. However, like with all images containing text, the fonts used might. The default font used in diagrams is the default sans-serif font selected by your browser. You can specify a different font using the fontfamily keyword, see help for more information. See LICENSE for details.
How do I generate a PDF of my sequence diagram?
Zoom to a chosen level in the editor and Print to PDF from your browser. The print css makes sure to only show the diagram on the page.
Are there any example sequence diagrams?
Yes, clicking the help menu and selecting 'Instructions' will show examples of all possible diagram elements. A copy icon is available for copying the text notation.
Is the codebase of SequenceDiagram.org open source?
No, the codebase is currently not available under any open source license
Sequence Diagram Github Download
Can I run the SequenceDiagram.org tool in my company's private network (on-prem)?
Yes, by donating 400$ you are licensed to run the SequenceDiagram.org tool and its REST-like API inside your company's network (enterprise license). You are also eligible to receive any new published versions of the software for the duration of 1 year from the donation date by request. Your donation is highly appreciated and allows us to keep SequenceDiagram.org online and free for everyone to use. Please contact [email protected] for any questions.
The software is delivered in three formats:
- A Node JS application with the Sequencediagram.org tool and a REST-like API for integration with other services, see README.txt for details
- A war file with the Sequencediagram.org tool for deployment in a Java Servlet Container such as Tomcat, Jboss, Wildfly, Jetty, etc
- A zip file with the Sequencediagram.org tool for static web page hosting inside the DocumentRoot of a web server such as Apache, IIS, etc, or static on any cloud provider
What libraries are used by SequenceDiagram.org?
Sequence Diagram Generator Github
- lz-string is used to create URLs for sharing sequence diagrams. LICENSE
- Canvas2Svg is used to export the diagram into SVG file format. LICENSE
- CodeMirror is used as the text editor. LICENSE
- Font Awesome is used to provide icons for the icon participants. LICENSE
- Material Design Icons from the Community is used to provide icons for the icon participants. LICENSE
- Material Design icons by Google (included in materialdesignicons.com collection) is used to provide icons for the icon participants. LICENSE
- Font Awesome 5 Free is used to provide icons for the icon participants. LICENSE
- RBush is used for collision detection calculations for onmousemove events. LICENSE
- MSAL.js from Microsoft is used for authentication towards Microsoft services.
- OneDrive.js from Microsoft is used for file picker for OneDrive and SharePoint.
- platform.js from Google is used for authentication towards Google services and file picker for Google Drive and Team Drives.