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