+

Markdown图标实现示例代码

Posted by 咕🎨 on 2023-08-10
Words 351 and Reading Time 1 Minutes
Viewed Times

📐 图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
graph TD;
User["User or application"]-->IPNS["@helia/ipns"];
User-->UnixFS["@helia/unixfs"];
User-->Libp2p;
User-->Datastore;
User-->Blockstore;
UnixFS-->Blockstore;
IPNS-->Datastore;
subgraph helia [Helia]
Datastore
Blockstore-->Bitswap;
Libp2p-->DHT;
Libp2p-->PubSub;
Libp2p-->IPNI;
Libp2p-->Reframe;
end
Blockstore-->BlockStorage["File system/IDB/S3/etc"]
Datastore-->DataStorage["Level/S3/IDB/etc"]
Bitswap-->Network;
DHT-->Network;
PubSub-->Network;
IPNI-->Network;
Reframe-->Network;

Flowchart(流程图)

1
2
3
4
5
6
7
8
9
graph TD;
A-->B;
A-->C;
A-->D;
M;
B-->F;
B-->G;
G-->F
C-->H;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
graph LR;
a==>b;
b-->c;
a--联系-->c;
a-->s;
a-.->f;
s-->j;
c---id2;

subgraph 图表名;
id2[默认方形]==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
end

Sequence diagram(顺序图)

1
2
3
4
5
6
7
8
9
10
11
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

甘特图(Gantt diagram)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gantt
dateFormat YYYY-MM-DD
title 为mermaid加入甘特图功能
section A部分
完成任务 :done, des1,2019-01-06,2019-01-08
正进行任务 :active, des2,2019-01-09,3d
待开始任务 :des3, after des2, 5d
待开始任务2 :des4, after des3, 5d
section 紧急任务
完成任务 :crit,done,2019-01-06,24h
实现parser :crit,done,after des1, 2d
为parser编写test :crit, active, 3d
待完成任务 :crit,5d
为rendere编写test: 2d
将功能加入到mermaid: 1d


...

...

00:00
00:00