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))

let out?: "png" | "html"

Output format. If not provided, the default is SVG

url.searchParams.set('out', 'png')

Return

If `out` is not specified, the response is a JSON object with the following properties:

type Response =
  | {
    status: "ok"
    svg: string //"<svg>...</svg>"
    ev: {
      name: string
      time: number
    }[]
  } 
  | {
    status: Error
    ev: {
      name: string
      time: number
    }[]
  }

Playground

You can find examples of mermaid code here

Client error occurred:
Server error occurred. Message from server:

open in new tab: JSON PNG HTML

Deployment

Note on deploying on Vercel: This repository does not support Fluid Compute. Make sure to turn them off in the settings.