Skip to content
GitHub

MermaidWrapper

This component allows users to open a Mermaid diagram in a new tab, as well as download the diagram as an SVG file. The component is helpful when a diagram is larger than our available content area.

The component adds a link to “View full image” with an external link indicator under the bottom-right corner of the image, as well as a link to “Download diagram”, which will download the diagram as an SVG file when clicked. It takes in a viewLabel, downloadLabel and diagramName properties.

The viewLabel and downloadLabel props allow you to customize the text of the buttons, the use case being for pages that are not in English. If you don’t provide these props, they will default to “View full diagram” and “Download diagram”, respectively.

Do use the diagramName prop to specify the name of the diagram file that will be saved to the user’s local machine (otherwise it will default to diagram.svg).

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

Section titled “Usage”

Import the MermaidWrapper component like so:

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

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

<MermaidWrapper diagramName="alice-to-john">


{/* prettier-ignore */}
<Mermaid
  graph={`sequenceDiagram
   Alice->>John: Hello John, how are you?
   John-->>Alice: Great!
   Alice-)John: See you later!
`}
/>


</MermaidWrapper>

By default, there will be a border around the diagram. To remove the border, pass in a hasBorder={false} attribute.

<MermaidWrapper hasBorder={false} diagramName="healthcheck">


{/* prettier-ignore */}
<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!
`}
/>


</MermaidWrapper>

To translate the labels for the diagram’s available actions, pass in the viewLabel and downloadLabel attributes.

<MermaidWrapper diagramName="alice-to-john" viewLabel="查看图表" downloadLabel="下载">


{/* prettier-ignore */}
<Mermaid
  graph={`sequenceDiagram
   小丽->>阿韩: 阿韩, 近来好吗？
   阿韩-->>小丽: 好得很!
   小丽-)阿韩: 行，待会儿见!
`}
/>


</MermaidWrapper>

If you’re using some sort of format-on-save functionality in your code editor, like Prettier, it might mess up your formatting. Ask Prettier, for example, to ignore your Mermaid block just in case. Refer to the example code above.

{/* prettier-ignore */}

Working examples

Section titled “Working examples”

Default style with border

Section titled “Default style with border”

The default styling which includes a border:

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!

Style without border

Section titled “Style without border”

When hasBorder: false is used:

sequenceDiagram
 Alice->>John: Hello John, how are you?
 John-->>Alice: Great!
 Alice-)John: See you later!

Translated labels

Section titled “Translated labels”

When viewLabel and downloadLabel are used:

sequenceDiagram
 小丽->>阿韩: 阿韩, 近来好吗？
 阿韩-->>小丽: 好得很!
 小丽-)阿韩: 行，待会儿见!