---
title: Mermaid
description: Generate diagrams via code
---

Need to visualize a process or create a diagram? Mermaid lets you do that with just text—no design tools required. Write a simple description, and Mermaid turns it into a professional-looking diagram right in your note.

## Creating a Mermaid Diagram

There are a few ways to add one:

Type `/mermaid` and press Enter, or create a code block and set the language to `mermaid`. You can also use triple backticks with `mermaid` as the language if you're writing in Markdown. And if you want a quick start with an example, just press `Cmd/Ctrl + Shift + M`.

## Example

Here's a basic flowchart to show you how it works:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do this]
    B -->|No| D[Do that]
    C --> E[End]
    D --> E
```

That's it—Mermaid handles the rest and renders it for you.

## Viewing and Exporting Diagrams

Diagrams use your current theme's colors and update instantly when you switch themes.

Hover over a rendered diagram to:

- **View fullscreen** and zoom in, zoom out, or reset the zoom
- **Download diagram** as SVG or PNG

Exported files include the current theme's colors, so they look the same outside Octarine. PNG exports are rendered at 2x resolution.

## Rendering Engine

Octarine renders diagrams with [Pele](https://pele.run), a lightweight renderer that supports every diagram type built into Mermaid 12.1 and reads the same syntax. Diagrams load quickly, and a note only loads the code for the diagram types it uses. Layout and visual style can differ slightly from diagrams rendered by mermaid.js on other sites.

## Learn More

Mermaid supports flowcharts, sequence diagrams, class diagrams, and a lot more. For the full syntax and advanced features, check out the official [Mermaid documentation](https://mermaid.js.org/intro/).