Mermaid 安裝

外掛 Hexo 2019/11/10

本文於640天之前發表，文中內容可能已經過時。如有疑問，請在評論區留言。

安裝

  • 安裝插件

    1
    2
    3
    npm install hexo-filter-mermaid-diagrams
    brew install yarn
    yarn add hexo-filter-mermaid-diagrams

  • 修改配置文件
    在 hexo 的 _config.yml 文件（主題）中，添加以下內容：

    1
    2
    3
    4
    5
    # 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

    Notice: if you want to use ‘Class diagram’, please edit your ‘_config.yml’ file, set external_link: false. - hexo bug.

  • js文件修改 ( on themes 中)

    根據footer的格式不同，添加的內容不同，以下是 after-footer.ejs 的格式。其他格式參考 github: hexo-filter-mermaid-diagrams

    • after-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>
      <% } %>
    • swig
      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({{ JSON.stringify(theme.mermaid.options) }});
          }
        </script>
      {% endif %}

測試範例

範例一

  sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts 
prevail...
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

範例二

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

附錄

一、參考資料

二、語法說明

  • 關鍵字
    1. title：表示該序列圖中的標題。
    2. participant：表示該序列圖中的對象。
    3. note：表示該序列圖中的部分說明。關於note以下三種關鍵字：
      • left of：表示在當前對象的左側。
      • right of：表示在當前對象的右側。
      • over：表示覆蓋在當前對象的上方。
    4. 箭頭
      • ->：實線實箭頭
      • –>：虛線實箭頭
      • ->>：實線虛箭頭
      • –>>：虛線虛箭頭
    5. 換行符號 <br>
avatar
Flowchart(流程圖)

  1. 1. 安裝
  2. 2. 測試範例
    1. 2.1. 範例一
    2. 2.2. 範例二
  3. 3. 附錄
    1. 3.1. 一、參考資料
    2. 3.2. 二、語法說明