remark-mermaid-ssr

Remark plugin for rendering mermaid diagrams server-side. Installation is smoothly handled by this package; no other installations are required. Supports rendering of an additional dark mode SVGs.

This plugin uses puppeteer to launch a headless chromium browser instance to render diagrams using mermaidAPI. The codeblocks of mermaid diagrams are replaced with rendered SVGs.

Usage

The plugin is installed as any other remark plugin, see unified's plugin documentation.

Diagrams are written as codeblocks with the "mermaid" language.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Options

The options are not the same as the mermaid options. The options have been tweaked to be easier to specify. Options can always be overwritten with raw mermaid options by using the __mermaid and __mermaid.__darkMode options.

security

security?: 'strict' | 'loose' | 'antiscript' | 'sandbox' = 'strict'

Same as the mermaid option securityLevel. Serves as an option for the level of trust for the parsed diagram.

• 'strict': tags in text are encoded, script functionality is disabled.
• 'loose': tags in text are allowed, script functionality is enabled.
• 'antiscript': html tags in text are allowed, only script elements are removed, script functionality is enabled.

theme

theme?: string | ThemeOptions = 'default'

theme

theme?: string = 'default'

customCss

customCss?: string

variables

variables?: unknown

renderDark

renderDark?: DarkOptions | boolean = false

Enables the additional rendering of dark mode. This will require you to define css rules for displaying the images. Rendered svgs will always (even if you have renderDark disabled) have either the classes mermaid, and mermaid__light or mermaid__dark.

.mermaid.mermaid__light { display: initial; }
.mermaid.mermaid__dark { display: none; }

@media (prefers-color-scheme: dark) {
  .mermaid.mermaid__light { display: none; }
  .mermaid.mermaid__dark { display: initial; }
}

logLevel

logLevel?: LogLevel = LogLevel.Error

flowchart

flowchart?: FlowchartDiagramOptions

Options for flowchart diagrams.

sequence

sequence?: SequenceDiagramOptions

Options for sequence diagrams.

gantt

gantt?: GanttDiagramOptions

Options for gantt diagrams.

journey

journey?: JourneyDiagramOptions

Options for journey diagrams.

pie

pie?: PieChartOptions

Options for pie diagrams.

requirement

requirement?: RequirementDiagramOptions

Options for requirement diagrams.

er

er?: ErDiagramOptions

Options for er diagrams.

git

git?: GitGraphOptions

Options for git diagrams.

state

state?: StateDiagramOptions

Options for state diagrams.

freeze

freeze?: (keyof Options)[]

Keys in options to freeze. Same as the mermaid option secure.

style

style?: StyleOptions

fontFamily

fontFamily?: string

maxTextSize

maxTextSize?: number