Usage no npm install needed!

<script type="module">
  import mermaidInk from '';


GitHub CI

Getting Started

git clone
DEBUG=app:* yarn start

Open demo.html in your browser.


Given a mermaid code:

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

Paste it onto mermaid-live-editor, you will get encoded string from the editor, for example:


Append the encoded string to the service URL, for example:<encoded_string>, you will get an image from the URL:


You could treat it as normal image and embed everywhere you want.

The images are generated with transparent background by default. To force a background color, append the query parameter ?bgColor=<color> to the URL. <color> is interpreted as hexadecimal by default. It is possible to use named colors by prefixing the color name with !:

  •<encoded_string>?bgColor=FF0000 will generate a PNG with a red background;
  •<encoded_string>?bgColor=!lightgray will generate an SVG with a light gray background.


yarn test


I'm getting back HTTP 431 Request Header Fields Too Large error

Note that you may encounter DoS if you increase --max-http-header-size!

Thanks @ryepup for the analysis and work-arounds (#12)

  • If running locally, add --max-http-header-size to the start script in package.json

    • e.g. "start": "node --max-http-header-size=102400000 src/index.js"
  • If running via docker, use NODE_OPTIONS to increase --max-http-header-size

    • e.g. docker run --rm -it -e 'NODE_OPTIONS="--max-http-header-size=102400000"' -p 3000:3000 jihchi/

Or, If running locally, run NODE_OPTIONS="--max-http-header-size=102400000" npm start to increase --max-http-header-size