Mermaid

React-pdf renders Mermaid diagrams via the @react-pdf/mermaid package. Definitions are turned into vector graphics at layout time, so flowcharts, sequence diagrams and the rest are drawn as real PDF shapes and text rather than embedded as a bitmap.

Installation

npm install @react-pdf/mermaid

Usage

import { Document, Page, View } from '@react-pdf/renderer';
import { Mermaid } from '@react-pdf/mermaid';

const MyDocument = () => (
  <Document>
    <Page size="A4" style={{ padding: 40 }}>
      <View>
        <Mermaid width={400}>
          {`graph TD
            A[Start] --> B{Decision}
            B -->|Yes| C[Ship it]
            B -->|No| D[Back to the drawing board]`}
        </Mermaid>
      </View>
    </Page>
  </Document>
);

Both width and height are optional. Left out, the diagram takes the size of its own viewBox; given one of the two, the other follows the aspect ratio.

Supported diagrams

<Mermaid width={420}>
  {`classDiagram
    Document <|-- Page
    Page <|-- View
    View <|-- Text`}
</Mermaid>

Colors

Colors can be set one by one, or picked up from a built-in theme:

<Mermaid theme="nord" width={400}>
  {`graph LR
    A --> B --> C`}
</Mermaid>

Individual color props override the theme, so a theme can be used as a starting point and adjusted from there:

<Mermaid theme="nord" accent="#bf616a" width={400}>
  {`graph LR
    A --> B --> C`}
</Mermaid>

Available themes are tokyo-night, tokyo-night-storm, tokyo-night-light, catppuccin-mocha, catppuccin-latte, nord, nord-light, dracula, github-dark, github-light, solarized-dark, solarized-light, one-dark, zinc-dark and zinc-light.

Valid props