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