Mermaid Diagrams

Create dedicated diagram documents for architecture diagrams, flowcharts, and other visual documentation. These diagrams display full-screen with interactive zoom and pan capabilities.

1. Click "New Document"
2. Select "Diagram" from the document type options
3. Choose a template or start from scratch
4. Write your Mermaid diagram code
5. Preview in the split-view editor
6. Click "Create" to save

When creating a new diagram, you'll see a template library with common diagram types. Templates provide a starting point and help you learn Mermaid syntax.

Available templates include:

• Flowcharts
• Sequence diagrams
• Gantt charts
• Class diagrams
• State diagrams
• And more

The diagram editor features a split-view with code on the left and live preview on the right. As you type, the diagram updates in real-time, making it easy to perfect your diagrams.

When viewing a standalone diagram document, you'll see it full-screen with:

• Zoom: Use mouse wheel or pinch gestures to zoom in/out
• Pan: Click and drag to move around the diagram
• Fullscreen: Press F for distraction-free viewing
• Exit Fullscreen: Press Esc to exit fullscreen mode

For more keyboard shortcuts, see the Keyboard Shortcuts documentation.

You can also embed Mermaid diagrams directly in markdown documents using code blocks:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```

MerDoc supports all Mermaid diagram types:

• Flowcharts
• Sequence diagrams
• Gantt charts
• Class diagrams
• State diagrams
• Entity relationship diagrams
• User journey diagrams
• Git graphs
• Pie charts
• And more

• Use templates to get started quickly
• Test diagrams in the preview pane before saving
• Use zoom and pan for large diagrams
• Keep diagrams focused and readable
• Use meaningful node and edge labels