CCLee / Blog / Flow Charts for Documentation using Mermaid

Flow Charts for Documentation using Mermaid

1.Example: Sequence Diagram for Google Authentication
2.Example: Top Down or Left Right Diagram

November 26, 2025

Documentation

Mermaid

1.Example: Sequence Diagram for Google Authentication
2.Example: Top Down or Left Right Diagram

1. Example: Sequence Diagram for Google Authentication

1sequenceDiagram
2  participant User as Our Frontend
3  participant Lambda as Backend (Lambda)
4  participant Google as Google Authentication
5
6  User->>Lambda: GET /login
7 
8  Lambda-->>User: LOGIN_URL for Google Authentication (scoped to company account only)
9  User->>Google: GET LOGIN_URL (via popup window)
10
11  rect rgb(200, 220, 250)
12    Note over User, Lambda: Google redirects browser to callback URL on login succeeded
13    Google-->>User: 302 Redirect to /login-google
14    User->>Lambda: GET /login-google (auth code)
15  end
16  
17  rect rgb(200, 220, 250)
18    Note over User, Lambda: Redirect browser again to our frontend
19    Lambda-->>User: 302 Redirect to <frontend-domain>/login-succeeded?jwtToken=...
20    User->>User: GET /login-succeeded?jwtToken=...  (via the same popup window)
21    Note over User, User: Token consumed and is set into context (zustand)
22  end

2. Example: Top Down or Left Right Diagram

Change to graph LR; for left to right:

1graph TD;
2  A[Action A] --> B["Execute <code>some_function</code>"] 
3  --> C[Action C]
4  --> D[Action D]
5  --> E[Action E];

Contents

Contents

1. Example: Sequence Diagram for Google Authentication

2. Example: Top Down or Left Right Diagram

Blog Explorer