先导
mermaid
插件的问题显示会超出屏幕,以后在想办法解决,目前建议使用电脑浏览- 持续更新中…
本贴是为了记录因为沦为需要进行时序图和流程图进行mermaid图像的学习而写下的
Hexo 相关配置
要想在Hexo
中使用mermaid
图形的话需要安装hexo-filter-mermaid-diagrams
这个插件并且配置相关的设置,该插件是由作者Frank_Fang
修改编写的,并且在他的github项目
中给出了很详细的配置说明,本贴就节选我的配置来说明。
安装插件
1cnpm install hexo-filter-mermaid-diagrams --save
配置插件
首先配置Hexo的_config.yml
需要在配置文件的文末添加
1# mermaid chart
2mermaid: ## mermaid url https://github.com/knsv/mermaid
3 enable: true
4 # default true
5 version: "7.1.2"
6 # default v7.1.2
7 options:
8 # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
9 #startOnload: true // default true
然后在配置主题的相关页面片段使得网页能够是别到插件生成的mermaid
图并渲染(需要一定的时间,主要是配置的js源比较慢),因为的使用的主题stun
的页面片段是用pug
编写的,所以使用的是作者说明的配置来的,如果使用的是ejs
或者其他文件编写的请查看作者的github
是怎么说明的,根据作者推荐的配置是在在after_footer.pug
文件里面,但是我的这个主题并没有这个文件,所以我选择直接使用footer.pug
来进行配置,可能会比原来的慢一点…
于是,在主题/layout/footer/footer.pug
里面添加以下内容
1if theme.mermaid.enable == true
2 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)
3 script.
4 if (window.mermaid) {
5 var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
6 mermaid.initialize(options);
7 }
至此,Hexo
方面的配置基本完成,接下来就讲讲mermaid
相关的语法
mermaid语法
mermaid
的代码块标识是mermaid- 创建一个代码块并将相关语句添加进去即可
如果想看到原汁原味的语法请到mermaid-js
作者的git pages页面查看
,里面有完整的语法支持,包括流程图、时序图、类图、活动土、甘特图和饼图,我这里只是节选一些我需要的进行简化抽取并进行简单的翻译
- 也可以体验
mermaid-js
作者提供的在线demo
流程图
程序流程图是用规定的符号描述一个专用程序中所需要的各项操作或判断的图示。这种流程图着重说明程序的逻辑性与处理顺序,具体描述了微机解题的逻辑及步骤。当程序中有较多循环语句和转移语句时,程序的结构将比较复杂,给程序设计与阅读造成困难。程序流程图用图的形式画出程序流向,是算法的一种图形化表示方法,具有直观、清晰、更易理解的特点。-百度百科"程序流程图"
程序流程图的mermaid
语法基本如下:
1graph 方向描述
2 组件相关语句
3 ...
其大致能分成:
- 方向描述
- 组件
- 线条
- 子图
方向描述
方向描述是用来规定流程图的方向的,具体语法如下
选项 | 说明 |
---|---|
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.-> |
带文字有箭头虚线 |
由此,一个流程图所需的语法已经介绍完毕,子图我现在运用过少先不介绍了,接下来是一份基本例子
1graph TB
2 start(开始)-->opt1[事件1]
3 opt1-->if1{判断1}
4 if1--Y-->opt2[事件2]
5 opt2-.如果累了.->opt4((休息一下))
6 if1--N-->opt3[事件3]
7 opt2-->endd(结束)
8 opt3-->endd
9
类图
类图(Class diagram)是显示了模型的静态结构,特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。它既用于应用程序的系统分类的一般概念建模,也用于详细建模,将模型转换成编程代码。类图也可用于数据建模。-百度百科"类图"
类图的创建语法基本如下
1classDiagram
2 类图的语句
3 ...
其内容大致能分为
- 类定义
- 注释
- 关系
类定义
类图最主要的元素就是类了,定义一个类的方法有多种多样,建议使用比较像编程语言的语法创建类
1class NAME{
2 成员变量相关
3 成员函数相关
4}
通过上述语法可以在类图中创建一个类,下面讲讲成员变量和成员函数的相关语法
- 可见性
类的成员有着可见性这一特征,在类图中一般是可见性
类成员
直接连着写的,可见性分类如下
符号 | 说明 |
---|---|
+ |
公有的 public |
- |
私有的 private |
# |
保护的 protected |
~ |
包内的 package |
- 成员变量和成员函数
mermaid
通过()
来判定成员变量和成员函数,带有()
的就是成员函数,否则为成员变量
加上可见性组合成员变量和成员函数就可以建立一个简单的类了
1classDiagram
2 class Student{
3 -String name;
4 -int age;
5 +Student(String name,int age);
6 }
- 注意1:
mermaid
中想使用List<int>
这样的通用参数或者返回值的话是不能直接使用<>
符号的,需要使用~~
来代替,也就是List~int~
这样的形式。 - 注意2:
mermaid
函数返回值需要写在函数声明后,记住有空格,不能写在可见性后
注释
注释分为类的注释和类图中的注释
时序图
时序图(Sequence Diagram),又名序列图、循序图,是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序,当执行一个用例行为时,其中的每条消息对应一个类操作或状态机中引起转换的触发事件。-百度百科"时序图"
时序图的创建语法基本如下
1sequenceDiagram
2 时序图语句
3 ...
其内容大致能分为:
- 参与者
- 消息线
- 标注
- 循环
- 判断
参与者
参与者是参消息的实体,其创建语法如下:
1participant name1
2participant name2 as 名字2
第1行是创建一个参与者,名字为name1
,第2行是创建一个参与者名字叫做name2
,但是它有一个别名叫名字2
消息线
消息线是时序图里面各个实体之间相互通信的联系,其说明如下
语法 | 说明 |
---|---|
-> |
无箭头的实线 |
--> |
无箭头的虚线 |
->> |
有箭头的实线 |
-->> |
有箭头的虚线 |
-x |
末端为叉的实线 |
--x |
末端为叉的虚线 |
注意:由此参与者
+消息线
就会合并就会发生信息,一般语法是:
1参与者 消息线 另一参与者: 信息
2#例子 name1->>name2:msg
标注
标注能够在时序图的某个时间点为实体标注一些信息,一般由Note 位置 实体:文字描述
来组成,其位置说明如下
选项 | 说明 |
---|---|
Note left of |
标注在实体的左侧 |
Note right of |
标注在实体的右侧 |
Note over |
标注在实体上 |
循环
循环是在一个时间段内符合某种条件时重复做一件事情,其基本语法如下:
1loop 循环的条件
2 循环体描述语句
3end
判断
遇到一些需要根据不同情况进行分支选择的时候就需要用到判断语句了,其语法大致有两种,一种是有多分支的,一种是只有一条分支的
多分支:
1alt 分支条件1
2 分支语句1
3 ...
4else 分支条件2
5 分支语句2
6 ...
7else 分支条件3
8 ...
9 ...
10end
单分支,即只有一个条件操作:
1opt 条件
2 执行语句
3 ...
4end
基本上时序图就是以上的常用语法了,下面给出一个实例:
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)先生的名字命名。
评论