Mermaid Editor

What it's for

Draw a diagram from a few lines of text. Mermaid is a text format for flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts, pie charts, mind maps and more, used in README files, wikis and documentation. This page shows the diagram as you type, so you can get it right before pasting it elsewhere, and saves it as a picture.

For example, when you’re writing a flowchart for a README and want to see it drawn, or to save it as an image for a slide.

How to use it

Type or paste Mermaid text. The diagram is redrawn a moment after you stop typing.

Start from puts a starting point in the box: choose a kind of diagram (flowchart, sequence, class and so on) and its short example replaces the text, after asking first if the box has text. Undo brings the old text back. Reference opens a panel for the kind of diagram the text is, or the one you choose in its list: a summary, a few short examples, and Insert to put one at the cursor (in an empty box, it starts a diagram of that kind). The panel’s link to the full syntax on mermaid.js.org needs a connection.

Choose a Theme, remembered in the browser: Match the site (light, or dark when your system is set to dark), Light, Dark, Neutral (greys, for documents), Print (black on white, no fills, for printing and photocopies), Forest (greens and browns), Ocean (blues and teals), Blueprint (white on deep blue), Paper (off-white and sepia), Pastel (soft fills, dark text), Midnight (near-black with bright accents), and High contrast light or High contrast dark. Transparent background leaves the background out of the saved picture, so it sits on whatever it is put on; on the page it shows a checkerboard behind the diagram. Rounded corners (on by default) turns off the rounding of boxes when it is unticked. Save SVG and Save PNG download the diagram, with the theme’s colours and background in them; the PNG can be made at 1×, 2× or 4× the size, and a very large diagram is drawn smaller than that if the browser couldn’t make it. Copy SVG copies the SVG code, Copy as Markdown copies the text in a ```mermaid block ready for a README, and Save text downloads it as a .mmd file.

From SQL opens a box for CREATE TABLE statements (SQLite, PostgreSQL or MySQL). Make an ER diagram turns them into an erDiagram in the editor, after asking first if the editor has text; Undo brings the old text back. Each table becomes an entity with its columns’ types and names, marked PK (primary key, inline or as a table constraint), FK (foreign key, inline REFERENCES or FOREIGN KEY … REFERENCES) and UK (a single-column UNIQUE). Each foreign key draws a line from the table it points to: ||--o{ (one to many) when the column can be empty, ||--|{ when it is NOT NULL, and one-to-one (||--o|, ||--||) when the column is also unique or is the whole primary key. Quoted names ("x", backticks, [x]) and comments (--, /* */) are understood, and other statements are skipped. Spaces and symbols in names become _. It reads the common forms, not every dialect’s syntax.

Zoom and pan the diagram with the Zoom in, Zoom out and Fit buttons, Ctrl or ⌘ with the mouse wheel (or a pinch on a touch screen or trackpad) to zoom where the pointer is, and dragging to move it. With the diagram pane focused (Tab to it), + and - zoom, 0 fits it and the arrow keys move it. Your zoom and place stay as you type; the diagram is fitted to the pane when it is first drawn, when you press Fit, when the kind of diagram changes, and when full screen or the layout changes the pane’s size.

Full screen gives the editor and diagram the whole screen, with the buttons and message line kept along the edges. The Layout list (shown in full screen, remembered) chooses Side by side, Stacked, Diagram only or Text only; under 700 pixels wide, Side by side becomes Stacked. Drag the divider between the two, or focus it and use the arrow keys (Home and End go to the ends); its place is remembered. Press Esc or Exit full screen to leave. Where the browser has no full screen for part of a page (iPhone Safari, for one), the editor fills the window instead.

The text is coloured as you type (comments, keywords, links, labels and strings), with line numbers. If it can’t be drawn, the place is marked in red and the message line has a Go to line button that puts the cursor there. Typing help (on by default, remembered) helps as you type: Enter keeps the line’s indent and adds a level after subgraph, alt, opt, loop, par, critical, rect, box, section, break or a line ending in {; typing end or } alone on a line takes a level off; Tab indents and Shift+Tab outdents the line or selected lines (two spaces each); typing [, (, { or " adds the closing one, and typing the closer steps over it; Backspace between an empty pair removes both. Undo takes back each of these. None of it happens inside a string or a %% comment. Because Tab indents, press Esc and then Tab to move on to the next control, or untick Typing help to have Tab always move on. In the full screen that fills the window (see above) Esc leaves it instead, which also moves you on.

With Typing help on, a list of suggestions opens under the cursor as you type a word: the diagram types on the first line, then that type’s keywords, blocks that go in whole with the cursor left inside (subgraph … end, alt … else … end, loop, opt, par, class … { }, state … { }, classDef, section), and the names you have already used (nodes, participants, classes, states, entities). Press Ctrl+Space (or Alt+/, for computers where Ctrl+Space belongs to the system) to open it without typing, and after a name and a space to get that type’s arrows. Up and Down move through it, Tab takes the highlighted suggestion, Enter takes one you have moved to with the arrows (a plain Enter is still a new line), and Esc closes it; clicking a suggestion takes it, and typing on narrows it. It stays shut inside strings, %% comments, labels and titles. A screen reader is told once, when the list opens, how many suggestions there are, and reads each one as you move. Undo takes back a suggestion in one step.

Open a file takes a .mmd, .mermaid, .md or .txt file, chosen, dropped on the page or pasted. From a Markdown file it takes the first mermaid block (fenced with backticks or tildes) and says how many there were. If the text can’t be drawn, the message line says which line and column and what was expected, and the last good diagram stays on screen, dimmed. The text is kept in this browser and put back next time, and Copy a link keeps the text and the theme settings in the link.

Example

Click Try an example, or type this:

flowchart TD
  A[Start] --> B{Is it working?}
  B -- Yes --> C[Ship it]
  B -- No --> D[Fix it]
  D --> B

The message line says “Drawn: flowchart.” and you get four boxes and a question, with a loop from “Fix it” back to it. Change TD to LR to lay it out left to right. To see an error, add a last line with B --> [: the message becomes “Line 6, column 9: Expecting ‘NODE_STRING’, got ‘SQS’”.

Good to know

The diagram is drawn in your browser by Pele, not by Mermaid itself, and nothing is uploaded. It understands the diagram types built into Mermaid 12.1.0, but lays them out its own way, so positions, spacing and lines differ from what GitHub or mermaid.live draw. Theme settings in the text (themeVariables and %%{init}%%) are ignored, because the Theme list sets the colours; labels are plain text, so HTML in labels, click callbacks and links, images, icons (fa:), ZenUML and other plugins are not drawn, and $$…$$ maths is shown as written. The drawing is shown as a picture, so nothing in the text can run, and a saved SVG holds only what Pele drew plus the theme’s colours and fonts. Saved files use system fonts, which may differ on another computer. Check a diagram in the place it will be used.