关于Markdown图表绘制

发表于 |

前言

写作时难免会有图表绘制需求 比如下面几种

示例

第一种样式时序图
1
2
3
4

Alice -> Bob:Hello Bob, How are you?
Note right of Bob: Bob thinks
Bob -> Alice: I am good thanks!
第二种样式时序图
 sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
            John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
甘特图
  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,6d
上下流程图
graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;
左右流程图
graph LR;

律动乐器-->律动+氛围乐器-->律动+鼓组贝斯-->律动+鼓组贝斯+氛围乐器;
铺底+氛围-->铺底+氛围+律动-->铺底+氛围+律动+鼓组贝斯-->追加间奏乐器;
自定义style的流程图
graph LR;
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
各种形状的流程图
graph  TD;
    A[/Christmas\]--> B[\This is the text in the box\]-->
     C[\Go shopping/]-->D[/This is the text in the box/]-->E{{This is the text in the box}}-->F{This is the text in the box}-->G>This is the text in the box]-->H((This is the text in the circle))-->J(This is the text in the box)

语法实现

时序图demo代码：

1
2
3
4
5
6
7
8
9
10
11
12
    <pre class="mermaid">    sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
            John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!</pre>
**甘特图demo代码：**
<pre class="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</pre>

流程图demo代码：

    <pre class="mermaid">    graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;</pre>

### 总结

以上只是列举其中几种 , 除此之外还可以绘制饼状图 状态图 类图 需求图等等

更多技巧可以参考`mermaid`文档: 《[mermaid官方文档](https://mermaid-js.github.io/mermaid/#/flowchart)》





**本文为作者原创转载时请注明出处 谢谢**

![](https://gitee.com/songjianzaina/SavePicGoPic/raw/master/img/20191119095516.png)

*[乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站](https://code.newban.cn/)*
0%