What is a Sequence Diagram?

About

A Sequence diagram is an interaction diagram that shows how processes (ie protocol) operate with one another and in what order.

They focus on the message interchange between participant materialized in a line known as a lifeline.

It's part of UML

Tools

Mermaid

Mermaid Sequence Diagram

Example of an Oauth flow

<div class="mermaid">
sequenceDiagram
    participant Cli as Client
    participant RO as Resource Owner
    participant AS as Authorization Server
    participant RS as Resource Server
    Cli->>RO: (A) Send a Authorization Request
    RO->>Cli: (B) Get a Authorization Grant
    Cli->>AS: (C) Send the Authorization Grant 
    AS->>Cli: (D) Get a Access Token
    Cli->>RS: (E) Send the Access Token 
    RS->>Cli: (F) Get the Protected Resource
</div>

Rendered by WebCode

Js Sequence Diagram

https://github.com/bramp/js-sequence-diagrams (called without the s, ie js-sequence-diagram)

It's very slow (may also due to the dependencies)

const script = document.querySelector(".diagram").textContent;
const options = {theme: 'simple'};
const diagram = Diagram.parse(script);
const targetId = "diagram";
diagram.drawSVG(targetId, options);

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

Rendered by WebCode