Draw diagrams with Mermaid

Wiki pages draw diagrams from short text in the Mermaid format. The text stays in the page, so a diagram is easy to change and to compare in the page history. You do not need to learn Mermaid: the visual editor builds the text for you. Mermaid is one of our Open Source Friends.

What readers see

(enlarge)

Readers see the drawn diagram (box 1), also on shared pages. Every diagram offers Copy image and Download image.

Add a diagram

1. Edit the page and choose Insert › Diagram (Mermaid), or type /diagram on an empty line.
2. Kanroo inserts a small flowchart with its first label selected. Type to replace it.

Edit the code

(enlarge)

1. The code block (box 1) holds the diagram text. The drawing below it updates when you stop typing.
2. Code | Visual (box 2) switches between this view and the visual editor.

Edit visually

(enlarge)

1. Choose Visual (box 2). The source stays visible above the canvas.
2. Add node (box 1) adds a box and opens its label. For other diagram types the button reads Add participant, Add class, Add state, or Add entity.
3. Turn on Connect, then drag from one box to another to connect them. Holding Alt (Option on a Mac) while you drag does the same.
4. Ctrl/⌘+Z undoes canvas changes too.
5. Save the page as usual.

Visual editing works for flowcharts, sequence, class, state, and ER diagrams. Other Mermaid types, such as mind maps, are edited as code.

Tips

• Kanroo remembers your choice of Code or Visual in this browser.
• Keep diagrams small. A diagram scales to the page width, so a long flow gets small labels. Split it into two diagrams instead.
• If the text has an error, the page shows the code with a short hint. The page still saves.

Related

• What you can put in a wiki page
• Markdown reference