Sequence diagram maker

Explain who does what, and in which order

A sequence diagram focuses on participants and messages rather than decision branches. Begin with the browser-local conversion example or add participants for the people and components in your process. Give each participant a short, recognizable title. Their horizontal positions can be adjusted by dragging or with the X coordinate in the properties panel. Each participant has a lifeline, and messages appear in the order shown in the message list. Add a connection from the sender to the receiver, write the message text, and choose a solid or dashed line. A message to the same participant is drawn as a self-call instead of disappearing into a zero-length line.

Refine the sequence without rewriting everything

The Earlier and Later buttons move a message through the ordered list. This changes its vertical position in the diagram and the order in the exported Mermaid source. A common pattern is a solid request followed by a dashed response, but the text should state what actually happens in your system. Select any message to change its endpoints or wording. The supported Mermaid subset uses sequenceDiagram, participant or actor declarations, optional participant aliases, and ->> or -->> message arrows. Actors are shown as labeled participant boxes. Loops, alternatives, notes, activation bars and configuration statements are outside this compact editor. Unsupported input is rejected before it can replace your work. Keep a separate source document if those richer concepts are required.

Keep an editable copy as well as an image

The editor runs in your browser. Diagram content is not sent to a conversion server, and no account is required. Changes are saved in localStorage for this browser and this tool. That is convenient for returning to a draft, but it is not a backup: private browsing, clearing site data, or changing devices can remove access to it. Download the Mermaid file whenever you reach a useful milestone. It contains the diagram structure and a comment with the current node positions. SVG is useful for documents and high resolution printing; PNG is useful for slides and messages. Both contain the diagram itself, without editor controls. Before sharing, open the exported file and check that all labels are readable. Very large PNG exports are rejected with a visible error; move nodes closer together or choose SVG. The ZIP bundle collects a matching PNG, SVG, Mermaid file and JSON model in one download. Use the Mermaid contents when importing back into this editor.

Frequently asked questions

Related tools

• Flowchart maker

  Draw processes, connect decisions and export editable Mermaid, SVG or PNG.

• ER diagram maker

  Model tables, keys and relationships. Export diagrams and Mermaid text.

• Mind map maker

  Organise ideas into a tree and download PNG, SVG or Mermaid.