Mermaid Arbitrary Graphs

calendar Dec 12, 2024 · 5 min read · mermaid graph network diagram visualization diagrams  ·
Share on: linkedin copy

Mermaid supports creating arbitrary graphs (both directed and undirected) for visualizing networks, relationships, and complex graph structures. Perfect for network topologies, social graphs, dependency graphs, and any graph-based visualization.

Use Case

Use Mermaid graphs when you need to:

  • Visualize network topologies
  • Show relationships between entities
  • Create dependency graphs
  • Model social networks
  • Display graph data structures
  • Show arbitrary connections between nodes

Basic Syntax

Directed Graph

1```mermaid
2graph TD
3    A --> B
4    B --> C
5    C --> A
6```

Result:

graph TD
    A --> B
    B --> C
    C --> A

Undirected Graph

1```mermaid
2graph LR
3    A --- B
4    B --- C
5    C --- A
6```

Result:

graph LR
    A --- B
    B --- C
    C --- A

Examples

Example 1: Network Topology

 1```mermaid
 2graph TB
 3    Internet[Internet]
 4    Router[Router]
 5    Switch[Switch]
 6    Server1[Server 1]
 7    Server2[Server 2]
 8    PC1[PC 1]
 9    PC2[PC 2]
10    
11    Internet --> Router
12    Router --> Switch
13    Switch --> Server1
14    Switch --> Server2
15    Switch --> PC1
16    Switch --> PC2
17```

Result:

graph TB
    Internet[Internet]
    Router[Router]
    Switch[Switch]
    Server1[Server 1]
    Server2[Server 2]
    PC1[PC 1]
    PC2[PC 2]
    
    Internet --> Router
    Router --> Switch
    Switch --> Server1
    Switch --> Server2
    Switch --> PC1
    Switch --> PC2

Example 2: Social Network Graph

 1```mermaid
 2graph LR
 3    Alice[Alice]
 4    Bob[Bob]
 5    Charlie[Charlie]
 6    Diana[Diana]
 7    Eve[Eve]
 8    
 9    Alice --- Bob
10    Alice --- Charlie
11    Bob --- Diana
12    Charlie --- Eve
13    Diana --- Eve
14    Bob --- Eve
15```

Result:

graph LR
    Alice[Alice]
    Bob[Bob]
    Charlie[Charlie]
    Diana[Diana]
    Eve[Eve]
    
    Alice --- Bob
    Alice --- Charlie
    Bob --- Diana
    Charlie --- Eve
    Diana --- Eve
    Bob --- Eve

Example 3: Dependency Graph

 1```mermaid
 2graph TD
 3    A[Module A] --> B[Module B]
 4    A --> C[Module C]
 5    B --> D[Module D]
 6    C --> D
 7    D --> E[Module E]
 8    B --> F[Module F]
 9    C --> F
10```

Result:

graph TD
    A[Module A] --> B[Module B]
    A --> C[Module C]
    B --> D[Module D]
    C --> D
    D --> E[Module E]
    B --> F[Module F]
    C --> F

Example 4: Weighted Graph

1```mermaid
2graph LR
3    A[A] -->|5| B[B]
4    A -->|3| C[C]
5    B -->|2| D[D]
6    C -->|4| D
7    B -->|1| E[E]
8    D -->|6| E
9```

Result:

graph LR
    A[A] -->|5| B[B]
    A -->|3| C[C]
    B -->|2| D[D]
    C -->|4| D
    B -->|1| E[E]
    D -->|6| E

Example 5: Complex Graph with Styling

 1```mermaid
 2graph TB
 3    Start([Start]) --> A{Decision}
 4    A -->|Yes| B[Process 1]
 5    A -->|No| C[Process 2]
 6    B --> D[End]
 7    C --> D
 8    
 9    style Start fill:#90EE90
10    style D fill:#FFB6C1
11    style A fill:#87CEEB
12```

Result:

graph TB
    Start([Start]) --> A{Decision}
    A -->|Yes| B[Process 1]
    A -->|No| C[Process 2]
    B --> D[End]
    C --> D
    
    style Start fill:#90EE90
    style D fill:#FFB6C1
    style A fill:#87CEEB

