Mermaid Sequence Diagram Editor — Online, No Install

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

How import and export works

Sketmi 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 with a live preview, and then you export back. The native syntax is similar to Mermaid's, so the structure of a diagram (participants, messages, notes, fragments) survives the trip. Some details don't: arrowhead styles are normalised and activation lines are dropped, as listed under what is supported.

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 GW as API Gateway
    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 the Mermaid import supports, and what it doesn't

Sketmi handles Mermaid sequence diagrams only. Flowcharts, class diagrams, Gantt charts and other Mermaid diagram types are not supported.

Converted on import

• Participants and actors: participant, actor, and Mermaid aliases (participant GW as API Gateway).
• Messages: ->>, ->, -x, -) become solid arrows; -->>, -->, --x, --) become dashed arrows. The arrowhead style (open, cross or async) is not kept.
• Notes: Note over, Note left of, Note right of.
• Fragments: loop, alt/else, opt, critical, break, and par (the labels of its and branches are lost). A rect highlight is removed but the messages inside it are kept.
• Title: title My Diagram, or title: in the front matter.

Dropped or not converted

• activate and deactivate lines, and the +/- activation shortcuts on messages, are dropped. Add activation bars afterwards with the editor's own syntax (see the syntax guide).
• autonumber and %% comments are ignored.
• Other syntax, such as box or create/destroy, is not converted. Check the preview after importing.

Exporting to Mermaid

Export adds the sequenceDiagram header and swaps participant aliases into Mermaid's order, putting a display name that contains spaces in quotes. Messages are written as they are, and in Mermaid plain -> and --> draw lines without arrowheads; use ->> and -->> in the editor if you want heads in the exported file.

Where Mermaid diagrams render natively

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

Converting Mermaid to PlantUML

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

1. Import your Mermaid diagram via Import → Mermaid
2. Export via 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.

Frequently asked questions

Related resources