MERMAID TEMPLATE

Authenticated API request: Mermaid Template Example

Explain an authenticated web-to-API request with a Mermaid sequence template covering the browser, identity provider, and backend. Manage code and settings in one place, then export the result as SVG or PNG.

  • Live Mermaid preview
  • Automatic browser draft saving
  • Strict security rendering
  • Start instantly from templates

How to get started

  1. 1. Write Mermaid syntax in the Code panel.
  2. 2. Choose a diagram type and theme in Config.
  3. 3. Pan, zoom, and inspect the canvas.
  4. 4. Export as SVG or PNG, or sign in to save a project.

What you can adapt

  • Document session-token flows
  • Review authentication boundaries
  • Onboard developers to an API integration

How to use this template

  1. 1. Replace the participants with your application services.
  2. 2. Label the token or session checks explicitly.
  3. 3. Add rejected, expired, and successful response paths.
  4. 4. Review which system is trusted with each credential.

Authenticated API request Mermaid code

Copy this starting point, replace the labels with your own domain, and preview the result in the editor.

sequenceDiagram
  actor User
  participant Web
  participant Clerk
  participant API
  User->>Web: Save project
  Web->>Clerk: getToken()
  Clerk-->>Web: Session JWT
  Web->>API: PATCH /projects/:id
  Note over Web,API: Authorization: Bearer JWT
  API-->>Web: Save result

Template FAQ

What does an authenticated API sequence diagram show?

It shows the order of browser, identity provider, API, and data-service interactions during an authenticated request.

Can I add an error path?

Yes. Add alternative branches for missing, expired, or invalid credentials so the security behavior is explicit.

Sequence tips

Declare each participant explicitly.

Use solid and dotted arrows to distinguish requests and responses.

sequenceDiagram
  actor User
  participant Web
  participant Clerk
  participant API
  User->>Web: Save project
  Web->>Clerk: getToken()
  Clerk-->>Web: Session JWT
  Web->>API: PATCH /projects/:id
  Note over Web,API: Authorization: Bearer JWT
  API-->>Web: Save result

EXPLORE

Explore other diagrams

Flowchart

Visualize processes, decisions, and system flows with connected nodes.

Sequence

Map requests, responses, and asynchronous events between services.

Class

Design domain objects, properties, methods, inheritance, and relationships.

ER

Document database entities, fields, relationships, and cardinality.

State

Show how an object or workflow changes state in response to events.

Mindmap

Organize ideas and subtopics hierarchically around a central theme.

Gantt

Plan projects with tasks, milestones, dependencies, and dates.

C4

Explain software architecture from system context to detailed components.

User Journey

Describe user actions, sentiment, and experience across a journey.

Pie Chart

Compare parts of a whole with a simple Mermaid pie chart.

Quadrant

Position items across two axes to compare priorities or trade-offs.

Requirement

Connect requirements, elements, and verification relationships.

GitGraph

Explain branches, commits, merges, and release paths visually.

Timeline

Present milestones and events in chronological order.

ZenUML

Write concise sequence diagrams for object interactions and messages.

Sankey

Show how quantities flow between sources, stages, and destinations.

XY Chart

Plot values across two axes to show trends and comparisons.

Block

Arrange system blocks and connections to explain structure at a glance.

Packet

Document the fields and bit layout of a network packet.

Kanban

Organize work into visual columns such as backlog, active, and done.

Architecture

Show cloud services, infrastructure groups, and their connections.

Radar

Compare multiple options across a consistent set of dimensions.

Treemap

Show hierarchical values as nested areas for quick comparison.

Bar Chart

Compare discrete values across categories with vertical bars.

Line Chart

Show change over time or across ordered values with a line.

Product decision flow

Map the decisions and feedback loops from idea review to launch.

Incident response process

Document detection, triage, mitigation, resolution, and review.

Authenticated API request

Show how a web app uses a Clerk session token to call an API.

Checkout sequence

Describe the steps between a shopper, checkout, payment, and fulfillment.

Project domain model

Model projects, revisions, comments, and collaborators as domain objects.

SaaS database ERD

Explore a simple relational model for accounts, projects, and billing.

100%