在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中最簡單,基本上一看就會

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

用到的關鍵詞

關鍵詞功能
pie定義餅形圖
title標題

流程圖

該流程圖就是用下方的代碼再markdown中實現的

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

關鍵詞解讀

關鍵詞功能
graph定義流程圖
TD流程圖方向。mermai的方位還有T、D、L、 R,分別代表上、下、左、右。兩個方位組合成一個流動方向。本案例是從上到下,即TD
-->有向箭頭

節點還可以用:::調用修飾函數,如下

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

時序圖

時序圖用於描述對象之間的傳遞消息的時間順序, 即用例中的行爲順序. 順序圖稍微複雜了一丟丟,代碼如下

```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方位關鍵詞
->>實線箭頭連接線
-->>虛線箭頭

狀態圖

通過建立對象的生存週期模型來描述對象隨時間變化的動態行爲

代碼

```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沒有定義內部處理過程。

甘特圖

代碼如下

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

p A p
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排除項目週期中的放假休息等日期
p定義一個項目
:done  、 :active:項目中的狀態
after緊隨其後

class類圖

面向對象的編程會經常看到類,類與類有所屬關係。比如中國人是人類的一員,而人類又隸屬於靈長類動物。

代碼

```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,就能理解類的屬性和方法區別就是是否有括號。

往期文章讀完本文你就瞭解什麼是文本分析

綜述:文本分析在市場營銷研究中的應用
從記者的Twitter關注看他們稿件的黨派傾向?

Pandas時間序列數據操作
70G上市公司定期報告數據集
文本數據清洗之正則表達式
Python網絡爬蟲與文本數據分析
shreport庫: 批量下載上海證券交易所上市公司年報
Numpy和Pandas性能改善的方法和技巧
漂亮~pandas可以無縫銜接Bokeh
YelpDaset: 酒店管理類數據集10+G
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章