Markdown-mermaid语法

long7066

已于 2022-07-15 23:13:20 修改

阅读量1.9k

点赞数

文章标签： markdown

于 2021-08-08 23:15:25 首次发布

本文链接：https://blog.csdn.net/ftswsfb/article/details/119523080

版权

基础知识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Mermaid是一个强大的图表生成库，支持Markdown语法，使得在Typora等编辑器中创建流程图、时序图、状态图和类图变得简单。例如，流程图用于展示步骤流程，时序图用于表示交互顺序，状态图描述对象状态变化，而类图则用于表示类之间的关系。通过Mermaid的简洁语法，可以轻松实现各种图表的可视化，提高文档的可读性。

摘要由CSDN通过智能技术生成

Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。对于支持Mermaid语法的Markdown编辑器（Typora），可以实现使用文本和代码方便的实现图表创建及可视化效果。使用时需要使用"mermaid"作为代码块的语言标识。

Mermaid语法文档：About Mermaid (mermaid-js.github.io)

一、流程图（Flowchart）

示例

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

二、时序图（Sequence diagram）

示例

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!

三、状态图（State diagrams）

示例

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

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

四、类图（Class diagram）

示例

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

五、甘特图（Gantt diagram）

示例

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

六、饼图（Pie chart）

示例

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

七、Git图（Git graph）

示例

gitGraph:
options
{
    "nodeSpacing": 20,
    "nodeRadius": 5
}
end
commit
branch newbranch
branch branch1
branch branch2
checkout newbranch
commit
commit
checkout branch1
commit
commit
checkout master
commit
commit
merge newbranch