️This article has been over 2 years since the last update.

Since a lot of plugins for mermaid diagrams are no longer maintained, I just released a new Gitbook plugin with compatibility for GitBook 3.

Features

• Based on mermaid.cli/puppeteer, generate svg with base64 encode at compile time, no external css and js required.
• Same API like gitbook-plugin-mermaid/Typora

How Does it work

1
2
3
4

1. Your mermaid string quote with mermaid
2. Puppeteer/Chrome Runtime
3. SVG(XML)
4. <img src='data:image/svg+xml;base64,xxxx'>

Install

mermaid.cli is based on puppeteer, which need to download a Chrome. to skip download a chrome

in the book.json:

config your chrome exec file

1
2
3
4
5
6
7
8

{
  "plugins": ["mermaid-cli"],
  "pluginsConfig": {
    "mermaid-cli": {
      "chromeDir": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
  }
}

then

1
2
3
4
5
6

# see https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md#environment-variables
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
# install plugin
gitbook install
# run the gitbook
gitbook serve

Now we can use a local Chrome Runtime without download the slowly large file from npm.

Please see the full README at gitbook-plugin-mermaid-cli@miao1007