Meet Our New Mermaid Diagram Editor

A review process is easier to explain when people can see where a rejected request goes. An API conversation is easier to follow when each message has a sender and a recipient. Our new Mermaid diagram editor lets you draw those explanations from text, with a live preview beside the source. It runs locally in your browser, without an account, in English and French.

Mermaid describes the steps and relationships; the renderer arranges the diagram. That makes it useful for documentation you expect to revise, where changing a label or adding a branch should not mean redrawing everything by hand.

Start with the question you want to answer

Choose a flowchart for a decision process, a sequence diagram for an exchange between services, or a Gantt chart for a small project schedule. Templates give you a starting point, and insertable blocks help you extend it while watching the result. Open the preview full screen when you need to follow a longer path.

For example, a sequence diagram can distinguish a browser’s preflight request from the request that follows it. Our guide to debugging CORS preflight failures explains that exchange and what to check when it stops working.

Keep the explanation editable

Download a PNG for a document or presentation, and keep the Mermaid source for later changes. Both downloads are free. The source can live beside a README or specification, so a change to the process and its diagram can be reviewed together.

Download your source before leaving: the editor does not automatically save your work. For the next revision, reopen that file and continue editing.

Try the Mermaid editor with a process you need to explain. The guide below it includes five worked examples, advice on choosing a diagram type, and the tradeoffs to consider before using Mermaid for a larger drawing.