A typical authentication flow with four actors: User, Web Application, Auth Service, and Database
Original D2 Sequence Diagram
shape: sequence_diagram
user: User
app: Web Application
auth: Auth Service
db: Database
user -> app: Login Request
app -> auth: Validate Credentials
auth -> db: Check User
db -> auth: User Data
auth -> app: Auth Token
app -> user: Login Success
Generated D2 Code - Default
# Command: ./seq2boxes auth-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
"User" -> "Web Application": "1. Login Request" {
style.stroke: "#2196f3"
}
"Web Application" -> "Auth Service": "2. Validate Credentials" {
style.stroke: "#2196f3"
}
"Auth Service" -> "Database": "3. Check User" {
style.stroke: "#2196f3"
}
"Database" -> "Auth Service": "4. User Data" {
style.stroke: "#2196f3"
}
"Auth Service" -> "Web Application": "5. Auth Token" {
style.stroke: "#4caf50"
style.stroke-width: 2
}
"Web Application" -> "User": "6. Login Success" {
style.stroke: "#2196f3"
}
Generated D2 Code - Simple Arrows
# Command: ./seq2boxes --arrows simple auth-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
"User" <-> "Web Application"
"Web Application" <-> "Auth Service"
"Auth Service" <-> "Database"
Generated D2 Code - Vanilla Theme
# Command: ./seq2boxes --theme vanilla-nitro auth-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
"User" -> "Web Application": "1. Login Request" {
style.stroke: "#2196f3"
}
"Web Application" -> "Auth Service": "2. Validate Credentials" {
style.stroke: "#2196f3"
}
"Auth Service" -> "Database": "3. Check User" {
style.stroke: "#2196f3"
}
"Database" -> "Auth Service": "4. User Data" {
style.stroke: "#2196f3"
}
"Auth Service" -> "Web Application": "5. Auth Token" {
style.stroke: "#4caf50"
style.stroke-width: 2
}
"Web Application" -> "User": "6. Login Success" {
style.stroke: "#2196f3"
}