Creating Diagrams with Mermaid: Flowcharts & More

What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. Instead of dragging shapes in a visual editor, you write simple text that describes relationships and flows. This makes diagrams version-controllable, easy to edit, and perfect for documentation.

In ConvertMD2PDF, Mermaid diagrams render directly in your preview pane and export beautifully to PDF.

Basic syntax: Wrap your diagram code in a code block with language mermaid:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```

Flowcharts

Flowcharts are the most common Mermaid diagram type. Use them to visualize processes, decision trees, and workflows.

Direction Options

graph TD    (Top to Down)
graph BT    (Bottom to Top)
graph LR    (Left to Right)
graph RL    (Right to Left)

Node Shapes

```mermaid
graph TD
    A[Rounded rectangle]
    B[Rectangle]
    C((Circle))
    D{Diamond}
    E[[Subroutine]]
    F[(Database)]
    G>Asymmetric]
    H{{Hexagon}}
```

Connection Types

A --> B      (Arrow)
A --- B      (Open link)
A -.-> B     (Dotted arrow)
A ==> B      (Thick arrow)
A --text--> B   (With label)
A --|text|--- B  (Label on line)

Complete Flowchart Example

```mermaid
graph TD
    A[User Login] --> B{Credentials Valid?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Show Error]
    D --> A
    C --> E{Admin?}
    E -->|Yes| F[Admin Panel]
    E -->|No| G[User Home]
```

Sequence Diagrams

Sequence diagrams show interactions between objects/participants over time. Perfect for API documentation and understanding system behavior.

Basic Structure

```mermaid
sequenceDiagram
    participant U as User
    participant S as Server
    participant D as Database

    U->>S: Login Request
    S->>D: Query User
    D-->>S: User Data
    S-->>U: Auth Token
```

Arrow Types

->>     Solid arrow
-->>    Dotted arrow (response)
-x      Crossed arrow (failure)
-)      Open arrow (async)

Activation and Loops

```mermaid
sequenceDiagram
    participant User
    participant API
    participant DB

    loop Every Request
        User->>API: HTTP Request
        activate API
        API->>DB: Query
        activate DB
        DB-->>API: Result
        deactivate DB
        API-->>User: Response
        deactivate API
    end
```

Conditionals

```mermaid
sequenceDiagram
    participant User
    participant System

    User->>System: Request

    alt Success
        System-->>User: OK
    else Error
        System-->>User: Error Message
    end
```

Class Diagrams

Class diagrams show object-oriented structures - classes, their attributes, methods, and relationships.

Basic Class

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +String breed
        +bark()
    }

    Animal <|-- Dog
```

Visibility Modifiers

+  Public
-  Private
#  Protected
~  Package/Internal

Relationships

<|--  Inheritance
*--  Composition
o--  Aggregation
-->  Association
--   Link (solid)
..>  Dependency
..|> Realization

State Diagrams

State diagrams show the states an object can be in and transitions between states.

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Success: Complete
    Processing --> Error: Fail
    Success --> Idle: Reset
    Error --> Idle: Retry
    Idle --> [*]: Exit
```

Gantt Charts

Gantt charts are perfect for project timelines and scheduling.

```mermaid
gantt
    title Project Schedule
    dateFormat  YYYY-MM-DD

    section Planning
    Requirements    :a1, 2026-01-01, 7d
    Design          :a2, after a1, 14d

    section Development
    Backend         :b1, after a2, 21d
    Frontend        :b2, after a2, 21d

    section Testing
    QA Testing      :c1, after b1, 7d
    Bug Fixes       :c2, after c1, 5d

    section Launch
    Deployment      :d1, after c2, 3d
```

Pie Charts

Simple pie charts for showing proportions:

```mermaid
pie showData
    title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 8
    "Edge" : 5
    "Other" : 3
```

Styling Your Diagrams

Add custom colors and styles:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]

    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e9
```

Subgraphs

Group related nodes together:

```mermaid
graph TD
    subgraph Frontend
        A[UI]
        B[Components]
    end

    subgraph Backend
        C[API]
        D[Database]
    end

    A --> B
    B --> C
    C --> D
```

Tips for Best Results

Keep it simple: Complex diagrams become hard to read. Break large diagrams into smaller ones.
Use meaningful IDs: user_login is better than A
Add labels: Label connections to clarify relationships
Test incrementally: Build diagrams piece by piece to catch syntax errors early
Use subgraphs: Group related elements for better organization

Try It Now

Ready to create your own diagrams? Open ConvertMD2PDF and paste any of the examples above. The diagram will render instantly in the preview pane, and you can export it to PDF with one click.