Mermaid Diagrams

Trilium supports Mermaid, which adds support for various diagrams such as flowchart, sequence diagram, class diagram, state diagram, pie charts, etc., all using a text description of the chart instead of manually drawing the diagram.

For the official documentation of Mermaid.js see mermaid.js.org/intro/.

Layouts#

Depending on the chart being edited and user preference, there are two layouts supported by the Mermaid note type:

• Horizontal, where the source code (editable part) is on the left side of the screen and the preview is to the right.
• Vertical, where the source code is at the bottom of the screen and the preview is at the top.

It's possible to switch between the two layouts at any time by pressing the icon in the Floating buttons area.

Interaction#

• The source code of the diagram (in Mermaid format) is displayed on the left or bottom side of the note (depending on the layout).
  • Changing the diagram code will refresh automatically the diagram.
• The preview of the diagram is displayed at the right or top side of the note (depending on the layout):
  • There are dedicated buttons at the bottom-right of the preview to control the zoom in, zoom out or re-center the diagram:
  • The preview can be moved around by holding the left mouse button and dragging.
  • Zooming can also be done by using the scroll wheel.
  • The zoom and position on the preview will remain fixed as the diagram changes, to be able to work more easily with large diagrams.
• The size of the source/preview panes can be adjusted by hovering over the border between them and dragging it with the mouse.
• In the Floating buttons area:
  • The source/preview can be laid out left-right or bottom-top via the Move editing pane to the left / bottom option.
  • Press Lock editing to automatically mark the note as read-only. In this mode, the code pane is hidden and the diagram is displayed full-size. Similarly, press Unlock editing to mark a read-only note as editable.
  • Press the Copy image reference to the clipboard to be able to insert the image representation of the diagram into a text note. See Image references for more information.
  • Press the Export diagram as SVG to download a scalable/vector rendering of the diagram. Can be used to present the diagram without degrading when zooming.
  • Press the Export diagram as PNG to download a normal image (at 1x scale, raster) of the diagram. Can be used to send the diagram in more traditional channels such as e-mail.

Errors in the diagram#

If there is an error in the source code, the error will be displayed in an information pane.

During the state of an error, the diagram will no longer be rendered and the previously working diagram will remain in the preview section.