# Diagramming

# Diagrams.net

Outline includes support for [diagrams.net](http://diagrams.net), you can insert through the [block menu](/doc/blocks-iwAQVA8kAf) 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](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/292079f8-0319-4111-bb5b-315e8ae8f14e/a157e84a-1388-430f-ae37-630c6c7d292f/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261001%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261001T063000Z&X-Amz-Expires=86400&X-Amz-Signature=180efb9e4ada346f14a20450d7e4cae7742676d02a73bd787d082359d045eebd&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =305x113")

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


:::info
**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

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/292079f8-0319-4111-bb5b-315e8ae8f14e/cc88cc0d-4f1b-4217-953c-17c96c402f25/Untitled%20Diagram.drawio%20%282%29.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261001%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261001T063000Z&X-Amz-Expires=86400&X-Amz-Signature=5af275d8f2ea36f09e65f44a9f6ea6d94046746c1c2ce638412a46b68dc79d4c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject "source=diagrams.net =685x437")

# Mermaid

Outline also includes support for the popular [Mermaid](https://mermaid.js.org/intro/) diagramming library. To insert a Mermaid diagram create a code block through the [block menu](/doc/blocks-iwAQVA8kAf) 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. 

## Example

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

## Icons

FontAwesome icon packs `fa-solid` and `fa-brands` are included - enabling use of \~2,500 icons across architecture diagrams and other supported diagram types.

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

```bash
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:

* Flowchart
* Sequence
* Gantt
* Class
* Git
* Entity relationship
* User journey
* Quadrant chart
* XY chart

---

**Documents**

- [Getting started](https://docs.getoutline.com/s/guide/doc/getting-started-CB6Ipl9Cdc)
- [Documents](https://docs.getoutline.com/s/guide/doc/documents-UiH1h0aQFQ)
- [Integrations](https://docs.getoutline.com/s/guide/doc/integrations-eUbAF2WAjF)
- [AI](https://docs.getoutline.com/s/guide/doc/ai-IFCYbrK7EU)
- [Administration](https://docs.getoutline.com/s/guide/doc/administration-GmaueCNdk1)
- [Import data](https://docs.getoutline.com/s/guide/doc/import-data-D2ZvLqz411)
- [Export data](https://docs.getoutline.com/s/guide/doc/export-data-Da6C7HqL8M)
- [Cloud hosting](https://docs.getoutline.com/s/guide/doc/cloud-hosting-CxJbubIhje)