CSDN和Typora的Markdown插入思维导图

前言

因为打算使用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!
	```

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
	```

注：在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]
	```

Gantt图（甘特图）

可参考Gantt diagrams

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()
	      }
	```

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 
	```

参考文献

1. Typora官方的方法
2. mermaid