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

2020年03月21日 54

tech_and_skill

先导

本贴在手机端因为mermaid插件的问题显示会超出屏幕，以后在想办法解决，目前建议使用电脑浏览

持续更新中...

本贴是为了记录因为沦为需要进行时序图和流程图进行mermaid图像的学习而写下的

Hexo 相关配置

要想在Hexo中使用mermaid图形的话需要安装hexo-filter-mermaid-diagrams这个插件并且配置相关的设置，该插件是由作者Frank_Fang修改编写的，并且在他的github项目中给出了很详细的配置说明,本贴就节选我的配置来说明。

安装插件

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

配置插件

首先配置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

然后在配置主题的相关页面片段使得网页能够是别到插件生成的mermaid图并渲染(需要一定的时间,主要是配置的js源比较慢),因为的使用的主题stun的页面片段是用pug编写的,所以使用的是作者说明的配置来的,如果使用的是ejs或者其他文件编写的请查看作者的github是怎么说明的,根据作者推荐的配置是在在after_footer.pug文件里面,但是我的这个主题并没有这个文件,所以我选择直接使用footer.pug来进行配置,可能会比原来的慢一点...

于是,在主题/layout/footer/footer.pug里面添加以下内容

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

至此,Hexo方面的配置基本完成,接下来就讲讲mermaid相关的语法

mermaid语法

mermaid的代码块标识是mermaid
创建一个代码块并将相关语句添加进去即可

如果想看到原汁原味的语法请到mermaid-js作者的git pages页面查看,里面有完整的语法支持,包括流程图、时序图、类图、活动土、甘特图和饼图，我这里只是节选一些我需要的进行简化抽取并进行简单的翻译

也可以体验mermaid-js作者提供的在线demo

流程图

程序流程图是用规定的符号描述一个专用程序中所需要的各项操作或判断的图示。这种流程图着重说明程序的逻辑性与处理顺序，具体描述了微机解题的逻辑及步骤。当程序中有较多循环语句和转移语句时，程序的结构将比较复杂，给程序设计与阅读造成困难。程序流程图用图的形式画出程序流向，是算法的一种图形化表示方法，具有直观、清晰、更易理解的特点。-百度百科"程序流程图"

程序流程图的mermaid语法基本如下:

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

其大致能分成:

方向描述
组件
线条
子图

方向描述

方向描述是用来规定流程图的方向的,具体语法如下

选项	说明
`TB`	方向从上至下
`BT`	方向从下至上
`LR`	方向从左至右
`RL`	方向从右至左

组件

组件是用来表示相关过程的,由id和括号组成,id是用来标识组件的的,具体语法如下

text是自定义文本
id可以用别的英文名替换

选项	说明
`id(text)`	圆角矩形
`id[text]`	矩形
`id{text}`	菱形
`id>text]`	旗帜形
`id((text))`	圆形

线条

线条是流程图各个组件之间的联系

text是自定义文本

选项	说明
`---`	简单线条,无箭头
`-->`	有箭头的简单线条
`--text---`	无箭头简单线条附带文字
`--text-->`	有箭头简单线条附带文字
`===`	无箭头粗线条
`==>`	有箭头粗线条
`==text===`	带文字无箭头粗线条
`==text==>`	带文字有箭头粗线条
`-.--`	无箭头虚线
`-.->`	有箭头虚线
`-.text.--`	带文字无箭头虚线
`-.text.->`	带文字有箭头虚线

由此,一个流程图所需的语法已经介绍完毕,子图我现在运用过少先不介绍了,接下来是一份基本例子

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

类图

类图(Class diagram)是显示了模型的静态结构，特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。它既用于应用程序的系统分类的一般概念建模，也用于详细建模，将模型转换成编程代码。类图也可用于数据建模。-百度百科"类图"

类图的创建语法基本如下

classDiagram
  类图的语句
   ...

其内容大致能分为

类定义
注释
关系

类定义

类图最主要的元素就是类了，定义一个类的方法有多种多样，建议使用比较像编程语言的语法创建类

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

通过上述语法可以在类图中创建一个类，下面讲讲成员变量和成员函数的相关语法

可见性

类的成员有着可见性这一特征，在类图中一般是可见性 类成员直接连着写的，可见性分类如下

符号	说明
`+`	公有的 `public`
`-`	私有的 `private`
`#`	保护的 `protected`
`~`	包内的 `package`

成员变量和成员函数

mermaid通过()来判定成员变量和成员函数，带有()的就是成员函数,否则为成员变量

加上可见性组合成员变量和成员函数就可以建立一个简单的类了

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; }

注意1:mermaid中想使用List<int>这样的通用参数或者返回值的话是不能直接使用<>符号的,需要使用~~来代替,也就是List~int~这样的形式。
注意2:mermaid函数返回值需要写在函数声明后,记住有空格,不能写在可见性后

注释

注释分为类的注释和类图中的注释

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

时序图

时序图（Sequence Diagram），又名序列图、循序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。-百度百科"时序图"

时序图的创建语法基本如下

sequenceDiagram
    时序图语句
      ...

其内容大致能分为:

参与者
消息线
标注
循环
判断

参与者

参与者是参消息的实体,其创建语法如下:

participant name1
participant name2 as 名字2

第1行是创建一个参与者,名字为name1,第2行是创建一个参与者名字叫做name2,但是它有一个别名叫名字2

消息线

消息线是时序图里面各个实体之间相互通信的联系,其说明如下

语法	说明
`->`	无箭头的实线
`-->`	无箭头的虚线
`->>`	有箭头的实线
`-->>`	有箭头的虚线
`-x`	末端为叉的实线
`--x`	末端为叉的虚线

注意:由此参与者+消息线就会合并就会发生信息,一般语法是:

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

标注

标注能够在时序图的某个时间点为实体标注一些信息,一般由Note 位置实体：文字描述来组成，其位置说明如下

选项	说明
`Note left of`	标注在实体的左侧
`Note right of`	标注在实体的右侧
`Note over`	标注在实体上

循环

循环是在一个时间段内符合某种条件时重复做一件事情,其基本语法如下:

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

甘特图

以下节选自百度百科"甘特图"的信息:

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。

标签