Process - Sequence Diagram Viz

Card Puncher Data Processing


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



Mermaid Sequence Diagram

Example of an Oauth flow

<div class="mermaid">
    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

Js Sequence Diagram (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!

Discover More
(Graph|Network) - Visualization

Graph visualization is based on the mathematical theory of networks, graph theory. Chord graph. Nodes are place on a circle. Death Star dependency graph Radial, diagonal and Dendro Network are...
Chrome Devtool Har
HTTP - Request

An HTTP request is a message sent from a client to a server. It's the first part of a fetch, the second being the response. A request message has: a first line called the request...
OAuth - Resource Owner Password Credentials / Password Credentials Flow

This page is the authentication via the password credentials (ie login+password) in OAuth. This type of authentication is known in Oauth as: the Password Credentials Flow. the Resource owner password...
Oauth - Flow (Abstract Protocol Flow)

The abstract OAuth 2.0 flow describes the interaction between the four roles. For each type of grant, you got a flow: Type / Flow Description Client Type (Public / Private) Direction Type Redirection...
Card Puncher Data Processing
Process (Modeling)

A process may be: a natural process (ie organizational) performed by human: or a machine process: A process may be seen as a succession: of state: of event: Several processes...
Flow Chart Google Drawing
Process - Flow Chart

A Flow chart is a diagram that represents a flow with directed graph generally composed of: (vertice (node)) connected by directed lines (edge) The flow passes a material or logical thing from...
Finite Automata Customer Store Bank
Process - LifeCycle (Entity State) (Status)

In a process based model, every entity has a lifecycle (Status) that shows a finite number of distinct states. The status shows the state of an entity ie: finite automata See also: Sequence:...
Whsmith Computer Programming Stencil
Process - Visualization

Visualization of process A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. From nicklansley/status/1121125297951133696nicklansley...
Card Puncher Data Processing
Process - Visualization

A page how to represent a process visually. Use_case_diagram - shows the relationship between the user and the different use cases directed graphgraph visualization
Card Puncher Data Processing
UI - Action (Interaction | Event )

event in a graphical user interface (GUI) application Action (or interaction) are the actions that can perform a user (or programmatic client) with the application. The more action, the more engagement....

Share this page:
Follow us:
Task Runner