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

CSDN和Typora的Markdown插入思维导图_第1张图片

饼图

	```mermaid
	pie
	    title Pie Chart
	    "Dogs" : 386
	    "Cats" : 85
	    "Rats" : 150 
	```
62% 14% 24% Pie Chart Dogs Cats Rats

参考文献

  1. Typora官方的方法
  2. mermaid

你可能感兴趣的:(教程,笔记,markdown,思维导图,csdn)