Mermaid Chart Unveils Visual Editor for Sequence Diagrams

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 page.

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!