Skip to main content
The @streamdown/mermaid package renders Mermaid diagrams from fenced code blocks tagged with the mermaid language identifier. It integrates with the plugins.mermaid field on <Streamdown>.

​
Installation

npm install @streamdown/mermaid

​
Quick start

import { createMermaidPlugin } from "@streamdown/mermaid";
import { Streamdown } from "streamdown";

const plugins = {
  mermaid: createMermaidPlugin(),
};

<Streamdown plugins={plugins}>
  {markdown}
</Streamdown>
With the plugin active, fenced code blocks like the following are rendered as SVG diagrams: 
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Done]
    B -->|No| D[Retry]
```

​
createMermaidPlugin()

Creates a DiagramPlugin instance with optional configuration. 
function createMermaidPlugin(options?: MermaidPluginOptions): DiagramPlugin
​
options
MermaidPluginOptions
Optional configuration for the plugin.
A pre-configured instance with default settings is also exported: 
import { mermaid } from "@streamdown/mermaid";

​
DiagramPlugin interface

​
type
diagram
required
Discriminant for the plugin union type. Always "diagram".
​
name
mermaid
required
Plugin identifier. Always "mermaid".
​
language
string
required
The fenced code block language that triggers this renderer. Always "mermaid".
​
getMermaid
(config?: MermaidConfig) => MermaidInstance
required
Returns the shared MermaidInstance. When config is provided, mermaidInstance.initialize(config) is called before returning, merging the supplied config over the plugin’s defaults. Subsequent calls without a config return the already-initialised instance.

​
MermaidInstance interface

The object returned by getMermaid(). It wraps the Mermaid library with lazy initialisation.
​
initialize
(config: MermaidConfig) => void
required
Initialises (or re-initialises) the Mermaid library with the supplied config, merged over plugin defaults. Safe to call multiple times; each call resets the running configuration.
​
render
(id: string, source: string) => Promise<{ svg: string }>
required
Renders a Mermaid diagram source string to an SVG string. id must be a unique DOM element identifier for Mermaid’s internal rendering. The returned svg is an inline SVG string ready to set as innerHTML.Mermaid is initialised with the plugin’s default config on the first render() call if initialize() has not been called beforehand.

​
Per-render configuration

You can supply a custom MermaidConfig at the component level via the mermaid prop on <Streamdown>. This is applied alongside the plugin and takes precedence for diagram rendering: 
<Streamdown
  plugins={{ mermaid: createMermaidPlugin() }}
  mermaid={{ config: { theme: "dark" } }}
>
  {markdown}
</Streamdown>

Build docs developers (and LLMs) love

Get started for freeTalk to us