在Markdown中用mermaid语法绘制图表

Python数据挖掘与文本分析&Stata应用能力提升与实证前沿云特训~

Mermaid可以用文本方式绘制图表和流程图,相比Visio而言更加的轻量便捷,此外Markdown内部支持Mermaid语法,可以有效避免切换软件,让我们更加专注于内容本身。

mermaid官方文档

https://mermaid-js.github.io/mermaid/#/README

图表类型支持

  • 饼形图(Pie Chart)

  • 流程图(Flow Chart)

  • 时序图(Sequence Diagram)

  • 状态图(State Diagram)

  • 甘特图(Gantt Diagram)

  • 类图(class Diagram)

  • 等等

饼形图
饼形图是我们经常用到的图表,在mermaid中最简单,基本上一看就会

在Markdown中用mermaid语法绘制图表

代码

    pie 
    title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15 
``

用到的关键词

![](https://s4.51cto.com/images/blog/202012/30/74bb08c25ed1da93f53dfbdb3ce98ce3.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
**流程图**

![](https://s4.51cto.com/images/blog/202012/30/281dc49b4ebc4b539e7877ce21a5eb50.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
该流程图就是用下方的代码再markdown中实现的
graph RL;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
关键词解读

![](https://s4.51cto.com/images/blog/202012/30/b499ff347622840acb18daef90b45e42.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

节点还可以用:::调用修饰函数,如下

![](https://s4.51cto.com/images/blog/202012/30/e9af8b8637b650eb802a2c7338803cff.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;

**时序图**
![](https://s4.51cto.com/images/blog/202012/30/73bb68e7ddf3d249efbbfe3c80b56999.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

时序图用于描述对象之间的传递消息的时间顺序, 即用例中的行为顺序. 顺序图稍微复杂了一丢丢,代码如下
sequenceDiagram
    participant Alice
    participant Bob
    participant John

    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!

用到的关键词
![](https://s4.51cto.com/images/blog/202012/30/764afd969c944bc8f6c436b151ea0dc1.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
**状态图**
通过建立对象的生存周期模型来描述对象随时间变化的动态行为

![](https://s4.51cto.com/images/blog/202012/30/43edc0620ed4c342c5178680b649a51c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

代码
stateDiagram 
    Start --> First
    First --> Second
    First --> Third
    Second --> End
    Third --> End

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {}
代码关键词解读
![](https://s4.51cto.com/images/blog/202012/30/e3077826ba8b0b543ebc9794f6babf4e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

**甘特图**
![](https://s4.51cto.com/images/blog/202012/30/c5e79ecbc49a5417da4fbf497b0b2999.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

代码如下
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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
用到的关键词

![](https://s4.51cto.com/images/blog/202012/30/4e11cd77fb0db626ea57cc0b04ffb8a2.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

**class类图**
面向对象的编程会经常看到类,类与类有所属关系。比如中国人是人类的一员,而人类又隶属于灵长类动物。

![](https://s4.51cto.com/images/blog/202012/30/f95d1db5756557fe693fa996b7c332ac.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

代码
classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : int age
      Animal : String gender
      Animal: isMammal()
      Animal: mate()
      class Duck{
          String beakColor
          swim()
          quack()
      }
      class Fish{
          int sizeInFeet
          canEat()
      }
      class Zebra{
          bool is_wild
          run()
          eat()
      }


用到的关键词

![](https://s4.51cto.com/images/blog/202012/30/212f28dbb6936d507ca3af5fb7223d2f.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
大家如果熟悉Python,就能理解类的属性和方法区别就是是否有括号。

猜你喜欢

转载自blog.51cto.com/15069487/2578556
今日推荐