Markdown的时序图、流程图、和甘特图+Hexo的相关配置
先导
本贴在手机端因为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)先生的名字命名。
- OC学习2——C语言特性之函数
- OC学习1——基本数据类型
- QQ定位女友是否回家系列二之定位系统的打造
- htcap:一款实用的递归型Web漏洞扫描工具
- 使用Go和Let's Encrypt证书部署HTTPS
- md5算法
- 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题
- King Phisher:一款专业的钓鱼活动工具包
- 是不是Bash编程老司机,看完这10条细节就知道了
- 以针对Yahoo! 的安全测试为例讲解如何高效的进行子域名收集与筛选
- 线程池
- hbase 部署
- Hadoop源码系列(一)FairScheduler申请和分配container的过程
- MOTS攻击之TCP攻击
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 访问tomcat manager应用遇到的403 access denied错误
- 使用ant执行Java代码
- TypeScript 类型注解和类型推断
- 目前解决移动端1px边框最好的方法
- 关于php的引用
- Windows 开机自启 VMware 虚拟机
- Alertmanager 安装与使用
- typedef用法
- LaTex中插入大括号的多行公式
- Latex公式编辑和子公式编辑
- nginx rewrite 跨域
- Oracle删除索引规范
- mysql中走与不走索引的情况汇集(待全量实验)
- C#标准事件流
- 【STM32F407开发板用户手册】第25章 STM32F407的TIM定时器基础知识和HAL库API