Markdown绘制各种图形———Mermaid语法
Markdown 绘制各种图形———Mermaind语法
Mermaind 是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。主要目的是创建易于修改的图标来节省开发者宝贵的时间，帮助文档跟上开发的步伐。
Mermaind 语法跟 Markdown 类似，易于学习，用户可快速掌握。
安装
博客园支持Mermaind，所以不用安装便可使用。
VsCode 需要下载 Mermaind 插件，在插件管理中搜索 Markdown Preview Mermaid Support ， 安装即可。
使用
编写Markdown文档时，使用代码块``````，添加上mermaid标签,即可将代码块渲染成图像.
语法
类图
"在软件工程中，统一建模语言（UML）中的类图是一种静态结构图，它通过显示系统的类、它们的属性、操作（或方法）以及对象之间的关系来描述系统的结构。"
-Wikipedia
类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素，应用程序中的交互以及要编程的类。
缺点是大了些
语法
类
UML 提供了表示类成员（例如属性和方法）以及有关它们的附加信息的机制。图中类的单个实例包含三个部分：
-
顶部隔间包含类的名称。它以粗体居中打印，第一个字母大写。它还可能包含描述类性质的可选注释文本。
-
中间的部分包含类的属性。它们左对齐且第一个字母小写。
-
底部隔间包含该类可以执行的操作。它们也是左对齐的，并且第一个字母是小写的。
---
title: Bank example
---
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
定义一个类
定义类有两种方法：
-
显式使用关键字 class（如 class Animal）来定义 Animal 类。
-
通过一次定义两个类及其关系的关系。例如，Vehicle <|-- Car。
classDiagram
class Animal
Vehicle <|-- Car
命名约定：类名只能由字母数字字符（包括 unicode）、下划线和短划线 (-) 组成。
UML 提供了表示类成员（例如属性和方法）的机制，以及有关它们的附加信息。
Mermaid 根据括号 () 是否存在来区分属性和函数/方法。带有 () 的被视为函数/方法，所有其他被视为属性。
类的成员:
有两种方法可以定义类的成员，无论使用哪种语法来定义成员，输出仍然是相同的。两种不同的方式是：
- 使用 :（冒号）后跟成员名称来关联类的成员，这对于一次定义一个成员很有用。
- 使用 {} 括号关联类的成员，其中成员分组在大括号内。适合一次定义多个成员。
代码:
classDiagram
class Car
Car: -String type
Car: +void run(int speed)
class Animal{
- String name
+ run()
}
在```添上mermaid进行渲染得:
可见度:
为了描述属于类（即类成员）的属性或方法/函数的可见性（或封装），可以在该成员名称之前放置可选的符号：
-
+ 公共的
-
- 私有的
-
# 受保护的
-
~ 封装/内部的
请注意，你还可以通过在方法末尾添加以下符号来在方法定义中包含其他分类器，即：在 () 或返回类型之后：
- 摘要例如：someAbstractMethod()* 或 someAbstractMethod() int*
$ 静态例如：someStaticMethod()$ 或 someStaticMethod() String$
请注意，你还可以通过在末尾添加以下符号来在字段定义中包含其他分类器：
- $ 静态例如：String someField$
定义关系
目前支持的 UML 下为类定义了八种不同类型的关系：
| 类型 | 描述 |
|---|---|
| <|-- | 继承 |
| *-- | 作品 |
| o-- | 聚合 |
| --> | 关联 |
| -- | 链接（实心） |
| ..> | 依赖 |
| ..|> | 实现 |
代码：
classDiagram
A1 <|-- B1
B1 --|> C1
A2 *-- B2
B2 --* C2
A3 o-- B3
B3--o C3
A4 <-- B4
B4--> C4
A5 -- B5
B5-- C5
A6 <.. B6
B6..> C6
A7 <|.. B7
B7 ..|> C7
A8 .. B8
B8 .. C8
思维导图
“思维导图是一种图表，用于将信息直观地组织成层次结构，显示整体各个部分之间的关系。它通常是围绕一个概念创建的，在空白页面的中心绘制为图片，并在其中添加相关的想法表示，例如图片、单词和单词的一部分。主要思想与中心概念直接相关，而其他思想则从这些主要思想中分支出来。”
维基百科
思维导图的一个例子。
代码:
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
语法
创建思维导图的语法很简单，并且依赖于缩进来设置层次结构中的级别。
在下面的示例中，你可以看到有 3 个不同的级别。一层从文本左侧开始，另一层有两行从同一列开始，定义节点 A。最后还有一层，其中文本比定义节点 B 和 C 的前一行进一步缩进。
mindmap
Root
A
B
C
总之，这是一个简单的文本大纲，其中根级别有一个名为 Root 的节点，它有一个子节点 A。A 又有两个子级 B 和 C。在下图中，我们可以看到它渲染为思维导图。
代码:
mindmap
Root
A
B
C
这样我们就可以利用文本大纲来生成层次思维导图。
不同的形状
Mermaid 思维导图可以使用不同形状显示节点。为节点指定形状时，语法与流程图节点类似，其中 id 后跟形状定义，并在形状分隔符内包含文本。在可能的情况下，我们尝试/将尝试保持与流程图相同的形状，即使它们从一开始就不受支持。
思维导图可以显示以下形状：
正方形
代码:
mindmap
id[I am a square]
圆角方形
代码:
mindmap
id(I am a rounded square)
圆圈
代码:
mindmap
id((I am a circle))
砰:
代码:
mermaid
mindmap
id))I am a bang((
云
代码:
mindmap
id)I am a cloud(
六边形
代码:
mindmap
id{{I am a hexagon}}
默认
代码:
mindmap
I am the dedault shape
将添加更多形状，从流程图中可用的形状开始。
图标和类
图标
与流程图一样，你可以将图标添加到节点，但使用更新的语法。
基于字体的图标的样式是在集成过程中添加的，以便它们可用于网页。这不是图表作者可以做的事情，而是必须与站点管理员或集成商一起完成。
图标字体就位后，你可以使用 ::icon() 语法将它们添加到思维导图节点。你可以将图标的类放在括号内，如下例所示，其中显示了 Material Design 和 Font Awesome 5 的图标。目的是这种方法应用于所有支持图标的图表。实验特点：这种更广泛的范围也是思维导图处于实验阶段的原因，因为这种语法和方法可能会改变。
代码:
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
类
同样，添加类的语法与流程图类似。你可以使用三个冒号添加类，后面是多个由空格分隔的 css 类。在以下示例中，其中一个节点附加了两个自定义类，紧急将背景变为红色，将文本变为白色并增大字体大小：
代码:
mindmap
Root
A[A]
:::urgent large
B(B)
C
这些类需要由站点管理员提供。
压痕不清晰
仅与前面的行相比，实际的缩进并不重要。如果我们把前面的例子稍微破坏一下，我们就可以看到计算是如何执行的。让我们首先将 C 放置为比 B 更小的缩进，但比 A 更大的缩进。
该轮廓不清楚，因为 B 显然是 A 的子级，但当我们继续讨论 C 时，清晰度就消失了。C 不是具有更高缩进的 B 的子代，也不具有与 B 相同的缩进。唯一清楚的是，第一个缩进较小的节点（表示父节点）是 A。然后 Mermaid 依靠这个已知的事实并补偿不清楚的缩进并选择 A 作为 C 的父代，直到与 B 和 C 作为兄弟姐妹的相同图。
代码:
Markdown 字符串
"Markdown 字符串" 功能通过提供更通用的字符串类型来增强思维导图，该类型支持粗体和斜体等文本格式选项，并自动将文本换行在标签内。
代码:
mindmap
id1["`**Root** with
a second line
Unicode works too: 🤓`"]
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
id3[Regular labels still works]
格式设置：
对于粗体文本，请在文本前后使用双星号 **。
对于斜体，请在文本前后使用单个星号 *。
对于传统字符串，你需要添加
标签以使文本换行在节点中。但是，当文本变得太长时，Markdown 字符串会自动换行，并允许你只需使用换行符而不是
标记来开始新行。
流程图
流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid 代码定义了如何制作节点和边，并适应不同的箭头类型、多方向箭头以及任何与子图的链接。
一个节点（默认）
代码:
---
title: Note
---
flowchart LR
id
统一码文本:
使用 " 将 unicode 文本括起来
flowchart LR
id["This ❤ Unicode"]
方向
该语句声明了流程图的方向。
这声明流程图是从上到下（TD 或 TB）的。
flowchart LR
Start --> Stop
其他
基本饼图
代码:
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
代码:
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
基本序列图
代码:
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
基本流程图
代码:
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
带有一些样式的更大流程图:
代码:
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
序列图：循环、alt 和 opt
代码:
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
序列图：循环中给自己的消息
代码:
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!
序列图：博客应用服务通信
代码:
sequenceDiagram
participant web as Web Browser
participant blog as Blog Service
participant account as Account Service
participant mail as Mail Service
participant db as Storage
Note over web,db: The user must be logged in to submit blog posts
web->>+account: Logs in using credentials
account->>db: Query stored accounts
db->>account: Respond with query result
alt Credentials not found
account->>web: Invalid credentials
else Credentials found
account->>-web: Successfully logged in
Note over web,db: When the user is authenticated, they can now submit new posts
web->>+blog: Submit new post
blog->>db: Store post data
par Notifications
blog--)mail: Send mail to blog subscribers
blog--)db: Store in-site notifications
and Response
blog-->>-web: Successfully posted
end
end
提交流程图
代码:
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
浙公网安备 33010602011771号