Markdown - 进阶知识

1
2

graph 方向
    图表中的其他语句...

1
2
3
4
5
6
7

graph TB;
    id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))

1
2
3
4
5
6
7

graph TB;
	id1{菱形}
	id2{{六角形}}
	id3[/平行四边形/]
	id4[\反向平行四边形\]
	id5[/梯形\]
	id6[\反向梯形/]

1
2

graph LR;
a-->b--文本1-->c-->|文本2|d

1
2

graph LR;
a==>b==文本==>c

1
2

graph LR;
a-.->b-.文本.->c

1
2
3
4
5
6
7
8

graph LR;
a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h

1
2
3
4
5
6

flowchart LR;
    A o--o B
    B <--> C
    C x--x D
    
    旧连线 --文本--> 也会不同

1
2
3
4
5
6

graph LR;
    A[Start] --> B{"Is it?"}
    B --Yes--> C[OK]
    C --> D[Rethink]
    D --> B
    B --No--> E[End]

1
2

graph LR;
   A -- text --> B -- text2 --> C

1
2
3
4
5
6
7

graph  TB;
   a --> b & c--> d
   A & B--> C & D
    X --> M
    X --> N
    Y --> M
    Y --> N

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

flowchart TB;
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
end

1
2
3
4
5
6

graph LR;
%%这是一条注释，在渲染图中不可见
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

1
2
3
4
5
6
7

graph TB;
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

1
2
3
4
5

pie
    title 为什么总是宅在家里？
    "喜欢宅" : 15
    "天气太热或太冷" : 20
    "穷" : 500

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

1
2
3

sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
    ...

1
2
3

sequenceDiagram
    张三->>李四: 吃了吗？
    李四->>张三: 吃了

1
2
3
4
5

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3

1

activate 参与者

1

Note 位置表述 参与者: 标注文字

1
2
3

loop 循环的条件
    循环体描述语句
end

1
2
3
4
5
6
7

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end

1
2
3

opt 条件描述
    分支描述语句
end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end