Docsify画图建模Mermaid插件支持
先上图
引入 Mermaid
在 head
中加入 css:
<link rel="stylesheet" href="//unpkg.com/mermaid/dist/mermaid.min.css" />
在 底部 引用 js:
<script type="text/javascript" src="//unpkg.com/mermaid/dist/mermaid.min.js"></script>
配置文件修改
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 = '<div class="mermaid">' + code + '</div>';
}
var hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup);
return html + '<pre v-pre data-lang="' + lang + '"><code class="lang-' + lang + '">' + hl + '</code></pre>';
}
}
}
};
解释一下,两个关键步骤:
markdown 代码解析器
markdown: {
renderer: {
code: function(code, lang) {
var html = '';
// 搜索 mermaid 代码
if(code.match(/^sequenceDiagram/) || code.match(/^graph/) || code.match(/^gantt/)){
// 生成一个 mermaid 图表的容器
html = '<div class="mermaid">' + code + '</div>';
}
// 源码自带的 Prism 高亮插件
var hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
// 将图表的容器添加到代码之前
return html + '<pre v-pre data-lang="' + lang + '"><code class="lang-' + lang + '">' + hl + '</code></pre>'
}
}
}
自定义插件
plugins: [
function (hook, vm) {
hook.ready(function () {
// 类似 jQuery.ready 初始化 mermaid, 禁用自动渲染
mermaid.initialize({ startOnLoad: false });
});
hook.doneEach(function () {
// 每个页面渲染完成后手动渲染 mermaid 图表
mermaid.init(undefined, '.mermaid');
});
}
];
最后再补一张甘特图:
Mermaid 支持:
- 流程图
- 序列图
- 甘特图
而且语法结构非常简单,值得推荐.
其实,正文才刚刚开始.
流程图
开始/结束
graph TB
s(开始/结束)
style s rx: 10, ry: 10
过程
graph TB
step1[过程]
输入/输出
graph TB
step2>输入/输出]
判断
graph TB
step3{判断}
连接线
graph LR
A --> B
自定义样式
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
示例
graph TB
s(开始) --> step1>输入参数]
step1 --> step2{判断参数合法性}
step2 ==> |校验失败|e
step2--> |校验成功|step3[处理业务]
step3 --> e(结束)
style s rx: 10, ry: 10
style e rx: 10, ry: 10
子图
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
时序图
参与者
sequenceDiagram
participant 客户端
participant 接口服务器
participant 数据库
消息
消息格式
[参与者][箭头][参与者]:消息内容
支持的箭头有:
类型 | 说明 |
---|---|
-> | 无箭头实线 |
--> | 无箭头虚线 |
->> | 箭头实线 |
-->> | 箭头虚线 |
-x | 箭头实线带 x(异步) |
--x | 箭头虚线带 x(异步) |
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
激活
用 +/-
符号
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!
甘特图
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