|
|
@@ -0,0 +1,261 @@
|
|
|
+# Docsify画图建模Mermaid插件支持
|
|
|
+
|
|
|
+先上图
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## 引入Mermaid
|
|
|
+
|
|
|
+在 `head` 中加入css:
|
|
|
+
|
|
|
+```html
|
|
|
+<link rel="stylesheet" href="//unpkg.com/mermaid/dist/mermaid.min.css">
|
|
|
+```
|
|
|
+
|
|
|
+在 底部 引用js:
|
|
|
+
|
|
|
+```html
|
|
|
+<script type="text/javascript" src="//unpkg.com/mermaid/dist/mermaid.min.js"></script>
|
|
|
+```
|
|
|
+
|
|
|
+## 配置文件修改
|
|
|
+
|
|
|
+```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 = '<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代码解析器
|
|
|
+
|
|
|
+```js
|
|
|
+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>'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 自定义插件
|
|
|
+
|
|
|
+```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
|
|
|
+```
|
