Install Mermaid Diagram in Hexo
2022-12-23 21:50:08  Hexo  >> Markdown #Mermaid #Hexo

This article…

When I was reviewing the syntax of Markdown (see here), I found that I could use Mermaid to make diagrams conviniently, such as flowcharts. Diagrams and documentation take up valuable developer time and can quickly become outdated. However, not having diagrams or documentation breaks productivity and makes it difficult to visually represent information. Mermaid solves this problem by reducing the time, effort, and tools needed to create modifiable diagrams, making the content smarter and more reusable. the text definition of a mermaid diagram allows it to be easily updated, and it can also be part of production scripts and other code.

However, I got some issues when installing Mermaid. This article will explain how to install Mermaid in your Hexo blog step by step.

Versions

Hexo-cli: 4.3.0

npm: 7.15.1

Mermaid: 9.3.0

Starts with

Step 1: Install Mermaid

There are many different versions of Mermaid available on the web, and not much information provided in official Github.

The Mermaid we use is called hexo-filter-mermaid-diagrams, see Details.

Use following command with npm.

1
npm i hexo-filter-mermaid-diagrams

Step 2: Edit Configuration

Add the following script into the Hexo config file: _config.yml

1
2
3
4
5
6
# Mermaid Chart
mermaid:
  enable: true 
  version: "9.3.0"
  options: 
    #startOnload: true

Step 3: Edit JS File

  1. File Location

    1
    YOUR_THEME/layout/_partial/footer.ejs

  2. Add following script into

    of footer.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    <% 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>
    <% } %>

  3. Regenerate hexo documents

    1
    Hexo g

  4. Test Mermaid

    Now, you should be able to use Mermaid in you hexo blog.

    Try this.

1
2
3
4
5
6
7
8
<pre class="mermaid">
graph TD
    A[Work] -->|Earn money| B(Go shopping)
    B --> C{Considering}
    C -->|One| D[LV]
    C -->|Two| E[iPhone]
    C -->|Three| F[Stock share]
</pre>
    graph TD
    A[Work] -->|Earn money| B(Go shopping)
    B --> C{Considering}
    C -->|One| D[LV]
    C -->|Two| E[iPhone]
    C -->|Three| F[Stock share]

More details, see Mermaid Tutorials.

Possible Issues

In Steps 3, after you added the script into footer.ejs and execute hexo g, the console could hint you that

theme.mermaid.enable and theme.mermaid.version could not be retrieved as follows.

1
2
Cannot read property 'enable' of undefined
Cannot read property 'version' of undefined

This is because Hexo cannot find the settings in the theme’s config file, which could be a directory bug.

Thus, add the script in Step 2 into YOURTHEME/_config.yml (NOT Hexo/_config.yml)

If not working, add the script in Step 2 into both of Hexo/_config.yml and YOURTHEME/_config.yml.

Once you added the script, make sure hexo clean and hexo g. Sometimes, Mermaid won’t refresh w/o hexo clean.

Good Day
😎

Prev
2022-12-23 21:50:08  Hexo  >> Markdown #Mermaid #Hexo
Next