44 lines
1.2 KiB
Markdown
44 lines
1.2 KiB
Markdown
## Mermaid plugin for GitBook
|
|
[](https://travis-ci.org/JozoVilcek/gitbook-plugin-mermaid)
|
|
[](http://badge.fury.io/js/gitbook-plugin-mermaid)
|
|
|
|
Plugin for [GitBook](https://github.com/GitbookIO/gitbook) which renders [Mermaid](https://github.com/knsv/mermaid) diagrams and flow charts detected in the book markdown.
|
|
|
|
### How to install it?
|
|
|
|
You can use install via **NPM**:
|
|
|
|
```
|
|
$ npm install gitbook-plugin-mermaid
|
|
```
|
|
|
|
And use it for your book with in the book.json:
|
|
|
|
```
|
|
{
|
|
"plugins": ["mermaid"]
|
|
}
|
|
```
|
|
|
|
### How to use it?
|
|
|
|
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 %}
|
|
```
|
|
Plugin will pick up block body and replace it with generated 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.
|