Skip to content
Foliosodev
Sign in Get started
Menu
On this page

Writing pages

Diagrams

Draw flowcharts, sequence diagrams and more by writing Mermaid or PlantUML source, and Folioso renders the picture on the page. This page covers inserting a diagram, editing its source and viewing large diagrams.

Insert a diagram

  • Click Diagram on the toolbar, or
  • Type / at the start of a line and choose Mermaid diagram.

A small sample flowchart appears. Hover over it and click Edit source to replace it with your own.

Mermaid and PlantUML

A diagram uses one of two engines. You pick it in the diagram editor, and you can switch at any time.

Engine Good for Example source
Mermaid Flowcharts, sequence, class and state diagrams, and many more graph TD; A[Start] --> B[End];
PlantUML UML diagrams: sequence, class, activity, component and state @startuml … @enduml

Each diagram editor has a link to the engine's syntax reference: Mermaid syntax → or PlantUML syntax →.

text
@startuml
Alice -> Bob: hello
Bob --> Alice: hi
@enduml

The first PlantUML diagram you open can take a moment to appear while its renderer loads.

Edit a diagram

You need to be able to edit the page.

  1. Hover over the diagram and click Edit source.
  2. In Edit diagram, choose Mermaid or PlantUML.
  3. Write the source in the left pane. The preview on the right redraws a moment after you stop typing.
  4. Click Save, or press Ctrl Enter (⌘ Enter on a Mac).

Click Cancel or press Escape to close without saving.

Use Split, Editor and Preview at the top to show both panes, just the source or just the drawing. On a phone the editor opens on Editor.

When the source has a mistake

If the source can't be drawn, the preview shows Diagram error with the engine's message above the last version that worked, and Save stays off with "Fix the diagram error to save" until you fix it. The diagram on the page doesn't change until you save working source.

Indenting the source

In the source pane, Tab indents and Shift Tab outdents, using your Tab Size setting. To use Tab to move between the editor's buttons instead, press Ctrl M. Press it again to go back to indenting. The hint at the bottom of the editor shows which mode you're in.

View a large diagram

Hover over the diagram and click Expand to open it in a viewer.

  • Scroll with the mouse wheel to zoom in and out, or use Zoom in and Zoom out.
  • Drag to move around.
  • Click Fit and centre to see the whole diagram again.

The preview in the diagram editor works the same way.

Move a diagram

Drag the diagram to another place on the page.

Diagrams elsewhere

  • Diagrams follow your light or dark theme.
  • Export as Markdown writes each diagram as a fenced mermaid or plantuml block, so tools that render Mermaid, such as GitHub, can draw it.
  • Search finds the text labels in your diagrams, such as box and arrow labels, but not the syntax around them.
  • When you're editing together, a diagram someone else is editing is locked for everyone else, with a note saying who's editing it.