Mermaid syntax allows you to easily draw sequence diagrams using Markdown text. In particular, the evolution of AI, including ChatGPT, has made it possible to draw sequence diagrams more intuitively and quickly, which is surprising in many ways.
This article provides a detailed explanation of how to write sequence diagrams in Mermaid syntax. It also covers writing basic sequence diagrams in Mermaid, detailed descriptions including colors, loops, line breaks, and comments, and how to create simpler sequence diagrams using AI tools.
In this article
Sequence Diagram Structure
A sequence diagram is a diagram that visually represents the exchange of messages between objects in a system. Using this diagram makes it easier to understand the operation and flow of the system. It plays an important role, especially in software development and system design. The components of a sequence diagram include the following elements:
First, there is an element called an actor. This represents a user or other system that accesses the system from outside the system. For example, when a user uses an application, that user becomes an actor (red frame in the diagram).
Next is the lifeline. In a sequence diagram, a lifeline represents the duration of an object or actor. The axis of the lifeline is the time axis, and it flows from top to bottom to show the passage of time (blue frame in the diagram).
And then there are messages. Messages indicate actions or requests exchanged between actors or objects. These messages are represented by arrows, and there are synchronous messages and asynchronous messages (green frames in the diagram).
Also important are guard conditions, which express the conditions under which a message will be sent, providing a visual cue that an action will only be taken under certain conditions.
As you can see, understanding the components of a sequence diagram will help you understand how to write a sequence diagram in Mermaid syntax. Next, we'll explain in detail how to write a sequence diagram in Mermaid.
How to Write Mermaid Code Required for Creating Sequence Diagrams
The process is surprisingly simple, but to use it effectively, you must understand the basic structure and syntax.
In Mermaid, you create sequence diagrams using the sequenceDiagram block. Within this block, interactions between entities (such as a user and a system) are represented by arrows. These arrows show the direction and type of message passed.
For example, when a user sends a request to the system, you would write:
sequenceDiagram User->>System: Request
This line shows that the User sends a message labeled "Request" to the System. Similarly, a response can be shown by reversing the direction:
System->>User: Response
In this way, Mermaid syntax allows you to visualize communication between components in a very clean and readable format.
Enhancing Sequence Diagrams with Colors and Blocks
Mermaid also lets you use colors and grouped blocks to improve readability. One way to do this is with rect blocks, which create colored background areas around parts of your diagram.
sequenceDiagram rect rgb(175, 238, 238) rect rgb(255, 2, 1) User->>System: Request 1 System->>User: Response 1 end User->>System: Request 2 System->>User: Response 2 End
In this example, the first interaction is highlighted with a light blue background. You can change the RGB values to suit your theme or emphasize specific parts of the process.
Looping and Repeating Actions
To represent repeated actions (such as retries), Mermaid supports the loop keyword:
sequenceDiagram Loop retry process User->>System: Request System-->>User: Response End
This clearly illustrates that the request and response are part of a looping process.
Adding Comments for Clarity
You can also add comments to your Mermaid code using %%:
%% This is a comment and won't appear in the diagram User->>System: Final Request
Comments are especially useful when working in a team or documenting complex diagrams, as they help others understand the purpose of each interaction.
This is the basic approach to writing Mermaid code for sequence diagrams. Once you understand these elements: arrows, loops, color blocks, and comments, you can confidently start building more complex diagrams.
Creating Sequence Diagrams in Mermaid Syntax
Here, we will introduce a simple example of how to write sequence diagrams in Mermaid syntax. First, it is important to understand the basics of incorporating Mermaid into a Markdown file and creating sequence diagrams using its syntax.
For example, consider the following sequence diagram for a to-do app: the user adds a task, and the system saves the information in the task list.
When using Mermaid notation, you write a sequence diagram like this:
sequenceDiagram participant User as User participant System as System User->>System: Add new task System-->>User: Confirm task added System->>Database: Save task
You enter your code into the Mermaid Live Editor, and a sequence diagram is generated automatically.
The diagram begins with sequenceDiagram, followed by the declaration of participants, such as User and System. Arrows like ->> indicate message exchanges in sequence. This simple flow demonstrates a request-response pattern, commonly used in many applications.
Enhancing the Sequence Diagram
Mermaid also supports advanced features like looping, styling, notes, and comments. You can use a loop to repeat certain actions:
sequenceDiagram loop Retry task submission User->>System: Submit task System-->>User: Error / Retry prompt end
You can insert notes beside participants to describe actions:
sequenceDiagram User->>System: Add task Note right of System: Validate input System->>Database: Store task
Styling is also possible using the rect keyword to highlight important sections:
sequenceDiagram rect rgb(240, 248, 255) User->>System: Initial request System-->>User: Response end
Tips for Writing Mermaid Sequence Diagrams
Use %% to add inline comments that won't appear in the rendered diagram:
sequenceDiagram %% This part handles the save logic System->>Database: Save task
To change the layout and readability, use spacing and indentation appropriately.
While Mermaid is excellent for creating simple and quick sequence diagrams, it does have a few limitations:
- Learning Curve: It takes time to become familiar with Mermaid's syntax and available features.
- Limited Complexity: Very large or deeply nested interactions can become difficult to manage.
- Styling Restrictions: Compared to more advanced diagramming tools, Mermaid's visual customization is minimal.
Considering these points, if your project requires complex interactions or highly customized visuals, you may want to explore alternative tools. We will introduce some of these in the following section.
Create a Sequence Diagram using EdrawMax
After learning how to draw sequence diagrams in Mermaid notation, if you want to create sequence diagrams more easily, we recommend you use EdrawMax, a very intuitive tool with drag-and-drop functionality that allows you to draw sequence diagrams without any expert knowledge.
Here are the steps to create a sequence diagram using EdrawMax:
Step1
- Launch EdrawMax
- Search for "sequence" in the search box. (See the red box in the image.)
Try the app & get 500 free AI tokens
Step2
- Narrow down the search results by "UML Sequence Diagram" (blue frame in the image),
- and select "Create New UML Sequence Diagram" (red frame in the image).
Step3
- Next, drag and drop the desired shapes from the sequence diagram template and add the necessary elements.
- You can easily add text, labels, arrows, and more, making it easy to make fine adjustments.
Benefits of Using EdrawMax
EdrawMax is a very versatile tool that caters to a wide range of users from beginners to professionals. Here are some of its main advantages:
Try the app & get 500 free AI tokens
1. Intuitive Operation
The drag-and-drop feature makes it easy to create complex sequence diagrams. You can complete the operation visually, even without knowing Mermaid-like notation.
2. Versatile Templates and Shape Library
A wide range of templates is available, including not only sequence diagrams, but also flow charts, network diagrams, UML, etc. It is flexible enough to handle any business.
3. High Compatibility
EdrawMax can output in a variety of formats, including PDF, PNG, JPG, SVG, etc., making it highly compatible with other tools and presentation materials, and its cloud function allows you to access and edit from multiple devices.
4. Seamless Collaboration
Teams can easily collaborate, with real-time editing and commenting, making it easy to work efficiently even across distances.
By taking advantage of these features, the efficiency of creating sequence diagrams will be dramatically improved. If you find Mermaid notation difficult or want to create sequence diagrams more easily, EdrawMax is the perfect choice. Please give it a try.
Summary
Above, we have explained in detail how to draw sequence diagrams using Mermaid notation. Mermaid is a very useful tool for creating sequence diagrams, allowing you to easily create beautiful, easy-to-understand diagrams. In particular, by linking it with a multi-functional document tool such as Notion, you can share information more efficiently, and it will also help improve your company's productivity.
We introduced the basic structure of a sequence diagram, how to write Mermaid notation, and the steps to draw a sequence diagram. We also touched on the ease of creating sequence diagrams using drag-and-drop tools such as EdrawMax.
EdrawMax DesktopEdrawMax Online
