---
title: "Drawing diagrams"
description: "Write Mermaid diagram text in a bullet and Mimir draws it in place, in Mimir's colors."
---

Write a diagram as text in a bullet and Mimir draws it. The text is
[Mermaid](https://mermaid.js.org), the diagram language used by
Obsidian and many other tools.

The first line names the kind of diagram. The lines after it describe
what's in it.

```
flowchart LR
  Idea --> Draft
  Draft --> Review
  Review --> Draft
  Review --> Done
```

## Writing a diagram

**Mac**

Type the diagram's name on the first line, then press
<kbd>Shift-Return</kbd> to start the second line.

**iPhone and iPad**

Tap <kbd>Shift</kbd> before you type the diagram's name, so the keyboard
doesn't capitalize it. After you type the first line and pause, Mimir
offers **Add a line to the diagram**. Tap it.

With a hardware keyboard, press <kbd>Shift-Return</kbd> instead.

Once the bullet is a diagram, <kbd>Return</kbd> starts a new line inside
it. To leave, press <kbd>Return</kbd> on an empty last line. With the
caret at the very start of the diagram, <kbd>Return</kbd> adds an empty
bullet above it. Longer diagrams are easier to write on a keyboard, or to
paste in.

Leave the bullet and the text becomes the drawing. Click the drawing to
see and edit its text again.

To bring in a diagram from another tool, copy the text inside its
` ```mermaid ` fence, without the fence lines. A fenced diagram stays a
code block.

## Kinds of diagram

Any kind Mermaid supports works. A few to start with:

| First line | For |
| --- | --- |
| `flowchart` | Steps and decisions. Add `LR` for left to right or `TD` for top down. |
| `sequenceDiagram` | Who sends what to whom, in order. |
| `pie` | Parts of a whole. |
| `gantt` | A schedule. |
| `mindmap`, `timeline` | Ideas and events. |

```
pie title Where the week went
  "Writing" : 12
  "Meetings" : 6
  "Email" : 4
```

The first line has to start with the diagram's name, spelled exactly as
Mermaid writes it, with more lines below it. A bullet that only mentions a
diagram name in passing stays text.

## How a diagram looks

Every diagram uses Mimir's colors and type.
Color instructions in the text, such as `style` or `classDef`, are ignored.
On a narrow screen, a wide flowchart turns top-down.

Nothing inside a drawing is a link, and a diagram can't load images.

## When a diagram doesn't draw

If the text has a mistake, the bullet shows the text instead of a drawing.
Click it, and a line under the text says what's wrong and on which line.

A settings block at the top of a diagram, between two `---` lines, isn't
supported. A diagram that starts with one stays text. Delete the block to
draw it.

## In References

When a diagram links to a page, that page's References show the kind of
diagram, such as Flowchart, instead of its text.

## Copying, exporting, and sharing a copy

A diagram is the text in its bullet. Copying it, exporting your notes, and
searching all use that text.

A [shared copy](/publishing-a-page) shows the drawing. Click it in the
copy to see it larger. A diagram with text masked by tildes shows as its
text in the copy, with that text hidden.

Mimir draws diagrams with [Pele](https://pele.run), an open source library
that renders Mermaid diagrams.