Skip to content
GitHub

MermaidWrapper

Use this component if your Mermaid diagram is much larger than our available space and you would like users to view the full diagram in another tab. This adds a link to “View full diagram” with an external link indicator under the bottom-right corner of the diagram. Note that the client:load attribute is required for the functionality to work because this component uses Javascript for interactivity.

We assume that you have already imported the Mermaid component, otherwise, what on earth are you wrapping with this?

To use it, your docs page must be in .mdx format. Please 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 image, but if you want 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 happen to be using some sort of format on save functionality in your code editor, like Prettier, it might sometimes screw up your formatting. You might want to ask Prettier 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!