OAuth 2.0 Flow — Reladraw template

OAuth 授权流程. Copy the source, paste into the official playground, done. No coordinates — every position is stated relative to something else.

Preview

Source (.reladraw)

Copynode client3 "Client app"
node authz "Authorization server"  below client3
node res "Resource server"  below authz
node owner "Resource owner"  right of authz
edge client3 -> owner "consent"
edge owner -> authz "grant"
edge authz -> client3 "code"
edge client3 -> res "access token"

How to use

1. Open the Reladraw playground
2. Paste the source above — the diagram re-solves live
3. Export SVG from the playground, or render locally: npx reladraw oauth-flow.reladraw -o out.svg

When to use this template

Client app, authorization server, resource server and the resource owner, with consent, grant, code and token edges.. Use it in API docs — the four nodes are exactly the spec's four roles.

How to customize

1. Add a step or node. Insert one line: node new_id 'New label' below anchor — placement is relative, so the solver re-flows the whole diagram instantly.
2. Relabel an edge. Edit the text after the arrow: edge a -> b 'your label' — labels are the fastest way to carry rates, protocols or percentages.
3. Change reading order. Swap a placement word: below to right of rotates a branch sideways without touching any other line.

FAQ

Related templates