Sequence diagram

Original mermaid-js sequence diagram documentation

A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order

To create sequence diagram call create new SequenceDiagramBuilder. You could enable autonumber of sequence steps within its constructor

var builder = new SequenceDiagramBuilder(autoNumber:true);

Defining members

var alice = diagram.AddMember("Alice", MemberType.Participant);
var bob = diagram.AddMember("Alice", MemberType.Participant);

Links

You could add links for diagram members

alice.AddLink("Dashboard", new Uri("https://dashboard.contoso.com/alice"));
alice.AddLink("Wiki", new Uri("https://wiki.contoso.com/alice"));

Building diagram

Messages

To sent message from one member to another/self

builder
    .Message(alice, bob, "Hello Bob!", MessageType.Solid)
    .Message(alice, bob, "Hello! Can you hear me?", MessageType.Solid)

For simpler messaging process definition between two members you could use Messaging

builder
    .Messaging(alice, bob)
        .Request("Hi Bob!", MessageType.SolidArrow)
        .Response("Hello Alice!", MessageType.SolidArrow)
        .Request("How are you?", MessageType.SolidArrow)
        .Response("Well ..", MessageType.DottedArrow)
        .Response("Done", MessageType.SolidArrow)
    .End()

Activation

To do things, when some of the members activated use Activate method

builder.Activate(alice, diagram =>
{
    diagram.Message(alice, bob, "Hello", MessageType.Solid);
});

Loops

builder.Loop("Endless conversation", diagram =>
{
    diagram.Message(alice, bob, "Hello", MessageType.Solid);
    ...
});

Alt

It is possible to express alternative paths in a sequence diagram

builder.AltOr(
    "Alice hungry",
    diagram => diagram.Message(alice, bob, "Wait Bob, I need something to eat", MessageType.Solid),

    "Alice not hungry",
    diagram => diagram.Message(alice, bob, "Ok, let`s go", MessageType.Solid)
);

Optional

builder.Optional("Alice tired", diagram => ...);

Parallel

builder.Parallel(new [] {
("alice is going to work", diagram => ...),
("alice is talking to the phone", diagram => ...)
});

or

builder.Parallel(
("alice is going to work", diagram => ...),
("alice is talking to the phone", diagram => ...)
);

Rectangles

It is possible to highlight flows by providing colored background rects.

builder.Rect(Color.Yellow, diagram => ...);

Notes

Note

builder
    .Note(alice, NoteLocation.LeftOf, "Alice is a girl")
    .Note(bob, NoteLocation.LeftOf, "Bob is a boy");

Note over members

builder.NoteOver("Teenagers", alice, bob);

Generating markdown

string markdownSyntax = builder.Build();