# Mermaid 介绍  
首先,什么是 Mermaid?  
Mermaid.js 是一款开源 **流程图/序列图** 的制作工具,  
它允许你使用简单的文本语法来创建各种类型的图表。  

无论你是开发者、学生还是普通用户,  
Mermaid.js 都能帮助你将复杂的信息以直观、易懂的方式呈现出来。  

在 AI 技术的加持下,Mermaid 现已支持把用户内容自动转成对应的文本语法,  从而达到自动生成流程图的目地。  
这不仅提高了工作效率,还使非专业用户也能轻松创建复杂的图表。  

访问 [ [中文 Mermaid ] ]( https://www.min2k.com/tools/mermaid/) 体验 AI + Mermaid.js ,构建出你心中的可视化世界。  

---

# Mermaid 示例
文本内容
```text
flowchart TD
    A[开始] --> B[打开任意门]
    B --> C{选择目的地}
    C --> D[金字塔]
    C --> E[兵马俑]
    D --> F[解锁谜题]
    E --> G[探索迷宫]
    F --> H[回程]
    G --> H[回程]
```
内容的显示图  
![]( https://i0.hdslb.com/bfs/new_dyn/07d7c718d536c91d5fc0df0c7b2988e4476553164.png)

# Mermaid 语法解释  

第 1 行:图表类型与显示方向  

- 图表类型:使用 flowchart 来声明图表的类型为:**流程图**。
- 显示方向:
  - TB:从上到下
  - BT:从下到上
  - LR:从左往右
  - RL:从右往左

从第 2 行起,描述各个节点及其连接关系:

- 节点定义:
  - id[文字描述]:矩形节点
  - id(文字描述):圆角矩形节点
  - id{文字描述}:菱形节点
- 连接线定义:
  - 实线连接:`---`
  - 虚线连接:`-.-`
  - 带箭头的连接:`-->`

每一行的描述方式为:起始节点+连接线+目标节点

在上例中:  
- A 是流程的起点。
- B 是打开任意门的步骤。
- C 是一个判断节点,决定选择的目的地。
- D 和 E 分别表示金字塔和兵马俑。最终,所有路径都汇聚到 H ,表示流程结束。

通过这种方式,Mermaid.js 提供了一种简洁而强大的方法来创建和展示复杂的信息流。
举报· 54 次点击
登录 注册 站外分享
1 条回复  
Jackyxiaoc 小成 2024-10-13 00:17:51
太需要这种东西了。
返回顶部