← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid sequence diagram online editor

Map requests, responses, and asynchronous events between services. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Sequence editor See an example

WHAT IT IS FOR

Make the important relationships clear

Show how users, services, and external systems exchange requests, responses, and asynchronous events over time.

  • Document REST and event-driven APIs
  • Explain authentication and payment flows
  • Review service boundaries with a team
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

sequenceDiagram
  actor User as User
  participant Web as Web app
  participant API as API
  User->>Web: Open project
  Web->>API: GET /projects/:id
  API-->>Web: Mermaid Code
  Web-->>User: Render diagram

HOW TO START

Create your diagram in four steps

  1. 1List the actors and systems involved.
  2. 2Add messages in the order they happen.
  3. 3Use activation, notes, or response arrows to clarify timing.
  4. 4Check the flow from the first request to the final response.

WRITING TIPS

Keep the diagram useful

Declare each participant explicitly.

Use solid and dotted arrows to distinguish requests and responses.

FAQ

Frequently asked questions

When should I use a sequence diagram?+

Use one when timing and message order matter, such as an API request, login flow, checkout, or service-to-service interaction.

Does Mermaid support asynchronous messages?+

Yes. Mermaid sequence syntax supports different arrow styles so you can distinguish requests, responses, and asynchronous events.

TEMPLATES

Start from a related template

Authenticated API request

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

Open template

Checkout sequence

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

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

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

Read the guide

Mermaid class diagram

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

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

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

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Mermaid Gantt chart

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

Read the guide

Ready to make a Sequence?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio