hexo主题pure启用mermaid

概览：

• 安装
• 配置
  • 语法实例
  • 效果预览

安装

npm install --save hexo-filter-mermaid-diagrams

配置

• 在主题的配置文件，添加以下配置内容。

# 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

并且修改主题的文件

编辑文件 themes/pure/layout/_common/footer.ejs，添加以下内容。

<% 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: 'pure'});
        }
    </script>
<% } %>

• 编辑完成后，应该看起来是这样的

<footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	<%- partial('_common/social', null, {cache: !config.relative_link}) %>
    <div class="copyright">
    	<% if(theme.site.copyright) { %>
        &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        <% } %>
        <div class="publishby">
        	<%= __('copyright.theme_by') %> <a href="https://github.com/cofess" target="_blank"> cofess </a><%= __('copyright.base_on') %> <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
    <% 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: 'pure'});
          }
        </script>
      <% } %>
</footer>

语法实例

别忘了再添加语法类型为mermaid

graph LR
  单独节点
  开始 -- 带注释写法1 --> 结束
  开始 -->|带注释写法2| 结束
  实线开始 --- 实线结束
  实线开始 --> 实线结束
  实线开始 -->|带注释| 实线结束
  虚线开始 -.- 虚线结束
  虚线开始 -.-> 虚线结束
  虚线开始 -.->|带注释| 虚线结束
  粗线开始 === 粗线结束
  粗线开始 ==> 粗线结束
  粗线开始 ==>|带注释| 粗线结束
  subgraph 子图标题
    子图开始 --> 子图结束
  end
  节点1[方形文本框] --> 节点2{菱形文本框}
  节点3(括号文本框) --> 节点4((圆形文本框))

效果预览