# Docsify画图建模Mermaid插件支持
先上图
## 引入Mermaid
在 `head` 中加入css:
```html
```
在 底部 引用js:
```html
```
## 配置文件修改
```js
window.$docsify = {
// ...
plugins: [
function(hook, vm) {
hook.ready(function () {
mermaid.initialize({startOnLoad: false});
});
hook.doneEach(function () {
mermaid.init(undefined,'.mermaid');
});
}
],
markdown: {
renderer: {
code: function(code, lang) {
var html = '';
if(code.match(/^sequenceDiagram/) || code.match(/^graph/) || code.match(/^gantt/)){
html = '' + code + '
';
}
var hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
return html + '' + hl + '
'
}
}
}
}
```
解释一下,两个关键步骤:
### markdown代码解析器
```js
markdown: {
renderer: {
code: function(code, lang) {
var html = '';
// 搜索 mermaid 代码
if(code.match(/^sequenceDiagram/) || code.match(/^graph/) || code.match(/^gantt/)){
// 生成一个 mermaid 图表的容器
html = '' + code + '
';
}
// 源码自带的 Prism 高亮插件
var hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
// 将图表的容器添加到代码之前
return html + '' + hl + '
'
}
}
}
```
### 自定义插件
```js
plugins: [
function(hook, vm) {
hook.ready(function () {
// 类似 jQuery.ready 初始化 mermaid, 禁用自动渲染
mermaid.initialize({startOnLoad: false});
});
hook.doneEach(function () {
// 每个页面渲染完成后手动渲染 mermaid 图表
mermaid.init(undefined,'.mermaid');
});
}
]
```
最后再补一张甘特图:
Mermaid支持:
- 流程图
- 序列图
- 甘特图
而且语法结构非常简单,值得推荐.
## 其实,正文才刚刚开始.
### 流程图
#### 开始/结束
```mermaid
graph TB
s(开始/结束)
style s rx: 10, ry: 10
```
#### 过程
```mermaid
graph TB
step1[过程]
```
#### 输入/输出
```mermaid
graph TB
step2>输入/输出]
```
#### 判断
```mermaid
graph TB
step3{判断}
```
#### 连接线
```mermaid
graph LR
A --> B
```
#### 自定义样式
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```
#### 示例
```mermaid
graph TB
s(开始) --> step1>输入参数]
step1 --> step2{判断参数合法性}
step2 ==> |校验失败|e
step2--> |校验成功|step3[处理业务]
step3 --> e(结束)
style s rx: 10, ry: 10
style e rx: 10, ry: 10
```
#### 子图
```mermaid
graph TB
s(开始) --> step1>输入参数]
subgraph 强调
step1 --> step2{判断参数合法性}
end
step2 ==> |校验失败|e
step2--> |校验成功|step3[处理业务]
step3 --> e(结束)
style s rx: 10, ry: 10
style e rx: 10, ry: 10
```
### 时序图
#### 参与者
```mermaid
sequenceDiagram
participant 客户端
participant 接口服务器
participant 数据库
```
#### 消息
##### 消息格式
```
[参与者][箭头][参与者]:消息内容
```
支持的箭头有:
| 类型 | 说明 |
|:---:|----------|
| -> | 无箭头实线 |
| --> | 无箭头虚线 |
| ->> | 箭头实线 |
| -->>| 箭头虚线 |
| -x | 箭头实线带x(异步) |
| --x | 箭头虚线带x(异步) |
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
#### 激活
用 `+/-` 符号
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can yoy hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
### 甘特图
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
## 在线编辑器