TOOL

Mermaid

Last updated:
Reference:mermaid-js.github.io

Usage ​

Mermaid is a diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. You can easily see some sample diagrams or create your own through its Live Editor.

Example ​

mermaid
graph LR
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Preview graph

Theme of preview customized to better contrast with this site's background. At the background option, choose the expected background color Mermaid must contrast with.

json
{
  "theme": "base",
  "themeVariables": {
        "darkMode": true,
        "background": "#383c4a",
        "primaryColor": "#c68"
    }
}