mermaid流程图工具_mermaid制图工具

设置

在NexT主题下，需要进入NexT主题配置_config.yml搜索mermaid并且打开功能开关

相关mermaid文件位于\themes\next\layout\_third-party\tags

mermaid theme位于

在Markdown的Fontmatter中加入mermaid: true

入门

最简单的流程图

1

2

3

4

5graph TD;

A-->B;

A-->C;

B-->D;

C-->D;

graph TD;

A-->B;

A-->C;

B-->D;

C-->D;

最简单顺序图

1

2

3

4

5

6

7

8

9

10

11sequenceDiagram

participant Alice

participant Bob

Alice->>John: Hello Jogn, how are you?

loop Healthcheck

John->>John: Fight against hypochondria

end

Note right of John: Rational thoughts
prevail...

John-->>Alice: Great!

John->>Bob:How about you?

Bob-->>John: Jolly good!

sequenceDiagram

participant Alice

participant Bob

Alice->>John: Hello Jogn, how are you?

loop Healthcheck

John->>John: Fight against hypochondria

end

Note right of John: Rational thoughts

prevail...

John-->>Alice: Great!

John->>Bob:How about you?

Bob-->>John: Jolly good!

最简单的甘特图

1

2

3

4

5

6

7

8

9

10gantt

dateFormat YYYY-MM-DD

title Adding GANTT diagram to mermaid

excludes weekda