Mermaid Cheat Sheet for Markdown
Tags: mermaid, mermaidjs, markdown, javascript
Published: 2024-06-29 09:02:03

# 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

```mermaid
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

```mermaid
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

```mermaid
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

```mermaid
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

```mermaid
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](https://mermaid-js.github.io/mermaid/) 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.