在Markdown中用mermaid语法绘制图表

栏目: IT技术 · 发布时间: 4年前

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语法绘制图表

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

用到的关键词

关键词 功能
pie 定义饼形图
title 标题

流程图

在Markdown中用mermaid语法绘制图表

该流程图就是用下方的代码再markdown中实现的

```mermaid
graph RL;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

关键词解读

关键词 功能
graph 定义流程图
TD 流程图方向。mermai的方位还有T、D、L、 R,分别代表上、下、左、右。两个方位组合成一个流动方向。本案例是从上到下,即TD
--> 有向箭头

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

在Markdown中用mermaid语法绘制图表

```mermaid
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;
```

时序图

在Markdown中用mermaid语法绘制图表

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

```mermaid
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!
```

用到的关键词

关键词 功能
sequenceDiagram 定义顺序表
participant 定义图中的节点
loop 、end 循环体代码块,以loop开头,end结束;
Note 提示框
right of 方位关键词
->> 实线箭头连接线
-->> 虚线箭头

状态图

通过建立对象的生存周期模型来描述对象随时间变化的动态行为

在Markdown中用mermaid语法绘制图表

代码

```mermaid
stateDiagram 
    Start --> First
    First --> Second
    First --> Third
    Second --> End
    Third --> End

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {}
```

代码关键词解读

关键词 功能
stateDiagram 用于定义状态图
[*] 实心黑点
--> 有向实线
state 用于定义状态

我们可以看到状态state还可以定义内部的流程,如First和Second;Third没有定义内部处理过程。

甘特图

在Markdown中用mermaid语法绘制图表

代码如下

```mermaid
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
```

用到的关键词

关键词 功能
gantt 定义甘特图
dataFormat 定义日期格式
title 标题
excludes 排除项目周期中的放假休息等日期
section 定义一个项目
:done:active: 项目中的状态
after 紧随其后

class类图

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

在Markdown中用mermaid语法绘制图表

代码

```mermaid
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()
      }
```

用到的关键词

关键词 功能
classDiagram 定义类图
<|-- 隶属于某类
Animal : int age 定义Animal的年龄属性(属性没有用括号)
Animal: isMammal() 定义Animal的是否为哺乳动物方法(方法有括号)
class Duck 定义Duck类

大家如果熟悉Python,就能理解类的属性和方法区别就是是否有括号。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解CSS3

图解CSS3

廖伟华 / 机械工业出版社 / 2014-7-1 / CNY 79.00

本书是CSS3领域的标准性著作,由资深Web前端工程师根据CSS3的最新技术标准撰写。内容极为全面、丰富和翔实,由浅入深地讲解了CSS3新特性的语法、功能和使用技巧,涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块;写作方式创新,有趣且易懂,用图解的方式来描述CSS3的每一个特性甚至每一个步骤都配有实战效果图;包含大量案例,实战性强,每个特性都有作者从实践......一起来看看 《图解CSS3》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具