Markdown中的Mermaid语法

1 流程图

graph LR;  
A[开始] --> B{判断};  
B --第一种情况--> C[第一种方案];  
B --第二种情况--> D[第二种方案];  
B --第三种情况--> F{第三种方案};  
F-.-> J((测试圆形));  
F-.第2个.-> H>右向旗帜形];  
H --> I[测试完毕];  
C -->|票数100| I;  
D --> I;  
J --> I;
第一种情况
第二种情况
第三种情况
第2个
票数100
开始
判断
第一种方案
第二种方案
第三种方案
测试圆形
右向旗帜形
测试完毕
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Text
One
Two
Hard
Round
Decision
Result 1
Result 2

2 时序图

sequenceDiagram  
    participant Alice  
    participant Bob  
    Alice->>Bob: Hello Bob, how are you?  
    loop Healthcheck
    John->>John: Fight against hypochondria
	end
	Note right of John: Rational thoughts!
    Bob-->>John: How about you John?  
    John-->>Alice: I am good, thanks!
Alice Bob John Hello Bob, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts! How about you John? I am good, thanks! Alice Bob John

3 类图

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()
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

Cool
Where am I?
«Interface»
Class01
int chimp
int gorilla
size()
AveryLongClass
Class09
C2
C3
Class07
Object[] elementData
equals()
«service»
Class10
int id
size()

4 状态图

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

5 实体关系图

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

6 甘特图

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
2014-01-06 2014-01-06 2014-01-07 2014-01-07 2014-01-08 2014-01-08 2014-01-09 2014-01-09 2014-01-10 Completed Active Parallel 1 Parallel 2 Parallel 3 Parallel 4 Section

7 饼图

pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
79% 18% 3% Dogs Cats Rats

8 条形图

gantt
    title Git Issues - days since last update
    dateFormat  X
    axisFormat %s

    section Issue19062
    71   : 0, 71
    section Issue19401
    36   : 0, 36
    section Issue193
    34   : 0, 34
    section Issue7441
    9    : 0, 9
    section Issue1300
    5    : 0, 5
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 71 36 34 9 5 Issue19062 Issue19401 Issue193 Issue7441 Issue1300 Git Issues - days since last update

9 用户旅行图

  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: 3: Me
Cat Me
Go to work
Go to work
Me
Make tea
Make tea
Me
Go upstairs
Go upstairs
Me Cat
Do work
Do work
Go home
Go home
Me
Go downstairs
Go downstairs
Me
Sit down
Sit down
My working day
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值