Diagramming

Mermaid

Outline includes support for the popular Mermaid diagramming language. To insert a 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.

Examples

Gantt chart

gantt
  title Release plan
  dateFormat YYYY-MM-DD
  section Design
    Research     :done, r1, 2026-10-01, 5d
    Mockups      :done, r2, after r1, 4d
  section Build
    Editor       :active, b1, 2026-10-12, 10d
    API          :b2, after r2, 8d
  section Launch
    QA           :crit, q1, after b1, 4d
    Release      :milestone, after q1, 0d

Pie chart

pie title Time spent
  "Writing" : 45
  "Reviewing" : 25
  "Meetings" : 20
  "Other" : 10

Flowchart

flowchart LR
  A[fa:fa-lightbulb Idea] --> B{Worth it?}
  B -- Yes --> C[Build it]
  B -- No --> D[Park it]
  C --> E((Ship))
  D -.-> A
  click E "https://www.getoutline.com" "Outline"

Icons

FontAwesome icon packs fa-solid and fa-brands are also bundled, enabling the use of ~2,500 icons in your diagrams.

You can use these through the fa-solid: or fa-brands: prefix, for example:

architecture-beta
    service api(fa-solid:server)[API]
    service db(fa-solid:database)[Database]
    service repo(fa-brands:github)[GitHub]

Supported diagrams

The following diagram types are supported:

Type	Keywords
Flowchart	`graph`, `flowchart`
Swimlane	`swimlane-beta`
Sequence	`sequenceDiagram`
Class	`classDiagram`
State	`stateDiagram`, `stateDiagram-v2`
Entity relationship	`erDiagram`
Gantt	`gantt`
Git graph	`gitGraph`
Pie	`pie`
Mindmap	`mindmap`
Kanban	`kanban`
Timeline	`timeline`
User journey	`journey`
Quadrant chart	`quadrantChart`
XY chart	`xychart`, `xychart-beta`
Requirement	`requirementDiagram`
Sankey	`sankey`, `sankey-beta`
Architecture	`architecture-beta`
C4	`C4Context`, `C4Container`, `C4Component`, `C4Dynamic`, `C4Deployment`
Block	`block`, `block-beta`
Agentflow	`agentflow-beta`
Railroad	`railroad-beta`, `railroad-ebnf-beta`, `railroad-abnf-beta`, `railroad-peg-beta`
Tree view	`treeView-beta`
Cynefin	`cynefin-beta`
Wardley map	`wardley-beta`
Event modeling	`eventmodeling`
Use case	`usecase-beta`
Venn	`venn-beta`
Ishikawa	`ishikawa`, `ishikawa-beta`
Packet	`packet`, `packet-beta`
Radar	`radar-beta`
Treemap	`treemap`, `treemap-beta`
Info	`info`

Diagrams.net

Outline also includes support for diagrams.net, you can insert through the block menu or by typing /diagram directly – you will then see the option to insert a new diagram.

When a new diagram is added to the document the editor will be automatically opened where you can draw. Every time the diagram is saved it will be updated in Outline in realtime. Diagrams are stored in Outline as PNG’s with embedded data, as such they can be used like regular images – with the lightbox, captions, and comments.

Edit an existing diagram

To update an existing diagram in a document, simply highlight the image and click on the edit/pencil icon to reopen on diagrams.net.

Note that the Outline document must be kept open while drawing on diagrams.net for the data to be sent back and saved correctly.

Importing

Existing diagrams can be imported by using the File → Export as → PNG option on diagrams.net – then insert the image into a document.

Self-hosting

It is also possible to use your own instance of diagrams.net deployed on your own infrastructure. To setup, just go to Settings → Integrations → Diagrams.net and enter the hostname where diagrams.net is deployed.

Example