Both WebSequenceDiagrams.com and Mermaid support the creation of sequence diagrams using plain text. While the formats are similar, there are some small differences that mean that you probably cannot just paste diagram text from one into the other. This post lists the items that I found recently.

Let’s take the following sequence diagram text for WebSequenceDiagrams.com that shows the diagram below.

title Alice and Bob

participant Alice as a
participant Bob as b
participant Uncle\nJones as j

a -> b : Hello

note left of b
  Bob thinks about this\nfor 3 seconds
end note

b -> j : Should I \n accept the \n invitation?
j -> b : OK

b -> a : Hello.

Here are the things that we need to change:

1. Aliases: WebSequenceDiagrams uses the format of participant a as Alice but Mermaid reverses this, so we use: participant Alice as a
2. Newlines: In Mermaid, we use <br/> instead of the \n that WebSequenceDiagrams uses.
3. Single Line Notes: Mermaid does not support the note .. end note format. Change the notes to be on a single line.
4. Messages: For messages, Mermaid requires that we use ->> to get a solid line with an arrow, so we need to change that for all the messages.

This finally gives us the below text for Mermaid and the picture further down.

title Alice and Bob

participant a as Alice
participant b as Bob
participant j as Uncle<br/>Jones

a ->> b : Hello

note left of b: Bob thinks about this<br/>for 3 seconds

b ->> j : Should I<br/>accept the<br/>invitation?
j ->> b : OK

b ->> a : Hello.

I wrote this up as a reference for myself. Hope it helps you too. Of course, feel free to share the post (you can tag me as @onghu on X or on Mastodon as @onghu@ruby.social ) or leave a comment below.