How to Make a Sequence Diagram with Mermaid Chart

Sequence diagrams are important for communicating complex systems in a clear and concise manner.

Learning how to make your own sequence diagram can help improve collaboration and communication with your colleagues. Mermaid Chart is here to help.

Mermaid Chart offers a sequence diagramming tool that helps everyone — whether you’re a software developer or a content marketer — produce sequence diagrams with ease. Built by the creators of the award-winning Mermaid open-source tool, Mermaid Chart allows you to generate diagrams using either simple code or a click-and-drag Visual Editor.

You can sign up for free to start creating sequence diagrams today. Let’s dig a little deeper into the uses of sequence diagrams — and show you how to make your own in Mermaid Chart.

What is a sequence diagram? #

A sequence diagram is a type of visual that models interactions between different actors or objects within a system, and also shows you the order of said interactions. Most sequence diagrams focus on a single scenario, capturing the behavior of the system within that time frame. This diagram type can help you illustrate how different actors interact within a system, the messages being sent between them, and the order in which they’re sent.

Sequence diagrams are commonly used in the world of software development. However, they can also be utilized for various use cases in the business world. Typically more expressive than a flowchart, a sequence diagram is easy to create and understand without prior knowledge.

How do I read a sequence diagram? #

Typically, the x-axis of a sequence diagram shows participants, and the y-axis displays the order of messages.

In other words; vertically, the diagram displays the timing sequence of messages or calls between two systems. The horizontal axis shows the objects, actors, or entities to which those messages or calls are sent.

Consider the image above, which models a conversation between three people. Each box represents an actor in the process. You can see the flow of the conversation and the order of operations by reading the arrows from top to bottom. Each arrow represents some form of communication between our actors.

Notice how the arrows show the flow of communication. In arrow 1, Alice asks John how he is doing, to which she receives a reply from John in arrow 2. Arrows 5 and 6 show Bob asking Alice a question directly, without involving John.

What are the uses of sequence diagrams? #

Sequence diagrams can be effective in a variety of settings and contexts:

General use cases #

Whether you work in marketing, sales, or business ops, you can use a sequence diagram to help highlight potential bottlenecks or inefficiencies in a process:

Modeling a sign-up flow: What does the user experience look like when signing up for a software platform? A sequence diagram can help you map out the order of steps required to get a user logged in.
Onboarding a new employee: Starting a new job is often a complex process with multiple touchpoints. A well-designed sequence diagram can help coordinate all of the moving parts.

Software development use cases #

The sequence diagram has its roots in the development community. Common use cases include:

Mapping system architecture: System architects often use a sequence diagram to describe how different systems or subsystems communicate with one another.
Version control: Showcase a git workflow to allow files to be easily saved and tracked.

How to make a sequence diagram with Mermaid Chart #

To make a sequence diagram in Mermaid Chart, follow these easy steps:

Get started with a sample diagram
Edit with simple code
Try out the Visual Editor
Save, share, and collaborate.

1. Get started with a template #

Start by opening up the Mermaid Chart editor. Click the “+New Diagram” button to open up a new visual. Note: Free users can create up to 5 diagrams, while Pro users can access create an unlimited number of diagrams.

Select “Templates” from the menu on the left-hand side of your screen. When you click the “Sequence Diagram” button, you’ll see a variety of templates to get you started. Choose the template that fits your needs based on actors, message types, notes, and more.

2. Edit with simple code #

Mermaid Chart allows users to build sequence diagrams using simple, Markdown-style code. We’d recommend reviewing Mermaid sequence diagram syntax on our handy documentation page for more specifics.

Users can start to create a sequence diagram by declaring a diagram type with “sequenceDiagram.”

3. Try out the Visual Editor #

If you’re more into using a graphical user interface (GUI), we’ve got good news. Mermaid Chart users can also tap into our Visual Editor, which supports sequence diagrams with a click-and-drag functionality. And don’t worry about getting crossed up; you can jump back and forth between our code editor and Visual Editor with ease.

The Visual Editor is automatically enabled for all flowcharts and sequence diagrams.

Look for the pink double arrow button in the top left corner of your diagram. Click the button to turn the double arrow blue and enable the Visual Editor toolbar.

On this toolbar, you’ll see icons that allow users to add participants, add actors, and access the Visual Editor cheat sheet.

Check out our guide for sequence diagrams in the Visual Editor for step-by-step instructions on using this interface.

Now it’s time to make your sequence diagram — and share it with your team for optimal communication.

Mermaid Chart offers a variety of options for speeding up your workflow:

Discover helpful tips: Click on the information icon on the Visual Editor toolbar. A set of cheat sheet cards will appear on the right side of your screen. Each card contains a link to our docs site or a demo video on our YouTube page.
Share your work: Save and export your diagram to a PNG, SVG or MMD file. Generate a shareable diagram link to allow others to jump right into your workflow.
Integrate with your workplace tools: Bring your diagrams closer to your code with our JetBrains IDE Extension and Visual Studio Code plugin. We also offer a Confluence plugin to allow you to create and edit diagrams directly within your Confluence pages.

To use the plugins mentioned above, be sure to first create a Mermaid Chart account!

General tips: How to make an effective sequence diagram #

Despite their simple appearance, there’s so much you can do with sequence diagrams. Now that you’ve gotten started with Mermaid Chart, here are six steps to making an effective sequence diagram:

Identify the actors (aka participants) involved in your system interaction.
Define the order of operations — also known as the sequence of interactions – between those actors.
Use lifelines (aka arrows) to connect the actors involved in your diagram.
Illustrate the communication between these lifelines by adding messages where necessary.
Utilize constraints such as loops, conditions, and parallel executions to depict complex interactions.
Review and refine your sequence diagram to ensure accuracy and clarity. Work with a colleague to ensure the diagram is effectively communicating your core messages.

Get started for free with Mermaid Chart’s sequence diagram tool #

Sequence diagrams are a helpful communication tool for nearly every function within a business. Mermaid Chart is committed to removing design hurdles so that anyone can quickly and efficiently create meaningful diagrams

Create your free account to start whipping up sequence diagrams today!