Mermaid Diagrams

Create beautiful diagrams using simple text syntax

Mermaid is a powerful diagramming tool that lets you create flowcharts, sequence diagrams, Gantt charts, and more using simple text-based syntax. AnySlate renders Mermaid diagrams directly in your preview, making it easy to create and maintain visual documentation alongside your markdown content.

Overview

Live Editor

See your diagrams render in real-time as you type the Mermaid syntax.

PNG/SVG Export

Export diagrams as PNG or SVG images for use in other applications.

Custom Styling

Customize colors, fonts, and themes for your diagrams.

Inline Preview

Diagrams render directly in your document preview.

Creating a Diagram

To create a Mermaid diagram, use a fenced code block with the language identifier set to mermaid:

```mermaid

graph TD

A[Start] --> B[End]

```

Supported Diagram Types

AnySlate supports all 8 major Mermaid diagram types. Click to expand each example:

Flowchart

Create flow diagrams with nodes and connections

Syntax example:

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

Sequence Diagram

Visualize interactions between participants over time

Syntax example:

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

Gantt Chart

Display project schedules and timelines

Syntax example:

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Task 1 :a1, 2024-01-01, 30d
    Task 2 :after a1, 20d
    section Phase 2
    Task 3 :2024-02-15, 25d

Class Diagram

Show class structures and relationships in OOP

Syntax example:

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

State Diagram

Represent states and transitions in a system

Syntax example:

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : Start
    Running --> Paused : Pause
    Paused --> Running : Resume
    Running --> [*] : Stop

ER Diagram

Model database entity relationships

Syntax example:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        int id
        string name
        string email
    }
    ORDER {
        int id
        date created
    }

Pie Chart

Display proportional data in a circular chart

Syntax example:

pie title Browser Usage
    "Chrome" : 65
    "Firefox" : 15
    "Safari" : 12
    "Edge" : 8

User Journey

Map user experiences through a process

Syntax example:

journey
    title User Onboarding
    section Sign Up
      Visit website: 5: User
      Create account: 3: User
    section First Use
      Complete tutorial: 4: User
      Create first doc: 5: User

Live Editor

Real-Time Rendering

As you type your Mermaid syntax in the editor, AnySlate renders the diagram in real-time in the preview pane. This instant feedback makes it easy to iterate on your diagrams and catch syntax errors immediately.

See changes instantly as you type
Syntax errors are highlighted
Works in split view and preview modes
No need to save to see updates

Exporting Diagrams

PNG Export

Export diagrams as PNG images for use in presentations, documents, or websites.

High resolution output
Transparent background option
Right-click to export

SVG Export

Export as SVG for scalable vector graphics that stay crisp at any size.

Infinitely scalable
Editable in vector tools
Small file size

Styling Diagrams

Custom Themes

Customize your diagrams with Mermaid's theming system. You can change colors, fonts, and styles using the init directive at the start of your diagram.

Example with custom theme:

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#6366f1',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#4f46e5',
    'lineColor': '#94a3b8',
    'secondaryColor': '#f1f5f9'
  }
}}%%
graph LR
    A[Styled Node] --> B[Another Node]

Available Themes

Mermaid includes several built-in themes: default, dark, forest, neutral, and base (for custom theming).

Tips & Best Practices

Keep it simple

Start with simple diagrams and add complexity gradually. Complex diagrams can be hard to maintain.

Use descriptive labels

Make node labels clear and concise so the diagram is self-explanatory.

Break up large diagrams

If a diagram gets too complex, consider splitting it into multiple smaller diagrams.

Test in preview mode

Always check your diagram in preview mode to ensure it renders correctly.

Add math equations?

Learn how to write beautiful mathematical equations with LaTeX and KaTeX rendering in your documents.

Math Equations