Skip to content
GitHub

MermaidWrapper

This component allows users to open a Mermaid diagram in a new tab. 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. It takes in a src and alt, just like a normal img element.

The client:load attribute is required for the component to work because the component uses Javascript for interactivity.

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 MermaidWrapper component like so:

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

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

<MermaidWrapper client:load>


{/* 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 client:load hasBorder={false}>


{/* 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>

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

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

When hasBorder: false is used:

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