digraph techviz {
  graph [rankdir=LR, splines=ortho, nodesep=0.55, ranksep=0.85];
  node [fontname=Helvetica, fontsize=11, margin="0.18,0.12", style="rounded,filled", fillcolor=white, color="#2d4357", penwidth=1.5];
  edge [fontname=Helvetica, fontsize=10, color="#364b5f", penwidth=1.4, arrowsize=0.75];
  n0 [label="브라우저 SPA", shape=box, style="rounded,filled"];
  n1 [label="Keycloak", shape=box, style="rounded,filled"];
  n2 [label="Resource Server", shape=box, style="rounded,filled"];
  n0 -> n1 [label="authorization request · S256 challenge", style=solid];
  n1 -> n0 [label="callback · code + state", style=solid];
  n0 -> n1 [label="token request · code + verifier", style=solid];
  n1 -> n0 [label="access + refresh + ID token", style=solid];
  n0 -> n2 [label="GET /api/me · Bearer access token", style=solid];
  n2 -> n0 [label="subject · username · issuer · audience", style=solid];
}