How to use mermaid in Total.js Wiki v2?

how-to-use-mermaid-in-totaljs-wiki-v2.md

How to use mermaid in Total.js Wiki v2?

Usage

Basic Flowchart from https://mermaidjs.github.io/demos.html

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

Modification

1. views/layout.html

Add scripts

<script src="https://unpkg.com/mermaid@7.1.2/dist/mermaid.js"></script>
<script>
  mermaid.mermaidAPI.initialize({ startOnLoad: true });
</script>

2. public/js/ui.js

Create a function to render mermaid

function markdown_mermaid(selector) {
  mermaid.init(undefined, $(selector));
}

Call the function in refresh_markdown

function refresh_markdown(read) {
  var el = $(".markdown");
  if (el.length) {
    markdown_mermaid(".lang-mermaid");
    //...
  }
}