Mermaid Cheat Sheet for Markdown

Mermaid is a simple, powerful, and easy-to-use tool for generating diagrams and flowcharts in Markdown. It enables you to visualize your documentation and make it more interactive and engaging. Here’s a handy cheat sheet to help you get started with Mermaid.

What is Mermaid?

Mermaid is a JavaScript-based diagramming and charting tool that simplifies the process of creating flowcharts, sequence diagrams, class diagrams, and more. You can write your diagrams using Markdown syntax, and Mermaid will render them in your web pages.

Basic Syntax

To include a Mermaid diagram in your Markdown file, use the following syntax:

mermaid
Diagram Code

Place your Mermaid diagram code between the triple backticks and the mermaid keyword.

Flowcharts

Example

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Keep doing that]
    B -->|No| D[Fix it]
    D --> E[Does it work now?]
    E -->|Yes| F[Great!]
    E -->|No| G[Try again]

Basic Nodes

• Square/Rectangle: A[Text]
• Round Edges: B(Text)
• Stadium Shape: C([Text])
• Circular: D((Text))
• Diamond: E{Text}

Links/Arrows

• Basic Arrow: A --> B
• Open Link: A --- B
• Text on Link: A -->|Text| B

Sequence Diagrams

Example

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good thanks!
    Alice->>Bob: Great to hear!

Syntax

• Participants: participant Name
• Messages: Alice->>Bob: Message
• Return Messages: Bob-->>Alice: Message

Class Diagrams

Example

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class01 : size
    Class01 : +int chromosomes
    Class01 : +setSize()
    Class01 : +getSize()

Basic Syntax

• Class Declaration: class ClassName
• Inheritance: ClassA <|-- ClassB
• Attributes: Class : +attributeType attributeName
• Methods: Class : +methodName()

Gantt Charts

Example

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-06-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-06-12  , 12d
    another task     : 24d

Basic Syntax

• Title: title Your Title
• Date Format: dateFormat YYYY-MM-DD
• Sections and Tasks:

  section Section Name
  Task Name :taskID, startDate, duration

Pie Charts

Example

pie
    title Key Metrics
    "Sales" : 50
    "Marketing" : 25
    "Development" : 15
    "Customer Support" : 10

Basic Syntax

• Title: title Your Title
• Data Points: "Label" : value

Tips

• Ensure your Markdown renderer supports Mermaid.
• Use a tool like VS Code with a Mermaid extension to preview your diagrams.
• For complex diagrams, refer to the Mermaid documentation for detailed syntax and options.

By using Mermaid, you can create visually appealing diagrams directly in your Markdown files, making your documentation clearer and more engaging.