Example 6: Graph with Subgraphs

 1```mermaid
 2graph TB
 3    subgraph Cluster1[Cluster 1]
 4        A1[A1]
 5        A2[A2]
 6        A3[A3]
 7    end
 8    
 9    subgraph Cluster2[Cluster 2]
10        B1[B1]
11        B2[B2]
12    end
13    
14    A1 --> A2
15    A2 --> A3
16    B1 --> B2
17    A3 --> B1
18```

Result:

graph TB
    subgraph Cluster1[Cluster 1]
        A1[A1]
        A2[A2]
        A3[A3]
    end
    
    subgraph Cluster2[Cluster 2]
        B1[B1]
        B2[B2]
    end
    
    A1 --> A2
    A2 --> A3
    B1 --> B2
    A3 --> B1

Example 7: Multi-directional Graph

1```mermaid
2graph LR
3    A[A] <--> B[B]
4    B --> C[C]
5    C -.->|dashed| D[D]
6    D ==>|thick| E[E]
7    E -->|normal| A
8```

Result:

graph LR
    A[A] <--> B[B]
    B --> C[C]
    C -.->|dashed| D[D]
    D ==>|thick| E[E]
    E -->|normal| A

Edge Types

Directed Edges

  • A --> B - Solid arrow
  • A ==> B - Thick arrow
  • A -.-> B - Dashed arrow
  • A -..-> B - Dotted arrow

Undirected Edges

  • A --- B - Solid line
  • A === B - Thick line
  • A -.- B - Dashed line
  • A -..- B - Dotted line

Bidirectional

  • A <--> B - Bidirectional solid
  • A <==> B - Bidirectional thick

With Labels

  • A -->|label| B - Edge with label
  • A ---|label| B - Undirected edge with label

Node Shapes

  • A[Rectangle] - Rectangle
  • A(Rounded) - Rounded rectangle
  • A([Stadium]) - Stadium shape
  • A[[Subroutine]] - Double rectangle
  • A[(Database)] - Cylinder
  • A((Circle)) - Circle
  • A>Asymmetric] - Asymmetric shape
  • A{Diamond} - Diamond
  • A{{Hexagon}} - Hexagon

Graph Directions

  • graph TD - Top to bottom
  • graph TB - Top to bottom (same as TD)
  • graph BT - Bottom to top
  • graph LR - Left to right
  • graph RL - Right to left

Styling

Node Styling

 1```mermaid
 2graph LR
 3    A[A] --> B[B]
 4    C[C] --> D[D]
 5    
 6    style A fill:#f9f,stroke:#333,stroke-width:2px
 7    style B fill:#bbf,stroke:#333,stroke-width:4px
 8    style C fill:#bfb,stroke:#333,stroke-width:2px
 9    style D fill:#fbf,stroke:#333,stroke-width:2px
10```

Result:

graph LR
    A[A] --> B[B]
    C[C] --> D[D]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:4px
    style C fill:#bfb,stroke:#333,stroke-width:2px
    style D fill:#fbf,stroke:#333,stroke-width:2px

Class-based Styling

 1```mermaid
 2graph TD
 3    A[Node A] --> B[Node B]
 4    C[Node C] --> D[Node D]
 5    
 6    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px
 7    classDef highlight fill:#ff6,stroke:#333,stroke-width:4px
 8    
 9    class A,C highlight
10```

Result:

graph TD
    A[Node A] --> B[Node B]
    C[Node C] --> D[Node D]
    
    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px
    classDef highlight fill:#ff6,stroke:#333,stroke-width:4px
    
    class A,C highlight

Notes

  • Graphs automatically layout nodes - you can't control exact positions
  • Use subgraphs to group related nodes visually
  • Edge labels can contain text and some HTML
  • Styling supports CSS color formats (hex, rgb, named colors)
  • Complex graphs may need optimization for readability

Gotchas/Warnings

  • ⚠️ Layout: Automatic layout - nodes position themselves
  • ⚠️ Complexity: Very large graphs can be slow to render
  • ⚠️ Node IDs: Must be unique and simple (alphanumeric, no spaces)
  • ⚠️ Edge Labels: Keep labels short for readability
  • ⚠️ Subgraphs: Must start with subgraph keyword
  • ⚠️ Styling: CSS color names work, but hex is more reliable

Related Snippets