mermaid画图
时间: 2025-05-17 16:05:31 浏览: 142
### Mermaid图表绘制教程及语法示例
#### 安装Mermaid
为了使用Mermaid进行绘图,首先需要确保环境已配置好。可以通过引入Mermaid库到HTML页面来完成安装。以下是基本的HTML设置方法:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mermaid Example</title>
<!-- 引入Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</head>
<body>
<!-- 插入Mermaid图表代码的位置 -->
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
</body>
</html>
```
上述代码展示了如何加载Mermaid并定义一个简单的流程图[^1]。
#### 基础语法介绍
##### 流程图 (Flowchart)
流程图是最常用的Mermaid图表之一,可以用来表示程序逻辑或业务流程。下面是一个简单例子:
```mermaid
graph TB
subgraph 输入模块
start([开始])
input((输入数据))
end
process(处理数据)
output((输出结果))
start --> input
input --> process
process --> output
```
此代码片段创建了一个带有子图结构的流程图,清晰地展示了一种典型的输入-处理-输出模式[^3]。
##### 时序图 (Sequence Diagram)
时序图非常适合描绘对象之间的交互顺序。例如:
```mermaid
sequenceDiagram
participant Alice as 用户
participant Bob as 系统
Note over Alice,Bob: 登录请求发起
Alice->>+Bob: 发送用户名密码
Bob-->>-Alice: 返回登录成功消息
```
这段脚本模拟了用户向系统发送认证信息的过程,并接收反馈的结果。
##### 类图 (Class Diagram)
对于面向对象的设计来说,类图不可或缺。这里有一个小型应用的例子:
```mermaid
classDiagram
Class01 <|-- AveryLongClassName : 这里是关系说明
Class03 *-- "Many" Class04 : 关联描述
Class05 o-- Class06 : 可选关联
Class07 ..> Class08 : 注解连接线
Class09 --* Class10 : 泛化箭头方向
Class11 --|> Class12 : 实现接口指示符
```
以上实例涵盖了继承、组合等多种类型的联系表达方式。
##### Gantt图 (Gantt Chart)
当规划项目时间表时,甘特图非常有用。如下所示:
```mermaid
gantt
title 项目进度计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des_1, 2023-01-06, 2023-01-08
UI设计 :active, des_2, after des_1, 5d
数据库建模 : des_3, after des_2, 3d
section 开发阶段
后端开发 :crit, done, dev_1, 2023-01-09, 2023-01-12
前端开发 :crit, active, dev_2, after dev_1, 5d
```
该样例提供了关于不同任务及其持续时间段的具体安排。
#### 使用场景优势
相比传统的图形编辑工具,Mermaid具有显著的优势——易于版本管理且便于团队协作。由于其基于文本的形式,可以直接嵌入Markdown文档中并通过Git等工具轻松追踪变更历史记录[^4]。
---
阅读全文
相关推荐

















