Mermaid 是一种用于创建图表和图形的简单文本语法,常用于文档、博客和 Wiki 中。以下是一些常见的 Mermaid 语法示例和基本用法。
1. 基本语法
1.1 流程图
mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Result 1]
B -->|No| D[Result 2]
C --> E[End]
D --> E
1.2 序列图
mermaid
sequenceDiagram
Alice->>+John: Hello John, do you have a minute?
John-->>-Alice: Sure, what do you want?
Alice->>John: I have a question about...
1.3 甘特图
mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2024-01-12 , 12d
another task : 24d
1.4 类图
mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
1.5 状态图
mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Crash
Moving --> Still
1.6 时序图
关键元素 participant: 定义参与者(对象)。 ->>: 表示发送消息(箭头指向接收者)。 -->>: 表示返回消息(箭头指向发送者)。
- 和 -: 用于表示激活和去激活参与者。+ 表示激活,- 表示去激活。
mermaid
sequenceDiagram
participant User
participant Server
participant Database
User->>Server: Request data
Server->>Database: Query data
Database-->>Server: Return data
Server-->>User: Send data
2. 使用 Mermaid
在 Markdown 中使用:许多支持 Markdown 的平台(如 GitHub、GitLab 和一些 Wiki)允许直接嵌入 Mermaid 代码。
在网页中使用:您可以在 HTML 中使用 Mermaid 库来渲染图表。
html
<!DOCTYPE html>
<html>
<head>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
<div class="mermaid">
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Result 1]
B -->|No| D[Result 2]
C --> E[End]
D --> E
</div>
</body>
</html>
3. 总结
Mermaid 提供了一种简单的方式来创建各种类型的图表和图形,适合用于文档和可视化需求。通过以上示例,可以快速上手并创建自己的图表。