What is the difference between solid and dashed arrows in sequence diagrams?

In Mermaid sequence diagrams, `A->>B` (solid open arrow) represents a request or call, while `B-->>A` (dashed open arrow) represents a response or return value. Solid arrows `->` and `-->` with filled heads indicate synchronous calls that block the caller. Using the right arrow type makes the direction of data flow immediately clear.

How do I show loops and conditional blocks in a sequence diagram?

Use `loop Label ... end` to show repeated interactions, `alt Condition ... else ... end` for conditional branches, and `opt Label ... end` for optional interactions. These block constructs help document retry logic, error handling paths, and feature-flag-gated behavior without creating separate diagrams.

Can I add notes to participants in a Mermaid sequence diagram?

Yes. Use `Note right of ParticipantName: Your note` or `Note over A,B: Spans two participants` to annotate the diagram. Notes are useful for documenting business rules, SLA requirements, or pointing out security-sensitive steps in an authentication flow.

How do I rename participants without changing the code everywhere?

Declare participants explicitly at the top with aliases: `participant U as User` then use the short alias `U` throughout the diagram. The label displayed in the rendered diagram will be the full name 'User'. This keeps the syntax concise while making the rendered output descriptive.

Mermaid Sequence Diagram Viewer

Paste Mermaid sequence diagram code and see it rendered instantly. Export to SVG or PNG. Free, runs entirely in your browser.

Mermaid Code

Preview

Enter Mermaid code to preview your diagram

Sequence diagrams are the go-to visualization for modeling interactions between system components over time. They show exactly who sends what message to whom, in what order — making them indispensable for documenting API integrations, authentication flows, microservice communication, and event-driven architectures. AI assistants like Claude and ChatGPT frequently generate Mermaid sequence diagrams to answer architecture questions: 'How does OAuth work?', 'Draw the login flow', 'Show me how a WebSocket handshake works'. The resulting Mermaid code is precise and readable, but you need a viewer to verify the diagram before pasting it into documentation. Zolkit's sequence diagram viewer renders participant lifelines, synchronous and asynchronous arrows, activation boxes, loops, alternatives, and notes — all the constructs from the Mermaid `sequenceDiagram` spec. Export the result as SVG for your wiki or as a crisp PNG for a slide presentation. Engineers use sequence diagrams in RFC documents, API design reviews, incident post-mortems, and onboarding guides.

Related Diagrams

← Mermaid Diagram Viewer Mermaid Class Diagram Viewer Mermaid State Diagram Viewer Mermaid Flowchart Viewer

Free Online Mermaid Diagram Viewer and Exporter

Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.

Instant Live Preview

Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.

100% Private

All rendering happens in your browser using mermaid.js. Your code is never sent to any server.

Export SVG & PNG

Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.

All Mermaid Diagram Types

Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.

AI Diagram Ready

Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.

Always Free

No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.

How to Preview a Mermaid Diagram

1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.