先上图
在 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: {
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