Markdown的时序图、流程图、和甘特图+Hexo的相关配置

cnpm install hexo-filter-mermaid-diagrams --save

# 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

if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
  script.
    if (window.mermaid) {
      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
      mermaid.initialize(options);
    }

graph 方向描述
    组件相关语句
       ...

graph TB
    start(开始)-->opt1[事件1]
    opt1-->if1{判断1}
    if1--Y-->opt2[事件2]
    opt2-.如果累了.->opt4((休息一下))
    if1--N-->opt3[事件3]
    opt2-->endd(结束)
    opt3-->endd

graph TB
    start(开始)-->opt1[事件1]
    opt1-->if1{判断1}
    if1--Y-->opt2[事件2]
    opt2-.如果累了.->opt4((休息一下))
    if1--N-->opt3[事件3]
    opt2-->endd(结束)
    opt3-->endd

classDiagram
  类图的语句
   ...

class NAME{
  成员变量相关
  成员函数相关
}

classDiagram
  class Student{
    -String name;
    -int age;
    +Student(String name,int age);
  }

classDiagram
  class Student{
    -String name;
    -int age;
    +Student(String name,int age);
    +getAge()  int;
  }

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

sequenceDiagram
    时序图语句
      ...

participant name1
participant name2 as 名字2

参与者 消息线 另一参与者: 信息
#例子 name1->>name2:msg

loop 循环的条件
    循环体描述语句
end

alt 分支条件1
    分支语句1
    ...
else 分支条件2
    分支语句2
     ...
else 分支条件3
     ...
     ...
end

opt 条件
    执行语句
     ...
end

sequenceDiagram
  title: 实例
  participant teacher as 老师
  participant stu as 学生

  opt 起床了
    Note right of stu:上学
    Note left of teacher:上课
  end
  stu->>teacher:老师好
  teacher->>stu:同学们好,请坐
  opt 老师应答完毕
    Note over stu:坐下
  end
  loop 授课时间
    Note right of teacher:老师上课
    alt 同学提问
      stu->>teacher:问题
      teacher->>stu:答案
    else 老师提问
      teacher->>stu:问题
      stu->>teacher:回答
    else 下课时间到了
      Note right of teacher:下课
    end
  end
  opt 下课
    teacher->>stu:同学们再见
    stu->>teacher:老师再见
  end
  Note over teacher,stu:继续日常至放学时间

  opt 放学了
    Note left of teacher:回家
    Note right of stu:回家
  end