博客支持 mermaid

2021-12-17

字数统计: 408字 | 阅读时长≈ 1分

安装插件
npm install hexo-filter-mermaid-diagrams
修改配置文件
在hexo的_config.yml文件（根目录的并非主题的）中，添加以下内容：

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

js文件修改

修改位置（next主题为例）

1	themes/next/layout/_partials/footer.swig

根据footer的格式不同，添加的内容不同。
格式有after_footer.pug , after-footer.ejs ,footer.swig等。
以下是在next的footer.swig添加的内容。其他格式参考github: hexo-filter-mermaid-diagrams

{% 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 %}

到此为止，设置的部分就结束了。

UML类图

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()
      }

UML 甘特图

gantt
    title 工作计划
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2020-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2020-01-12  , 12d
    another task      : 24d

时序图

- 代表实线 ， 主动发送消息，比如 request请求
> 代表实心箭头 ， 同步消息，比如 AJAX 的同步请求
-- 代表虚线，表示返回消息，spring Controller return
>> 代表非实心箭头 ，异步消息，比如AJAX请求

sequenceDiagram
    Title: md时序图练习

    participant 客户端
    participant 控制器
    participant 业务
    participant 数据库

     客户端->>数据库:提交数据店铺
     Note right of 客户端:提交数据进行验证
     控制器->>控制器:验证数据完整性
     Note left of 控制器:返回错误的字段信息
     控制器-->>客户端:数据不完整
     Note over 客户端: 用户输入通行证的账号、密码
     控制器->>业务:保存店铺到数据库
     业务->>业务:save店铺数据
     业务-->>控制器:保存出现异常
     控制器-->>客户端:保存成功
     数据库-->>业务:success
     业务-->>控制器:success
     控制器-->>客户端:success 客户端
     Note left of 控制器:返回正确的提示，并跳转到审核第二步

分享程序员的理财、生活！我是乐子，多多指教！

                                                - EOF -

关注我得到更多信息

本文作者： 闾丘齐心
本文链接： http://www.blog.rdtalk.cn/2021/12/17/2021-12-17-work-Blog/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！