gitbook-plugin-mermaid-cli
Pipe wrapper for mermaid.cli
Last updated 2 months ago by miao1007 .
Apache 2 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gitbook-plugin-mermaid-cli 
SYNC missed versions from official npm registry.

Render flowcharts in markdown with mermaid.cli.

version download

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
  • Support ebook(pdf/mobi/epub) exporting

How Does it work

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

Pre Installation

Puppeteer is a tool to control Chrome via javascript, and mermaid.cli is a wrapper for mermaid on top of Chrome runtime.The installation of puppeteer may be hard on private network, so I created a plugin to skip download the Chrome.

You need to install the Chrome anywhere(yum, brew, or install.exe). Chrome 68+ is preferred. If you're running on CentOS6, latest Chrome is not supported.

Install

in the book.json:

config your chrome exec file

On Mac/Linux

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

On Windows

{
  "plugins": ["mermaid-cli"],
  "pluginsConfig": {
    "mermaid-cli": {
      "chromeDir": "C:\\xxx\\Google Chrome\\chrome.exe",
      "chromeArgs": []
    }
  }
}

If you are running as root, you may pass "chromeArgs": ["--no-sandbox"] to fix the error. If you are running on Windows, make sure to add escape character like C:\\xx\\xx.exe.

then

# see https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md#environment-variables
# on Mac/Linux
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
# on Windows(PowerShell)
# $Env:PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = "true"

# then 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.

If "Error: spawn E2BIG", please run gitbook install again.

How to use it?

It's the same API as JozoVilcek/piranna's gitbook-plugin-mermaid

There are two options how can be graph put into the gitbook. To use embedded graph, put in your book block as:

{% mermaid %}
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
{% endmermaid %}

or

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

Plugin will pick up block body and replace it with generated base64 svg diagram. To load graph from file, put in your book block as:

{% mermaid src="./diagram.mermaid" %}
{% endmermaid %}

If not absolute, plugin will resolve path given in src attribute relative to the current book page, load its content and generate svg diagram.

TODO

  • remove unnecessary style from svg

Current Tags

  • 1.0.15                                ...           latest (2 months ago)

15 Versions

  • 1.0.15                                ...           2 months ago
  • 1.0.14                                ...           2 years ago
  • 1.0.13                                ...           2 years ago
  • 1.0.12                                ...           2 years ago
  • 1.0.11                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (1)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |