CSDN和Typora的Markdown插入思维导图
CSDN和Typora的Markdown插入思维导图
- 前言
- 在Markdown中画（流程）图
- Mermaid
-
- Sequence Diagrams（UML图）
- Flowcharts
- 另一种Flowcharts
- Gantt图（甘特图）
- Class图（类图）
- State 图
- 饼图
- 参考文献
前言
因为打算使用Markdown做笔记，想找一种方法可在Markdown中插入思维导图。这种方法必须满足三点：（1）免费（2）简单（3）插入导图可编辑。网上一通找，在见到各种千奇百怪的方法之后，看见人家Typora官方给出了方法，而CSDN的帮助文档也有简单教程插入Mermaid流程图。按照Typora官方的方法，在CSDN上测试发现基本没问题。于是，我把它翻译成中文放在这里，示例代码已经过改良。
想直接看思维导图的，直接看目录中的另一种Flowcharts即可。
在Markdown中画（流程）图
Typora集成了几种画（流程）图的方法，在设置中启用即可。但Typora仍推荐使用插入图片的方法插流程图。因为Markdown像其他格式文件转换可能会出现问题。（但我们就用Markdown，所以这个问题不存在。）
Mermaid
Mermaid除了Sequence图和Flowcharts两种，还支持Gantt图，class图，state图和饼图。
Sequence Diagrams（UML图）
使用了js-sequence，按照代码生成一个渲染后的图表。CSDN和Typora可直接使用。
```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->>Alice: I am good thanks!
```
Alice Bob Hello Bob, how are you? Bob thinks I am good thanks! Alice Bob
Flowcharts
使用flowchart.js
```mermaid
flowchat
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```
Created with Raphaël 2.3.0 Start Your Operation Yes or No? End yes no
注：在Typora中为
``` flow
...
```
另一种Flowcharts
个人推荐，可用做思维导图。
```mermaid
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
One
Two
Hard edge
Round edge
Decision
Result one
Result two
Gantt图（甘特图）
可参考Gantt diagrams
Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid
Class图（类图）
可参考Class diagrams
```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()
}
```
Animal +int age +String gender +isMammal() +mate() Duck +String beakColor +swim() +quack() Fish -int sizeInFeet -canEat() Zebra +bool is_wild +run()
State 图
这个图CSDN帮助文档中没有引入，但实际上可以生成，只是大小不能控制。此处效果图为Tpyora截图。
而Tpyora(v0.11.18)不支持direction LR选项。
但这个State图如果开发好的话，是比Flowcharts好的。
```mermaid
stateDiagram
[*] --> A
A --> B
B --> C
state B {
a --> b
}
B --> D
```
饼图
```mermaid
pie
title Pie Chart
"Dogs" : 386
"Cats" : 85
"Rats" : 150
```
62% 14% 24% Pie Chart Dogs Cats Rats
参考文献
- Typora官方的方法
- mermaid