Examples

The documentation for this library is a working example.

This file, for example, has a diagram using the component and code block.

Component

Component example

import { Mermaid } from 'mdx-mermaid/Mermaid'

<Mermaid chart={`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!`} />

Code block

The component doesn't need to be imported as this will be auto inserted.

Code block example

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

Mermaid Config

Mermaid config can be configured through the plugin config:

docusaurus.config.js

{
  mermaid: { theme: 'dark' }
}

caution

When passing config to the <Mermaid> component only the first instance should have the config passed to it. If no config is passed to any component then Mermaid will not initialize. This is not an issue when using in .mdx files as the parser will handle this.