Mermaid diagrams

A code block marked mermaid shows as a diagram.

Mermaid turns a few lines of text into a diagram: a flowchart, a sequence of steps, a database layout and more. In Listspace you write that text in a code block marked mermaid, and the block shows as its diagram when you read an item, a document, a comment or a shared board.

Add a diagram

1. Open an item or a document and choose Edit.
2. Type three backticks and the word mermaid, then press Enter. You get a code block that is already set to Mermaid.
3. Or click in any code block and pick Mermaid diagram under Language.
4. Write the diagram, for example a first line flowchart LR and a second A --> B, then choose Save changes.

The editor keeps showing the code, so you can change it. Pick another language under Language and the block shows as code again.

A comment can hold a diagram too: write the same code block in it.

What you see

When you read the item, the code block shows as the diagram, in the light or dark colors of the app. Hover over it for three buttons:

• Full screen opens it over the whole window, where you can zoom and move it.
• Download saves it as an SVG image or a PNG image.
• Copy source copies the Mermaid code.

A diagram that cannot be drawn, for example because of a typo, stays as code with the note Diagram could not be drawn, so nothing gets lost. That also happens when the code is over 50,000 characters. Links and scripts inside a diagram do not run.

Print or save as PDF prints the diagrams, and Word (.docx) puts them in the file as pictures (see Export your boards). An attached .mmd or .mermaid file opens as its diagram, with View source for the code.

Let your AI draw it

A diagram is only text, so your AI can write one. Ask for it in your own words, for example "Draw the signup flow as a Mermaid diagram in the item Signup". It writes the code block in the description, a document or a comment, and Listspace draws it.