Mermaid Diagrams

VMark supports Mermaid diagrams for creating flowcharts, sequence diagrams, and other visualizations directly in your Markdown documents.

Inserting a Diagram

Using Keyboard Shortcut

Type a fenced code block with the mermaid language identifier:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do another thing]
```

Using Slash Command

1. Type / to open the command menu
2. Select Mermaid Diagram
3. A template diagram is inserted for you to edit

Editing Modes

Rich Text Mode (WYSIWYG)

In WYSIWYG mode, Mermaid diagrams are rendered inline as you type. Click on a diagram to edit its source code.

Source Mode with Live Preview

In Source mode, a floating preview panel appears when your cursor is inside a mermaid code block:

Feature	Description
Live Preview	See rendered diagram as you type (200ms debounce)
Drag to Move	Drag the header to reposition the preview
Resize	Drag any edge or corner to resize
Zoom	Use − and + buttons (10% to 300%)

The preview panel remembers its position if you move it, making it easy to arrange your workspace.

Supported Diagram Types

VMark supports all Mermaid diagram types:

Flowchart

graph LR
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B

```mermaid
graph LR
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Sequence Diagram

sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
    Alice->>Bob: How are you?
    Bob-->>Alice: I'm good, thanks!

```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```

Class Diagram

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal : +swim()
    Duck : +String beakColor
    Duck : +quack()

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +swim()
```

State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Start
    Processing --> Complete : Done
    Processing --> Error : Fail
    Complete --> [*]
    Error --> Idle : Retry

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Start
    Processing --> Complete : Done
```

Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : "is in"

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
```

Gantt Chart

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Research    :a1, 2024-01-01, 30d
    Design      :a2, after a1, 20d
    section Phase 2
    Development :a3, after a2, 40d
    Testing     :a4, after a3, 15d

```mermaid
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Research    :a1, 2024-01-01, 30d
```

Pie Chart

pie title Distribution
    "Category A" : 40
    "Category B" : 30
    "Category C" : 20
    "Category D" : 10

```mermaid
pie title Distribution
    "Category A" : 40
    "Category B" : 30
```

Git Graph

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

```mermaid
gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop
```

Tips

Syntax Errors

If your diagram has a syntax error:

• In WYSIWYG mode: the code block shows the raw source
• In Source mode: the preview shows "Invalid mermaid syntax"

Check the Mermaid documentation for correct syntax.

Theme Integration

Mermaid diagrams automatically adapt to VMark's current theme (light or dark mode).

Export

When exporting to HTML or PDF, Mermaid diagrams are rendered as SVG images for crisp display at any resolution.

Learning Mermaid Syntax

VMark renders standard Mermaid syntax. To master diagram creation, refer to the official Mermaid documentation:

Official Documentation

Diagram Type	Documentation Link
Flowchart	Flowchart Syntax
Sequence Diagram	Sequence Diagram Syntax
Class Diagram	Class Diagram Syntax
State Diagram	State Diagram Syntax
Entity Relationship	ER Diagram Syntax
Gantt Chart	Gantt Syntax
Pie Chart	Pie Chart Syntax
Git Graph	Git Graph Syntax

Practice Tools

• Mermaid Live Editor - Interactive playground to test and preview diagrams before pasting into VMark
• Mermaid Documentation - Complete reference with examples for all diagram types

TIP

The Live Editor is great for experimenting with complex diagrams. Once your diagram looks right, copy the code into VMark.