Diagrams

Mermaid

Outline includes support for the popular Mermaid diagramming library. To insert a Mermaid diagram create a code block through the block menu and change the language to “Mermaid diagram” or type /diagram directly – you will then see the option to switch between a source code and diagram view.

Tip
Outline documents include a “full width” display option in the document options that works well with these diagrams.

Example

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later

Supported diagrams

Version v11.9.0 is bundled with Outline, which supports the following diagram types:

  • Flowchart

  • Sequence

  • Gantt

  • Class

  • Git

  • Entity relationship

  • User journey

  • Quadrant chart

  • XY chart