markdown中的各种工具图

385 阅读1分钟

简介

流程图、时序图、类图、状态图、旅程图、甘特图、饼图等这些图都可以以文本的形式插入到Markdown文档中,使用一种叫mermaid的语法。
是一种用文本描述图形的方法。
下面的代码,都需要包含在 mermaid 之间,否则不能看到效果。

流程图

graph TD
开始 --> 结束

时序图

sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
John--)John: Great!

类图

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

状态图

stateDiagram-v2
[*] --> Still
Still --> [*]

Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

关系图

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

旅程图

journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me

甘特图

gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
section Section
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d
section Another
Task in sec      :2014-01-12  , 12d
another task      : 24d

饼状图

pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15