使用Typora繪制類圖、流程圖、時序圖

Typora並不是只能寫文檔，它還能“畫圖”。說是畫圖，但並不像其他專業的繪圖軟件那樣，通過拖拖拽拽一些元素，畫出流程圖、時序圖等。它的制圖功能是由 Mermaid 驅動。

Mermaid：是一種簡單的類似 Markdown 的腳本語言，通過 JavaScript 編程語言，將文本轉換為圖片。因此，真正實現畫圖功能的並不是 Typora 本身，它只是內置了對 Mermaid 的支持。

Mermaid 支持繪制非常多種類的圖，常見的有時序圖、流程圖、類圖、甘特圖等等。下面分享一下如何繪制這些圖，語法非常容易掌握。

先在 Typora 中，輸入 ```mermaid 然后敲擊回車，即可初始化一張空白圖。（注：mermaid前面有三個`）

流程圖

語法解釋：graph 關鍵字就是聲明一張流程圖，TD 表示的是方向，這里的含義是 Top-Down 由上至下。

 

graph TD;
    A-->B;
    A-->C;
    B-->D;

時序圖

語法解釋：sequenceDiagram 聲明一張時序圖，  ->> 代表實線箭頭，-->> 則代表虛線。

sequenceDiagram
    小明->>韓梅梅: 小明, 你好?
    韓梅梅-->>小明: 你好!

狀態圖

語法解釋：stateDiagram 聲明一張狀態圖，[*] 表示開始或者結束，如果在箭頭右邊則表示結束。

stateDiagram
    [*] --> s
     s --> [*]
     s --> s1
     s1 --> [*]

類圖

語法解釋：classDiagram 聲明一張類圖，<|-- 表示繼承，+ 表示 public，- 表示 private，學過面向對象語言的應該都知道。

classDiagram
      動物 <|-- 天鵝
      動物 <|-- 魚
      動物 <|-- 驢
      動物 : +int age
      動物 : +String gender
      動物: +isMammal()
      動物: +mate()
      class 天鵝{
          +String color
          +swim()
          +quack()
      }
      class 魚{
          -int size
          -canEat()
      }
      class 驢{
          +bool is_wild
          +run()
      }

甘特圖

語法解釋：gantt 聲明一張甘特圖，，title標題、dateFormat日期格式、section項目、項目細分的任務。

gantt
    title 工作計划
    dateFormat  YYYY-MM-DD
    section Section
    A task           :b1, 2022-03-01, 30d
    Another task     :after b1  , 20d
    section Another
    Task in sec      :2022-03-12  , 12d
    another task      : 24d

餅圖

語法解釋：pie 聲明一張餅圖，title 標題

pie
    title 進口貨物
    "衣物" : 40.86
    "糧食" : 40.05
    "生活用品" : 12.01
    "鋼材" :  15

小結

Mermaid 使用非常簡潔優雅的語法，讓使用者可以快速地畫出相應的圖形，並且圖片也非常美觀，配色和諧。