Mermaid

Mermaid Sequence Diagram Editor — Online, No Install

Paste a Mermaid sequenceDiagram block into SeqDiagram and edit it visually in your browser. Export back to Mermaid, or convert to PlantUML, PNG, or SVG — no Java, no CLI, no sign up.

Open Editor PlantUML Editor

How import and export works

SeqDiagram does not edit raw Mermaid syntax directly. Instead, it works like this: you import a Mermaid diagram, the editor converts it to its native plain-text format, you edit it visually with a live preview, and then you export back. The native syntax is similar to Mermaid's — most diagrams round-trip cleanly.

1

Open the editor at seqdiagram.com — no sign up needed.

2

Click Import → Import Mermaid in the toolbar. Paste your sequenceDiagram block (the sequenceDiagram keyword is optional).

3

Edit the diagram in the text panel. The diagram re-renders live as you type.

4

Export when done. Use Export → Export Mermaid for a .mmd file, Export PlantUML for .puml, or the PNG/SVG buttons for images.

Mermaid syntax example

Here is a Mermaid sequence diagram for a REST API request with a cache check. You can paste this directly into the Import Mermaid dialog:

sequenceDiagram
    actor Client
    participant API Gateway as GW
    participant Backend
    participant Cache

    Client->>GW: GET /api/products
    GW->>Cache: Check cache key
    Cache-->>GW: Cache miss
    GW->>Backend: Forward request
    alt 200 OK
        Backend-->>GW: 200 + JSON payload
        GW->>Cache: Store response (TTL 5min)
        GW-->>Client: Return products
    else Error
        Backend-->>GW: 500 Internal Error
        GW-->>Client: 503 Try again later
    end

After importing, you can rename participants, add messages, reorder the flow, and export back.

What Mermaid syntax is supported

SeqDiagram's Mermaid importer handles the most common sequence diagram constructs:

Where Mermaid diagrams render natively

A .mmd file exported from SeqDiagram can be used anywhere Mermaid is supported:

PlatformHow to use it
GitHubWrap in a fenced code block tagged mermaid in any .md file or PR description
GitLabSame fenced code block syntax — renders in issues, MRs, and wikis
NotionInsert a code block, set language to Mermaid, paste the content
ObsidianFenced code block tagged mermaid in any note
VS CodeMarkdown Preview Mermaid Support extension
ConfluenceRequires a third-party Mermaid macro (PlantUML renders natively — see below)

Converting Mermaid to PlantUML

If your diagram needs to end up in Confluence or a JetBrains IDE, you can convert it in two steps without any local tooling:

  1. Import your Mermaid diagram via Import → Import Mermaid
  2. Export via Export → Export PlantUML to download a .puml file

The resulting PlantUML file uses standard @startuml / @enduml notation and renders in any PlantUML-compatible tool. See the PlantUML editor guide for more on PlantUML workflows.

Try it now — free, no account

Open the editor, paste your Mermaid diagram, and export in seconds.

Open Editor

Frequently asked questions

Can I edit Mermaid sequence diagrams online?

Yes. Paste your Mermaid sequenceDiagram block into SeqDiagram and it converts it to the native editor format automatically. You can then edit it visually and export back to Mermaid, PlantUML, PNG or SVG. No install required.

Does it export back to Mermaid?

Yes. After editing, use the Export Mermaid option in the toolbar to download a .mmd file compatible with GitHub, GitLab, Notion, and Obsidian.

What Mermaid syntax does this support?

SeqDiagram supports Mermaid sequenceDiagram blocks including participants, actors, solid and dashed arrows (->>, -->>), activation boxes, notes, loop, alt/else, and opt fragments. The sequenceDiagram keyword is optional on import.

Can I convert a Mermaid diagram to PlantUML?

Yes. Import your Mermaid diagram via Import Mermaid, then use Export PlantUML to download a .puml file. This is the fastest way to convert between the two formats without any local tooling.

Is this a Mermaid live editor?

It is a live editor, but it does not edit raw Mermaid syntax — it converts Mermaid to its own plain-text format and renders that live. If you need to edit raw Mermaid syntax directly, the official Mermaid Live Editor at mermaid.live is the right tool. SeqDiagram is better suited for editing, sharing, and exporting diagrams without any workflow setup.

Related resources