[hexo guide] hexo configuration ER diagram flowchart sequence diagram plug-in

Some technical articles sometimes use various graphics. Generally speaking, you can make a picture and then take a screenshot and put it in the article. Although the picture itself is also small, it is not very good to store a lot of pictures to take up space. .

mermaid

mermaid official website

Mermaid supports the rendering of many kinds of graphics, and it is a good choice to use it. It can render a variety of complex graphics. For example this one below.

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
    and Alice to John
        Alice->>John: I want this done today
        par John to Charlie
            John->>Charlie: Can we do this today?
        and John to Diana
            John->>Diana: Can you help us today?
        end
    end

And drawing it only takes a few lines of code

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
    and Alice to John
        Alice->>John: I want this done today
        par John to Charlie
            John->>Charlie: Can we do this today?
        and John to Diana
            John->>Diana: Can you help us today?
        end
    end

Install

The installation steps are very simple, only need three steps

Install the hexo plugin

npm i hexo-filter-mermaid-diagrams

configure hexo

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "8.13.8" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

Theme configuration

themes\stun\layout\_partials\footer\footer.pug file in your project file, the theme I use uses pug language, so I can add this line of code

script(src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.13.8/mermaid.min.js")

If it is .swig , you can refer to the following configuration

{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
{% endif %}

If it is native js, it is simpler, just insert this line of code

<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.13.8/mermaid.min.js"></script>

References and Recommendations

• [hexo guide] running shader and threejs in
• [hexo guide] Hexo cooperates with github action to automatically build (various forms)
• [hexo guide] hexo publishes content to gitee page
• [hexo guide] hexo publishes content to multiple git repositories
• [hexo guide] hexo publishes content to multiple git repositories