0%

Flow Charts for Documentation using Mermaid

November 26, 2025

Documentation

Mermaid

Contents

1. Example: Sequence Diagram for Google Authentication

Our FrontendBackend (Lambda)Google AuthenticationGoogle redirects browser to callback URL on login succeededRedirect browser again to our frontendToken consumed and is set into context (zustand)GET /loginLOGIN_URL for Google Authentication (scoped to company account only)GET LOGIN_URL (via popup window)302 Redirect to /login-googleGET /login-google (auth code)302 Redirect to <frontend-domain>/login-succeeded?jwtToken=...GET /login-succeeded?jwtToken=...  (via the same popup window)Our FrontendBackend (Lambda)Google Authentication
sequenceDiagram
  participant User as Our Frontend
  participant Lambda as Backend (Lambda)
  participant Google as Google Authentication

  User->>Lambda: GET /login
 
  Lambda-->>User: LOGIN_URL for Google Authentication (scoped to company account only)
  User->>Google: GET LOGIN_URL (via popup window)

  rect rgb(200, 220, 250)
    Note over User, Lambda: Google redirects browser to callback URL on login succeeded
    Google-->>User: 302 Redirect to /login-google
    User->>Lambda: GET /login-google (auth code)
  end
  
  rect rgb(200, 220, 250)
    Note over User, Lambda: Redirect browser again to our frontend
    Lambda-->>User: 302 Redirect to <frontend-domain>/login-succeeded?jwtToken=...
    User->>User: GET /login-succeeded?jwtToken=...  (via the same popup window)
    Note over User, User: Token consumed and is set into context (zustand)
  end

2. Example: Top Down or Left Right Diagram

Action A
Execute some_function
Action C
Action D
Action E

Change to graph LR; for left to right:

graph TD;
  A[Action A] --> B["Execute <code>some_function</code>"] 
  --> C[Action C]
  --> D[Action D]
  --> E[Action E];