markdown之mermaid

• 官方文档

01 简单的流程图

• TD或TB：top to bottom，从上到下的流程图
• LR：从左到右
• 其它：RL，BT

flowchart LR;
A([节点A的圆矩框]) --> |AB之间注释|B[[节点B的外框]];
A --> C(节点C的圆角矩形框);
A --A到F的注释--> F>节点F的旗帜形框];
A --- H(A到H曲线连接非箭头)
A -.-> I{{节点I的外框}}
B --> D[(节点D的桶框)];
C <--> D;
D ==> E((节点E的圆框));
F --> G{节点G的正菱形框}
G --> G1[/节点G1的平行四边形框/]
H --> H1[/节点H1的梯形框\]

flowchart LR; A([节点A的圆矩框]) --> |AB之间注释|B[[节点B的外框]]; A --> C(节点C的圆角矩形框); A --A到F的注释--> F>节点F的旗帜形框]; A --- H(A到H曲线连接非箭头) A -.-> I{{节点I的外框}} B --> D[(节点D的桶框)]; C <--> D; D ==> E((节点E的圆框)); F --> G{节点G的正菱形框} G --> G1[/节点G1的平行四边形框/] H --> H1[/节点H1的梯形框\]

02多个子图的流程图

flowchart TB
	c1 --> a2
	subgraph sub1
		a1 --> a2;
	end
	subgraph sub2
		b1 --> b2;
	end
	subgraph sub3
		c1 --> c2;
	end

flowchart TB c1 --> a2 subgraph sub1 a1 --> a2; end subgraph sub2 b1 --> b2; end subgraph sub3 c1 --> c2; end

03 饼图

pie
	title helloworld
	"python": 0.2
	"java": 0.2
	"go": 0.2
	"c++": 0.2
	".net": 0.2

pie title helloworld "python": 0.2 "java": 0.2 "go": 0.2 "c++": 0.2 ".net": 0.2

04 甘特图

gantt
	title 甘特demo
	dateFormat YYYY-MM-DD
	section 项目A
    A task :a1, 2014-01-01, 10d
    B task :active, after a1, 30d
    C task :crit, after a1, 10d
    section 项目B
    B1 task :b1, 2014-01-02, 15d
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

gantt title 甘特demo dateFormat YYYY-MM-DD section 项目A A task :a1, 2014-01-01, 10d B task :active, after a1, 30d C task :crit, after a1, 10d section 项目B B1 task :b1, 2014-01-02, 15d Task in sec :2014-01-12 , 12d another task : 24d

05 顺序图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    Note over Alice,John: 双方开始问候
    John->>Alice: Hi Alice! I'm fine. and you?
    Alice ->> John: ok. nice weather.
    activate John
    Note right of John: 在右注释
    John ->> Alice: you are right.
    deactivate John
    loop 整点循环
    	Alice ->> John: 您可真会说话
    end

sequenceDiagram Alice->>John: Hello John, how are you? Note over Alice,John: 双方开始问候 John->>Alice: Hi Alice! I'm fine. and you? Alice ->> John: ok. nice weather. activate John Note right of John: 在右注释 John ->> Alice: you are right. deactivate John loop 整点循环 Alice ->> John: 您可真会说话 end

06 class diagram（UML）

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

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

07 旅程图

journey
	title 我的国庆假期
	section work to home
		第一天休息: 5: 我
		第二天休息: 5: 我
		第三天休息: 4: 我
		第四天休息: 3: Me
		第五天休息: 2: Me

journey title 我的国庆假期 section work to home 第一天休息: 5: 我 第二天休息: 5: 我 第三天休息: 4: 我 第四天休息: 3: Me 第五天休息: 2: Me