Mermaid SSR API

Render SVG from mermaid.js input
await fetch('https://mermaid-ssr.vercel.app/render')

Example

Generate server-side rendered mermaid.js code to React

const url = new URL('https://mermaid-ssr.vercel.app/render')
url.searchParams.set('code', `graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;`)
const response = await fetch(url)
const result = await response.json()
const svg = result.svg
return <div dangerouslySetInnerHTML: { __html: svg }/>

Parameters

All parameters are passed into the searchParams of the URL

let code: String

The mermaid code

url.searchParams.set('code', `graph TD;
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D`)

let cfg: MermaidConfig

The mermaid config. This follows MermaidConfig from mermaid.js

const config = {
  theme: "base",
  themeVariables: {
    darkMode: true,
    background: "transparent",
    fontSize: "16px",
    primaryColor: "#333",
    secondaryColor: "#0006",
    lineColor: "#555"
  },
}
url.searchParams.set('cfg', JSON.stringify(config))

Playground

You can find examples of mermaid code here

Press submit to generate diagram