Mermaid

Tutorials: https://mermaid.js.org/config/Tutorials.html

Online editor + exporter: https://mermaid.live

Installation

Mermaid has plugins for VS Code, Obsidian, works with GitHub, GitLab etc.

Full list of integrations: https://github.com/mermaid-js/mermaid/blob/develop/docs/misc/integrations.md

Flowcharts

Example:

graph LR  %% TD = Top->Down, LR = Left->Right etc.
S[Start] --> A;
A(Enter your EMail) --> E{Existing user?};
E -->|No| Create(Enter name)
E -->|Yes| Send(Send a letter to address)
Create --> EULA{Accept conditions}
EULA -->|Yes| Send
EULA -->|No|A

Result:

graph LR S[Start] --> A; A(Enter your EMail) --> E{Existing user?}; E -->|No| Create(Enter name) E -->|Yes| Send(Send a letter to address) Create --> EULA{Accept conditions} EULA -->|Yes| Send EULA -->|No|A

Sequence Diagrams

Example:

sequenceDiagram
autonumber               %% action numbers placed on every arrow
actor C as Client
Note left of C: User     %% [ right of | left of | over ] supported
participant I as Identity Provider
participant S as Service Provider
Note right of S: Blitz Identity
C->>S: Resource request
activate C
activate S
S-->>C: Redirect to Identity Provider
deactivate S
loop every hour           %% loop start
C->>I: Request Access Token
activate C
activate I
I-->>C: Access Token
deactivate C
deactivate I
end                       %% loop end
C->>S: Access granted
Note over C,S: Browser access
deactivate C

Result:

sequenceDiagram autonumber actor C as Client Note left of C: User participant I as Identity Provider participant S as Service Provider Note right of S: Blitz Identity C->>S: Resource request activate C activate S S-->>C: Redirect to Identity Provider deactivate S loop every hour C->>I: Request Access Token activate C activate I loop I->>I: Kerberos cert end I-->>C: Access Token deactivate C deactivate I end C->>S: Access granted Note over C,S: Browser access deactivate C