Gitbook-plugin-mermaid-newface NPM

Mermaid plugin for GitBook

Plugin for GitBook 3 which renders Mermaid diagrams and flow charts detected in the book markdown.

💚 THIS PLUGIN WAS BORN TO USING MERMAID V8.5 AND LATER AT GITBOOK 💚

🎊 NOW WE SWITCH TO USE THE mermaid-cli FOR A BETTER EXPERIENCE AND PDF SUPPORT 👍

Support status

Working

Flowcharts
Sequence diagrams
Gantt diagrams
Pie chart diagrams
Class diagram NEW!!!!!
Git graph - experimental at v8.5
Entity Relationship Diagrams - experimental at v8.5
State diagrams
User Journey Diagram NEW!!!!!

Not Working yet

Class diagrams - experimental at v8.5

How to install it?

You can use install via NPM / yarn:

$ npm install gitbook-plugin-mermaid-newface
# or
$ yarn add gitbook-plugin-mermaid-newface

And use it for your book with in the book.json:

{
  "plugins": ["mermaid-newface"]
}

How to use it?

Just put the code into fenced code block and tag it mermaid key word like this:

sequenceDiagram
    autonumber
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Config

If you want to change the settings of mermaid, please add pluginsConfig in the book.json:

{
  "plugins": ["mermaid-newface"],
  "pluginsConfig": {
    "mermaid-newface": {
      "theme": "neutral" // default, forest, dar, natural. see https://mermaid-js.github.io/mermaid/#/mermaidAPI?id=theme
    }
  }
}