Mermaid Chart Unveils Visual Editor for Sequence diagrams
• 5 mins
Sequence diagrams are excellent tools for communication and documentation. Developers and
non-devs alike can use sequence diagrams to show how two processes or entities operate with one another, and in what order.
This just in: Mermaid Chart has updated its Visual Editor functionality to include sequence
diagrams! The Visual Editor now supports both flowcharts and sequence diagrams, with more
visual types on the way.
So what is the Visual Editor? Simply put, it provides a click-and-drag graphical user interface
(GUI) that works in conjunction with Mermaid’s signature text-to-diagramming workflow.
Enabling the Visual Editor allows you to make quick edits to your visual, with all changes
reflected in your code. If you prefer Mermaid’s classic workflow with simple code, you can jump
back and forth between your code and the Visual Editor, with no hiccups!
We’re happy to say Mermaid Chart is the only visual editor for Mermaid sequence diagrams on the
market, and this new functionality allows anyone to create an effective sequence diagram in
minutes. Forget spending hours in PowerPoint or Lucidchart!
Best of all, you can get started on Mermaid Chart for (free).
Let’s dive in:
Quick review: Sequence diagram vocabulary
We’ll first establish a common understanding of Mermaid Chart vocab. If you’re looking for a
deeper dive into Mermaid sequence diagram syntax, check out our documentation pages.
Participants are the rectangles that represent an element within your system or process.
An actor is a type of participant that’s represented by a stick figure (if your process involves humans).
A message, sometimes known as an edge, shows a relationship between two or more
participants or actors. They typically take the form of an arrow or line.
Notes allow you to add extra text or context next to your diagram.
Loops help you show the interactions between systems, and the order they must occur to
trigger a certain event.
An alt represents an alternative path, i.e. a path that’s contingent on previous events.
An opt shows an optional step in your workflow or process.
Adding a par allows you to show actions that are happening in parallel.
A rect signifies a new rectangle, aka a new participant.
A critical region shows actions that must happen automatically, with conditional handling of circumstances.
Adding a break indicates that you’re stopping a sequence within the flow.
How to use the Visual Editor to build a sequence diagram
Now you’re ready to start using the Visual Editor. The process is easy:
1. Start with a sample diagram
Open up the Mermaid Chart editor. Navigate to the “sample diagrams” option on
the menu that appears on the left side of the editor.
When you select “Sequence Diagram,” you’ll see a variety of template options —
sequence diagrams with actors, different message types, notes, etc. Select the option
that works for your desired syntax.
2. Enable the Visual Editor
When you enter the editor, the Visual Editor will be automatically disabled. Click the lock
button on the small black toolbar in the bottom left corner of your visual. This will enable
the Visual Editor.
The background should shift from a solid color to a dotted pattern.
3. Edit your sequence diagram
There are several options for editing your sequence diagrams:
- Add new participants: The mini black toolbar with the lock has options to add new participants and actors. You can also add participants by clicking the blue plus signs that appear as you hover over the visual.
- Add additional elements: When you select a message, you’ll call up a menu of additional options. You can add any of the elements listed in the vocab section above:
– Add loop
– Add alt
– Add opt
– Add par
– Add rect
– Add critical
– Add break
- Delete participants: You’ll find an option to delete on the toolbar that’s displayed when you select a message. You may also right-click to select multiple messages at once. This has an advantage as it works for multiple messages at once.
- Change labels: Double-click on any note to change the text.
- Change message style: When selecting a single message, you have an option in the toolbar to change the type of arrow (dotted, solid, etc). You may also highlight changes, such as the rect control structure (after right-clicking to bring up the menu), as seen in the images below:
4. Discover helpful tips
If you’re having trouble, the Visual Editor – Cheat Sheet is here to help!
Simply click on the lightbulb on the mini black menu in the editor. This will bring up
the set of cheat sheet cards on the right side of your screen. Each card contains a topic, a
short description, and a link to more info on our docs site.
A good start is to check out the demo:
Try out the Visual Editor for free
Are you itching to create your first sequence diagram with the Mermaid Chart Visual Editor?
Create your free account, to gain access to five free diagrams and all Mermaid Chart plugins.
Enable the Visual Editor and see how easy it is to build your sequence visuals.
Diagramming shouldn’t be a chore. That’s why Mermaid Chart is giving you multiple ways to
build your sequence diagrams quickly and efficiently. Now go get started!