Typora与Mermaid绘图

Typora与Mermaid绘图

1. Flowchart流程图

   张三

   喜欢

   热爱

   游戏
   线程池c=2,m=3

   阻塞队列

   核心线程1

   核心线程2

   救急线程1

   任务1

   任务2

   任务5

   size=2

   任务3

   任务4

   graph TD;
   	A-->B;
   	A-->C;
   	B-->D;
   	C-->D;
   
   
   
   graph LR
   
   subgraph 阻塞队列
   size=2
   t3(任务3)
   t4(任务4)
   end
   
   subgraph 线程池c=2,m=3
   ct1(核心线程1)
   ct2(核心线程2)
   mt1(救急线程1)
   ct1 --> t1(任务1)
   ct2 --> t2(任务2)
   mt1 --> t5(任务5)
   end
   
   style ct1 fill:#ccf,stroke:#f66,stroke-width:2px
   style ct2 fill:#ccf,stroke:#f66,stroke-width:2px
   style mt1 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5
   
   

2. Sequence diagram时序图

   Alice Bob John Hello John, how are you Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Nice! How about you Very good Alice Bob John

   sequenceDiagram
   	participant Alice
   	participant Bob
   	Alice->>John: Hello John, how are you?
   	loop Healthcheck
   		John->>John: Fight against hypochondria
   	end
   	Note right of John: Rational thoughts 
   prevail!
   	John-->>Alice: Nice!
   	John->>Bob: How about you!
   	Bob-->>John: Very good!
   

3. Class Diagram类图

   Cool

   Where am i?

   Cool label

   Class01

   int chimp

   int gorilla

   size()

   AveryLongClass

   Class03

   Class04

   Class05

   Class06

   Class07

   Object[] elementData

   Class08

   Class09

   C2

   C3

   classDiagram
   Class01 <|-- AveryLongClass: Cool
   Class03 -- Class04
   Class05 o-- Class06
   Class07 .. Class08
   Class09 --> C2: Where am i?
   Class09 -- C3
   Class09 --|> Class07
   Class07: Object[] elementData
   Class01: size()
   Class01: int chimp
   Class01: int gorilla
   Class08<-->C2: Cool label
   

4. State Diagram状态图

   Still

   Moving

   Crash

   stateDiagram
   	[*] --> Still
   	Still --> [*]
   	Still --> Moving
   	Moving --> Still
   	Moving --> Crash
   	Crash --> [*]
   

5. Gantt甘特图

Mon 13 Mon 20 Mon 27 已完成 进行中 计划中 计划 现有任务 Adding 甘特图

gantt
   dateFormat YYYY-MM-DD
   title Adding 甘特图
   section 现有任务
   已完成: done, des1, 2021-09-10, 2021-09-15
   进行中: active, des2, 2021-09-16, 3d
   计划中: des3, after des2, 5d
   计划: des4, after des3, 5d

6. PieChart饼图

   40% 46% 9% 5% Key elements in Product X Calcium Potassium Magnesium Iron

   pie
   	title Key elements in Product X
   	"Calcium": 42.96
   	"Potassium": 50.05
   	"Magnesium": 10.01
   	"Iron": 5