Mermaid Sequence Diagram for a Login Flow
Write a sequence diagram for a login flow in Mermaid: actors, participants, requests, replies and an alt block for the wrong password path. Made in the free Mermaid live editor with an online shop example.
Step by step
Who talks to whom
- Login flow. A sequence diagram shows who talks to whom, and in what order, which makes it a good fit for a login flow. Here is one for an online shop, written in Mermaid.
- Diagram type. In the Mermaid live editor, clear the code and type sequenceDiagram as one word with a capital D. This tells Mermaid what kind of diagram to draw.
sequenceDiagram
Participants
- Participants. First, list who takes part. actor C as Customer draws a stick figure for a person. C is the short name you use in the code, and Customer is the label shown on the diagram. Add systems with participant: W as Web shop and A as Account service. They line up from left to right in the order you write them. Each one sits at the top with a dashed lifeline going down. Time runs from top to bottom.
actor C as Customerparticipant W as Web shop participant A as Account service
Messages
- Requests. Now add the messages. ->> (one dash) draws a solid arrow, used here for a request. The message goes after the colon: C->>W: Log in with email, then W->>A: Check password.
C->>W: Log in with email W->>A: Check password - Replies. A login can go 2 ways, so open an alt block labelled Password correct. -->> (two dashes) draws a dotted arrow, used for a reply. Login OK goes back to the web shop, and the customer gets Show my account.
alt Password correct A-->>W: Login OK W-->>C: Show my account - Alternatives. Until the block is closed, the editor greys out the diagram. else Wrong password adds the second path, Login failed and then Show error. Close the block with end. Mermaid draws the alt block as a frame with 2 parts, one for each outcome. The Login failed reply sits in the Wrong password part. Each part of the frame is a scenario, and each scenario can become a test case.
else Wrong password A-->>W: Login failed W-->>C: Show error end
Recap
- The rules. List the participants first, use ->> for requests and -->> for replies, and wrap the different outcomes in alt, else and end.
Common mistakes
- Writing -> instead of ->>. In Mermaid, -> draws a line with no arrowhead. Add the second > to get an arrow: ->> for a request, -->> for a reply.
- Forgetting end after the alt block. Without end, the code has a syntax error and the new part of the diagram won't draw. Every alt needs one end after its last else path.
- Using the label instead of the short name. After actor C as Customer, write C->>W, not Customer->>W. Mermaid creates a new participant for any name it hasn't seen yet, so this adds an extra figure or box to the diagram.
When a business analyst uses this
In a requirements workshop for a new login page, write this diagram live with the developers so everyone agrees on who calls whom. Each alt and else part, like Password correct and Wrong password, then becomes a scenario with its own acceptance criteria and test case.
Questions people ask
What is the difference between ->> and -->> in Mermaid?
->> draws a solid line with an arrowhead, which is usually used for a request. -->> draws a dotted line with an arrowhead, which is usually used for a reply.
What is the difference between actor and participant in a Mermaid sequence diagram?
actor draws a stick figure, which suits a person like Customer. participant draws a box, which suits a system like Web shop. Both get a lifeline and can send and receive messages.
How do you show an if/else in a Mermaid sequence diagram?
Start with alt and a label, add the messages for that case, then add else with a label for the other case, and finish with end. Mermaid draws it as one frame with a part for each case.
