Enabling Mermaid

Mermaid is an engine that enables you to draw beautiful, highly detailed SVG diagrams and flowcharts using Markdown. It is supported out of the box on developer documentation portal.

Some examples of Mermaid diagrams can be found below. For usage instructions and the full range of supported diagrams, visit https://mermaid-js.github.io/mermaid.

To view Mermaid diagrams on your local Docsify server, import Mermaid and edit your Docsify configuration in your index.html file as shown below:

<body>

  <!-- 1. Import mermaid.js, BEFORE the window.$docsify initialisation -->
  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  
  <script>
    // 2. Add the two lines below before declaring the window.$docsify object:
    var num = 0;
    mermaid.initialize({ startOnLoad: false });

    // 3. Add the "markdown" option to window.$docsify in addition to the other config
    window.$docsify = {
      ...otherDocsifyConfig,
      markdown: {
        renderer: {
          code: function (code, lang) {
            if (lang === "mermaid") {
              return (
                '<div class="mermaid">' +
                mermaid.render("mermaid-svg-" + num++, code) +
                "</div>"
              );
            }
            return this.origin.code.apply(this, arguments);
          },
        },
      },
    };
  </script>
  <!-- ...other imports -->
</body>Copy to clipboardErrorCopied

Writing diagrams

To write a Mermaid diagram, simply use a code block with the language type set to mermaid:

```mermaid
graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
```Copy to clipboardErrorCopied

Renders

Examples

Flowcharts

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]Copy to clipboardErrorCopied

State Diagrams

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

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]Copy to clipboardErrorCopied

Gantt Charts

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24dCopy to clipboardErrorCopied

Sequence Diagrams

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!Copy to clipboardErrorCopied

Pie Charts

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5Copy to clipboardErrorCopied