Sequence Diagram Styler
Interactive Mermaid.js visualizer
Speed:
-
1x
+
Play
Presentation Mode
Tooltips
Components
Design
Save/Load
Reset
Mermaid Code
Syntax:
Mermaid
PlantUML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
sequenceDiagram participant Client participant API Gateway participant Auth Service participant Database participant Cache Client->>API Gateway: POST /api/login API Gateway->>Auth Service: Validate credentials Auth Service->>Database: Query user record Database-->>Auth Service: User data Auth Service->>Cache: Store session token Cache-->>Auth Service: Confirmation Auth Service-->>API Gateway: JWT Token API Gateway-->>Client: 200 OK + Token Note over Client,Cache: Authentication Flow Complete Client->>API Gateway: GET /api/data (with JWT) API Gateway->>Auth Service: Verify token Auth Service->>Cache: Check session Cache-->>Auth Service: Session valid Auth Service-->>API Gateway: Token verified API Gateway->>Database: Fetch data Database-->>API Gateway: Data response API Gateway-->>Client: 200 OK + Data
Live Preview