需求

markdown 里面绘制的 mermaid 图片在 hexo里无法显示
希望发布成博客的时候, 能和本地一样生成图片

解决方案

技术方案选取, hexo-filter-mermaid-diagrams, 下面将其操作过程进行翻译.

软件安装

1 2	# 更新在本地 package.json 中 npm install hexo-filter-mermaid-diagrams --save

配置文件修改

项目配置文件

我的实践过程中, 其实应该在 theme 的配置中设置,但是官方文档这么推荐的, 我们可以先这么操作

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

主题配置文件

注意官方文档这段暂时没写, 如果是使用主题为 Next的朋友们请参考, 另外版本可以设置为新的 8.8.4

# ./theme/next/_config.yml
# Mermaid tag
mermaid:
  version: 8.8.4 
  enable: true # next theme 默认为 True
  # Available themes: default | dark | forest | neutral
  theme: forest

js文件修改

js位置 themes/next/layout/_partials/footer.swig`
不同主题的根据footer的格式不同，例如after_footer.pug , after-footer.ejs ,footer.swig等。
这里也需要注意, 这里官方文档上存在一点语法问题,如果不会JS的朋友,可以按照本文中的代码粘贴

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

bug fix

需要注意的是,截止2021年01月09日, 今日官方readme有两处需要调整的地方, 已经提交 MR

效果

流程图

graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

时序图

逻辑分块时序图

%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

循环时序图

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!

类图

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

状态图

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

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

## 饼图

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150

ER图

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

刚特图

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

参考:

mermaid-js repo

hexo-filter-mermaid-diagrams

ClarkChen Blog

Hexo中插入mermaid diagrams

需求