Mermaid

Due to various CI pipeline issues with the remark-mermaidjs, we have decided to create our own Mermaid component that calls the Mermaid Javascript API directly.

This component allows you to render a Mermaid diagram on a page. Refer to the Mermaid documentation for diagram syntax.

The component takes in the Mermaid diagram syntax as a template literal through the graph attribute.

To use the component, the page must be in .mdx format. Change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.

Usage

Import the Mermaid component like so:

import { Mermaid } from "@interledger/docs-design-system";

Use the <Mermaid> component within your content like so:

<Mermaid
  graph={`sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop Healthcheck
    John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
`}
/>

Working example

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