Mermaid语法绘制图表

Just_Paranoid

已于 2023-05-23 14:04:26 修改

阅读量4.3k

点赞数

分类专栏：技术流Clip 文章标签： mermaid markdown

于 2021-09-29 17:59:41 首次发布

本文链接：https://blog.csdn.net/weixin_44008788/article/details/120553325

版权

技术流Clip 专栏收录该内容

63 篇文章

订阅专栏

Mermaid是一款强大的Markdown图表生成库，支持创建流程图、时序图、甘特图等多种图表。通过简单易懂的脚本语言，你可以轻松地在文档中插入这些图表，例如，`graph TD`用于创建流程图，`sequenceDiagram`定义时序图，`gantt`声明甘特图。此外，Mermaid还支持类图、用户旅程图等，为技术文档和项目管理提供了便利的视觉呈现工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Typora 在画图方面的小技巧Mermaid，Mermaid是一种简单的类似 Markdown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片，支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等。

Mermaid
https://mermaid-js.github.io/mermaid/#/

Github
https://github.com/mermaid-js/mermaid

Mermaid Live Editor
https://mermaid-js.github.io/mermaid-live-editor/

画图示例

输入 ```mermaid然后敲击回车，即可初始化一张空白图

流程图 Flowchart

graph 关键字就是声明流程图，TD表示竖向(Top-Down)，LR表示横向(Left-Right)，[]方形，()圆角，{}条件

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

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

时序图 Sequence diagram

sequenceDiagram声明时序图，->> 代表实线箭头，-->> 则代表虚线

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

gantt声明甘特图，甘特图一般用来表示项目的计划排期，目前在工作中经常会用到，语法：从上到下依次是图片标题、日期格式、项目、项目细分的任务

gantt
	dateFormat  YYYY-MM-DD
	title Adding GANTT diagram 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

类图 Class diagram

classDiagram声明类图，<|-- 表示继承，+ 表示 public，- 表示 private

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

饼图 Pie

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

实体关系图 Entity Relationship Diagram

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

用户旅程图 User Journey Diagram

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: 5: Me