Typora 畫圖

推薦閱讀 官方文檔說明：https://support.typora.io/Draw-Diagrams-With-Markdown/

畫圖

輸入 ```mermaid 然后回車，初始化一張空白圖

流程圖

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

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

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

• 粗線條： ==>

• 備注：A --> |備注| B

• 方形邊框： 代號[名稱] （直接寫名稱默認是這個）

• 圓角邊框： 代號(名稱)

• 菱形邊框： 代號{名稱}

例子：

graph TD;
	A(RUNNING) --> |"showdown()"| B(SHUTDOWN);
	B --> |"showdownNow()"| C(STOP);
	A --> |"showdownNow()"| C;
	B --> |"任務隊列和線程池都清空后"| D(TIDYING);
	C --> |"任務隊列清空后"| D;
	D --> |"terminated()結束后"| E(TERMINATED)

graph TD; A(RUNNING) --> |"showdown()"| B(SHUTDOWN); B --> |"showdownNow()"| C(STOP); A --> |"showdownNow()"| C; B --> |"任務隊列和線程池都清空后"| D(TIDYING); C --> |"任務隊列清空后"| D; D --> |"terminated()結束后"| E(TERMINATED)

時序圖

語法解釋：->> 代表實線箭頭，-->> 則代表虛線。

sequenceDiagram
	Alice->>John: Hello John,how are you?
	John -->> Alice:Great!
	Alice -> Te:haha

sequenceDiagram Alice->>John: Hello John,how are you? John -->> Alice:Great! Alice -> Te:haha

狀態圖

語法解釋：[*] 表示開始或者結束，如果在箭頭右邊則表示結束。

stateDiagram
	[*] --> s1
	s1 --> [*]
	s1 --> s2
	s2 --> s1
	s2 --> [*]

stateDiagram [*] --> s1 s1 --> [*] s1 --> s2 s2 --> s1 s2 --> [*]

類圖

語法解釋：<|-- 表示繼承，+ 表示 public，- 表示 private，學過 Java 的應該都知道。

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +isMamal()
      Animal : +mate()
      class Duck{
      	+String beakColor
      	+swim()
      	+quack()
      }
      class Fish{
      	-int sizeInFeet
      	-canEat()
      }
      class Zebra{
      	+boolean is_wild
      	+run()
      }

classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +isMamal() Animal : +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +boolean is_wild +run() }

甘特圖

甘特圖一般用來表示項目的計划排期，目前在工作中經常會用到。

語法也非常簡單，從上到下依次是圖片標題、日期格式、項目、項目細分的任務。

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

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

餅圖

餅圖使用 pie 表示，標題下面分別是區域名稱及其百分比。

pie
	title Key elements in Product X
	"Calcium":42.96
	"Potassium":20.05
	"Magnesium":10.01
	"Iron": 23

pie title Key elements in Product X "Calcium":42.96 "Potassium":20.05 "Magnesium":10.01 "Iron": 23

導出

繪制好的圖片可以選擇菜單/文件/導出，導出為圖片或者網頁格式。在網頁中圖片是以 SVG 格式渲染的，你可以復制 SVG 內容，導入到 SVG 的圖片編輯器中進一步操作。

參考：https://zhuanlan.zhihu.com/p/172635547