Style

Options

Theme

Colors

Participants

Messages

→
→
→
→
→
→
→

Preview

ClientAPI GatewayAuth ServiceDatabasePOST /loginvalidateCredentials()SELECT useruser datagenerateToken()JWT token generationtoken200 OK + token

Export

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sequence Diagram</title>
  <style>
.sequence-diagram {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}
.sequence-diagram svg {
  font-family: system-ui, -apple-system, sans-serif;
}
.participant-box {
  fill: #eff6ff;
  stroke: #3b82f6;
  stroke-width: 2;
}
.participant-text {
  fill: #1e293b;
  font-size: 12px;
  font-weight: 600;
}
.lifeline {
  stroke: #64748b;
  stroke-dasharray: 8 4;
}
.message-line {
  stroke: #64748b;
  stroke-width: 2;
}
.message-text {
  fill: #1e293b;
  font-size: 11px;
}
.activation-bar {
  fill: #dbeafe;
  stroke: #3b82f6;
}
.note-box {
  fill: #fef3c7;
  stroke: #f59e0b;
}
.note-text {
  fill: #1e293b;
  font-size: 9px;
}
  </style>
</head>
<body>
  <div class="sequence-diagram">
    <svg width="600" height="470" viewBox="0 0 600 470">
  <line x1="75" y1="60" x2="75" y2="450" class="lifeline" />
  <line x1="225" y1="60" x2="225" y2="450" class="lifeline" />
  <line x1="375" y1="60" x2="375" y2="450" class="lifeline" />
  <line x1="525" y1="60" x2="525" y2="450" class="lifeline" />
  <rect x="25" y="20" width="100" height="40" class="participant-box" rx="4" />
  <text x="75" y="44" text-anchor="middle" class="participant-text">Client</text>
  <rect x="175" y="20" width="100" height="40" class="participant-box" rx="4" />
  <text x="225" y="44" text-anchor="middle" class="participant-text">API Gateway</text>
  <rect x="325" y="20" width="100" height="40" class="participant-box" rx="4" />
  <text x="375" y="44" text-anchor="middle" class="participant-text">Auth Service</text>
  <rect x="475" y="20" width="100" height="40" class="participant-box" rx="4" />
  <text x="525" y="44" text-anchor="middle" class="participant-text">Database</text>
  <line x1="75" y1="110" x2="225" y2="110" class="message-line" marker-end="url(#arrow)" />
  <text x="150" y="102" text-anchor="middle" class="message-text">POST /login</text>
  <line x1="225" y1="160" x2="375" y2="160" class="message-line" marker-end="url(#arrow)" />
  <text x="300" y="152" text-anchor="middle" class="message-text">validateCredentials()</text>
  <line x1="375" y1="210" x2="525" y2="210" class="message-line" marker-end="url(#arrow)" />
  <text x="450" y="202" text-anchor="middle" class="message-text">SELECT user</text>
  <line x1="525" y1="260" x2="375" y2="260" class="message-line" marker-end="url(#arrow)" />
  <text x="450" y="252" text-anchor="middle" class="message-text">user data</text>
  <line x1="375" y1="310" x2="375" y2="310" class="message-line" marker-end="url(#arrow)" />
  <text x="375" y="302" text-anchor="middle" class="message-text">generateToken()</text>
  <line x1="375" y1="360" x2="225" y2="360" class="message-line" marker-end="url(#arrow)" />
  <text x="300" y="352" text-anchor="middle" class="message-text">token</text>
  <line x1="225" y1="410" x2="75" y2="410" class="message-line" marker-end="url(#arrow)" />
  <text x="150" y="402" text-anchor="middle" class="message-text">200 OK + token</text>
</svg>
  </div>
</body>
</html>