Getting Started with Mermaid

Mermaid lets you create diagrams using text and code, making documentation easier and more maintainable. This guide will introduce you to Mermaid's capabilities and how to begin using it.

Introduction to Mermaid

Mermaid simplifies the process of generating diagrams like flowcharts, sequence diagrams, class diagrams, and more, all from text descriptions.

How to Use Mermaid

To use Mermaid, you typically need a platform that supports it (like GitHub or GitLab) or use it within Markdown editors that have Mermaid integration.

Basic Syntax

Mermaid diagrams are defined using a special syntax code block in Markdown files:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Remove the backslash \ before the backticks to use this in your Markdown. This example creates a simple flowchart.

Diagram Types

Mermaid supports various diagram types. Here are some of the most common ones:

1. Flowcharts

Create flowcharts to visualize processes and workflows.

graph LR;
    A[Start] --> B{Decision};
    B -->|Yes| C[Do Something with Melodi];
    B -->|No| D[Do Something Else];
    C --> E[End];
    D --> E;

2. Sequence Diagrams

Sequence diagrams are perfect for showing interactions between actors in a system.

sequenceDiagram;
    participant A as User;
    participant B as System;
    A->>B: Request;
    B->>A: Response;

3. Gantt Charts

Gantt charts help in visualizing project schedules.

gantt
    title A Gantt Chart
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1  , 20d

4. Class Diagrams

Class diagrams are useful for representing the structure of a system.

classDiagram
    class MyClass {
        +publicMethod()
        -privateMethod()
    }

Customization

Mermaid allows you to customize your diagrams with styles and colors.

graph TD;
    A-->B;
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#bbf,stroke:#f66,stroke-width:2px

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

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Hidden Gems
    quadrant-2 Star Performers
    quadrant-3 Underperformers
    quadrant-4 Visibility Without Impact
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

quadrantChart
    title Reach and Engagement of Campaigns: A Marketing Crazy Hot Matrix
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Unicorn Campaigns
    quadrant-2 Hidden Gems
    quadrant-3 Underperformers
    quadrant-4 Attention Seekers
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Conclusion

Mermaid is a powerful tool for creating diagrams directly within your Markdown documents. By learning its syntax and exploring different diagram types, you can enhance your documentation with visual elements that are easy to maintain and update. For more detailed information and advanced features, refer to the Mermaid Documentation.

4.3 KiB Raw Blame History