C4 — Dynamic

Runtime interaction sequence in C4 notation.

Template previewMermaid

Rendering…

Make it your own.

C4Dynamic
    title Login flow at runtime
    Person(user, "User")
    Container(spa, "SPA", "React")
    Container(api, "API Gateway", "Node.js")
    Container(auth, "Auth Service", "Go")
    ContainerDb(db, "Postgres", "User store")
    Rel(user, spa, "1. Submits credentials")
    Rel(spa, api, "2. POST /auth/login")
    Rel(api, auth, "3. Forwards request")
    Rel(auth, db, "4. SELECT user WHERE email=?")
    Rel(db, auth, "5. user row")
    Rel(auth, api, "6. Returns JWT")
    Rel(api, spa, "7. Sets HttpOnly cookie")
    Rel(spa, user, "8. Renders dashboard")