How to create a Mermaid diagram and export PNG, SVG or Excalidraw

How to create a Mermaid diagram in the browser

Write the diagram as text in the "Diagram code (Mermaid)" field, watch the "Live preview" and click "Download PNG," "Download SVG" or "Convert to Excalidraw (editable)." Everything runs in your browser, with no sign-up. The editable Excalidraw conversion, with loose shapes, covers flowcharts, sequence, class, entity-relationship and state diagrams; every other type goes into the Excalidraw file as a single image.

1. Open the Mermaid editor: the "Diagram code (Mermaid)" field comes with a sample flowchart you can delete or edit.
2. Write the diagram as text: for example, "flowchart TD" on the first line and "A --> B" on the next. The "Live preview" redraws whenever you pause typing; if the syntax is wrong, Mermaid's own error message replaces the drawing and points to the line with the problem (for example, "Parse error on line 2"). The three buttons only become active when the preview is correct.
3. Click "Download PNG" for a high-resolution image with a white background (file diagrama.png) or "Download SVG" for the vector drawing (diagrama.svg), which stays sharp at any size.
4. If the diagram is a flowchart, a sequence, a class, an entity-relationship or a state diagram, click "Convert to Excalidraw (editable)" and download the diagrama.excalidraw file.
5. Open the file at excalidraw.com or in the Excalidraw app to keep editing by hand: move boxes, change colors, add notes.

What Mermaid is and why write diagrams as text

Mermaid is a way to describe a diagram with text instead of dragging shapes with the mouse. You write "A --> B" and the drawing appears: A becomes a box, B becomes another, and the arrow links them. The first line states the diagram type ("flowchart", "sequenceDiagram", "classDiagram" and so on), and the following lines describe the elements. Because the diagram is just text, it can live next to the project's code, be reviewed in a pull request (a code review) and be adjusted in seconds without repositioning every shape. The full syntax is in the official Mermaid documentation.

Which diagram types become editable Excalidraw (and which don't)

The preview and the PNG and SVG downloads work with any type Mermaid can draw. The conversion to an editable Excalidraw file (where every box, arrow and label becomes a shape you can move) only exists for some types. For the rest, the .excalidraw file carries the diagram as a single image: you can move and resize it, but not edit it box by box. If all you need is the picture, PNG or SVG does the same job.

• Become editable shapes in Excalidraw: flowchart (flowchart), sequence diagram (sequenceDiagram), class diagram (classDiagram), entity-relationship diagram (erDiagram) and state diagram (stateDiagram).
• Do not become loose shapes: Gantt chart (gantt), pie chart (pie), mind map (mindmap), gitGraph, user journey (journey) and the other types. For these, the Excalidraw file comes out with a single image; if you only want the picture, click "Download PNG" or "Download SVG."

The hint inside the editor lists gantt, pie and mindmap as starting points. They work in the preview and in the PNG and SVG downloads; in the Excalidraw conversion, they go into the file as a single image, not as editable shapes. The editor says so in the note below the buttons.

From Excalidraw to draw.io (and back)

If your team works in draw.io (diagrams.net), the path continues: convert the .excalidraw file you downloaded into an editable .drawio diagram with the Excalidraw → draw.io tool, which also runs in the browser. Shapes, arrows and labels are preserved, and recognized AWS icons come back as native draw.io shapes. What survives that switch, and the common mistakes, are in AWS architecture diagrams: converting draw.io and Excalidraw.

The opposite direction exists too: a .drawio or .xml diagram from draw.io becomes an editable .excalidraw scene, with the AWS icons embedded. Handy when someone sends you an architecture drawing in draw.io and you would rather touch it up in Excalidraw.

PNG or SVG: which one to download

• PNG: a regular image with a white background, generated in high resolution (up to 4 times the preview size, capped at 2,400 pixels on the longer side). Good for pasting into a Word document, a ticket, an email or a slide deck.
• SVG: a vector drawing that stays sharp at any size and takes up little space. The best choice for websites, documentation and large-format printing.
• Excalidraw: not an image but the diagram itself, open for editing. Pick it when you want to keep drawing freehand.

Common mistakes when writing Mermaid

• Skipping the first line with the diagram type: without "flowchart TD" (top to bottom) or "flowchart LR" (left to right), Mermaid does not know what to draw.
• Using parentheses, quotes or colons inside a label without protecting them: put the text in quotes inside the brackets, like A["Send (by email)"].
• Mixing up arrow types: "-->" is a solid arrow, "---" is a line with no head and "-.->" is a dashed arrow. One dash short and the line disappears.
• Typing everything at once and only then looking at the preview: since it updates whenever you pause, check line by line; the error message usually points to the line you just typed.

Everything happens in your browser: the diagram is drawn on your own device and no text or file is sent to any server. You can use it with diagrams of internal systems without worry.