# Mermaid

Mermaid is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.

## Usage

Just insert your Mermaid code in the `mermaid` shortcode like this:

    {{< mermaid [ align=("left"|"right"|"center"|"justify") ] >}}
    classDiagram
        Person *-- Dog
    {{< /mermaid >}}

You can set an optional `align` attribute which defaults to `"center"`.

If you don’t need alignment you can use the alternative syntax using code fences if you have turned off `guessSyntax` for the `markup.highlight` setting (see below):

    ```mermaid
    classDiagram
        Person *-- Dog
    ```

The generated graphs can be be panned by dragging them and zoomed by using the mousewheel. On mobile devices you can use finger gestures.

## Examples

### Flowchart

graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
Show markup

    {{< mermaid align="left" >}}
    graph LR;
        A[Hard edge] -->|Link text| B(Round edge)
        B --> C{<strong>Decision</strong>}
        C -->|One| D[Result one]
        C -->|Two| E[Result two]
    {{< /mermaid >}}

### Sequence

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!
Show markup

    {{< mermaid >}}
    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>John: Hello John, how are you?
        loop Healthcheck
            John->John: Fight against hypochondria
        end
        Note right of John: Rational thoughts <br/>prevail...
        John-->Alice: Great!
        John->Bob: How about you?
        Bob-->John: Jolly good!
    {{< /mermaid >}}

### GANTT

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to Mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to Mermaid :1d
Show markup

    {{< mermaid >}}
    gantt
            dateFormat  YYYY-MM-DD
            title Adding GANTT diagram functionality to Mermaid
            section A section
            Completed task            :done,    des1, 2014-01-06,2014-01-08
            Active task               :active,  des2, 2014-01-09, 3d
            Future task               :         des3, after des2, 5d
            Future task2              :         des4, after des3, 5d
            section Critical tasks
            Completed task in the critical line :crit, done, 2014-01-06,24h
            Implement parser and jison          :crit, done, after des1, 2d
            Create tests for parser             :crit, active, 3d
            Future task in critical line        :crit, 5d
            Create tests for renderer           :2d
            Add to Mermaid                      :1d
    {{< /mermaid >}}

### Class

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
Show markup

    {{< mermaid >}}
    classDiagram
        Class01 <|-- AveryLongClass : Cool
        Class03 *-- Class04
        Class05 o-- Class06
        Class07 .. Class08
        Class09 --> C2 : Where am i?
        Class09 --* C3
        Class09 --|> Class07
        Class07 : equals()
        Class07 : Object[] elementData
        Class01 : size()
        Class01 : int chimp
        Class01 : int gorilla
        Class08 <--> C2: Cool label
    {{< /mermaid >}}

### State

    stateDiagram-v2
      open: Open Door
      closed: Closed Door
      locked: Locked Door
      open   --> closed: Close
      closed --> locked: Lock
      locked --> closed: Unlock
      closed --> open: Open

Show markup

    ```mermaid
    stateDiagram-v2
        open: Open Door
        closed: Closed Door
        locked: Locked Door
        open   --> closed: Close
        closed --> locked: Lock
        locked --> closed: Unlock
        closed --> open: Open
    ```

## Configuration

Mermaid is configured with default settings. You can customize Mermaid’s default settings for all of your files thru a JSON object in your `config.toml` or override these settings sidewise thru your pages frontmatter.

This JSON object is forwarded into Mermaid’s `mermaid.initialize()` function.

See Mermaid documentation for all allowed settings.

Also, if you want to use mermaid codefences, you have to turn off `guessSyntax` for the `markup.highlight` setting.

### Example

    [params]
      mermaidInitialize = "{ \"theme\": \"dark\" }"

    [markup]
      [markup.highlight]
        # if set to `guessSyntax = true`, there will be no unstyled code even if no language
        # was given BUT mermaid code fences will not work anymore! So this is a mandatory
        # setting for your site
        guessSyntax = false

or pages frontmatter

    +++
    mermaidInitialize = "{ \"theme\": \"dark\" }"
    +++