mermaid使用教程

编辑搜图

请点击输入图片描述（最多18字）

一、mermaid是什么？

mermaid是一款作图工具，能在markdown文档中使用。它语法简单，支持在markdown文档中动态创建和修改图表

二、vscode如何支持mermaid

第一步、vscode支持markdown

编辑搜图

请点击输入图片描述（最多18字）

第二步、vscode支持mermaid

编辑搜图

请点击输入图片描述（最多18字）

三、 mermaid绘制流程图

编辑搜图

```

graph TD;

   A-->B;

   A-->C;

   B-->D;

   C-->D;

```

四、mermaid绘制时序图

编辑搜图

```mermaid

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!

```

五 、mermaid绘制类图

例子1

编辑搜图

```mermaid

classDiagram

direction RL

class Human {

+Head head;

+List<Hand> hands;

+List<Occupation> occupations;

}

class Hand {

}

class Eye {

+String color;

}

class Head {

+List<Eye> eyes;

}

class Clothes {

+string color

}

class Occupation {

+string name;

}

%% Human组合Head

Human *-- "1" Head

%% Human组合Hand

Human *-- "2" Hand

%% Human关联Occupation

Human --> "1..*" Occupation

%% Human聚合Clothes

Human o-- "0..*" Clothes : 人拥有多件衣服

%% Head组合使用Eye

Head *-- "2" Eye

```

例子2

编辑搜图

```mermaid

classDiagram

direction TB

class Shape {

<<interface>>

+draw()

}

%% Rect和Circle继承Shape

Shape <|-- Rect

Shape <|-- Circle

class Rect {

+draw()

}

class Circle {

+draw()

}

class Painter {

+addShape(Shape shape, Position pos)

+setColor(Color color)

+paint()

}

%% Painter聚合引用Shape

Painter "1" o--> "0..*" Shape : 管理

%% Painter依赖Color枚举

Painter ..> Color

class Color {

<<enumeration>>

RED

BLUE

GREEN

WHITE

BLACK

}

```

六、 总结

mermaid语法简单，容易上手，我们在日常开发中已经用上它啦，讨论设计的时候也可以同步编辑，极大提高了沟通的效率。mermaid还有很多很酷炫的功能值得我们去挖掘，贴一个mermaid官网的链接收尾

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

Thanks for reading!