mermaid ($4896961) · Snippets

%%{init: {'theme': 'default', 'themeVariables': {
  "actorBorder": "#000000",
  "actorBkg": "#000000",
  "actorTextColor": "#d1d5db",
  "signalColor": "#d1d5db",
  "signalTextColor": "#d1d5db",
  "lineColor": "#6b7280",
  "noteBkgColor": "#111111",
  "noteTextColor": "#d1d5db",
  "activationBorderColor": "#333333",
  "activationBkgColor": "#000000",
  "sequenceNumberColor": "#6b7280",
  "fontSize": "14px"
}}}%%

sequenceDiagram
    participant U as 🧑 User
    participant F as 💻 Frontend
    participant A as ⚙️ API
    participant D as 💾 Database

    U->>F: Click "Login"
    F->>A: POST /login (credentials)
    activate A
    A->>D: Query user record
    D-->>A: Return user info
    A-->>F: 200 OK (JWT token)
    deactivate A
    F-->>U: Redirect to Dashboard

    Note right of U: User sees dashboard<br/>after successful login

| Variable                | Example Value | Affects / Description                                                                        |
| ----------------------- | ------------- | -------------------------------------------------------------------------------------------- |
| `actorBorder`           | `#000000`     | Colour of the **border line** around each participant box (actor).                           |
| `actorBkg`              | `#000000`     | **Background fill** colour of the participant boxes (actors).                                |
| `actorTextColor`        | `#d1d5db`     | Text colour **inside** each participant box.                                                 |
| `signalColor`           | `#d1d5db`     | Colour of **message arrows** between participants.                                           |
| `signalTextColor`       | `#d1d5db`     | Colour of the **text labels** on message arrows.                                             |
| `lineColor`             | `#6b7280`     | General line colour (used for **lifelines**, **arrows**, and other connecting lines**).      |
| `noteBkgColor`          | `#111111`     | **Background** colour of “Note” boxes in the diagram.                                        |
| `noteTextColor`         | `#d1d5db`     | **Text colour** inside “Note” boxes.                                                         |
| `activationBorderColor` | `#333333`     | Border colour of **activation bars** (the thin rectangles shown during lifeline activation). |
| `activationBkgColor`    | `#000000`     | Fill colour of the **activation bars** themselves.                                           |
| `sequenceNumberColor`   | `#6b7280`     | Colour used if **sequence numbers** are shown (e.g. numbering messages).                     |
| `fontSize`              | `"14px"`      | Base **font size** for text in the diagram.                                                  |

%%{init: {'theme': 'default', 'themeVariables': {
  "actorBorder": "#000000",
  "actorBkg": "#000000",
  "actorTextColor": "#d1d5db",
  "signalColor": "#d1d5db",
  "signalTextColor": "#d1d5db",
  "lineColor": "#6b7280",
  "noteBkgColor": "#111111",
  "noteTextColor": "#d1d5db",
  "activationBorderColor": "#333333",
  "activationBkgColor": "#000000",
  "sequenceNumberColor": "#6b7280",
  "fontSize": "14px"
}}}%%