用文字“画出”流程图:用 AI+Mermaid.js 构建出你心中的可视化世界
Mermaid介绍
首先,什么是 Mermaid?
Mermaid.js 是一款开源 流程图/序列图 的文本制作工具,
它允许你使用简单的文本语法来创建各种类型的图表。
无论你是开发者、学生还是普通用户,
Mermaid.js 都能帮助你将复杂的信息以直观、易懂的方式呈现出来。
在AI技术的加持下,Mermaid 现已支持把用户内容自动转成对应的文本语法, 从而达到自动生成流程图的目地。
这不仅提高了工作效率,还使非专业用户也能轻松创建复杂的图表。
访问 中文Mermaid 体验 AI + Mermaid.js,构建出你心中的可视化世界。
Mermaid示例
文本内容
flowchart TD
A[开始] --> B[打开任意门]
B --> C{选择目的地}
C --> D[金字塔]
C --> E[兵马俑]
D --> F[解锁谜题]
E --> G[探索迷宫]
F --> H[回程]
G --> H[回程]
内容的显示图
flowchart TD
A[开始] --> B[打开任意门]
B --> C{选择目的地}
C --> D[金字塔]
C --> E[兵马俑]
D --> F[解锁谜题]
E --> G[探索迷宫]
F --> H[回程]
G --> H[回程]
Mermaid语法解释
第1行:图表类型与显示方向
- 图表类型:使用 flowchart 来声明图表的类型为:流程图。
- 显示方向:
- TB:从上到下
- BT:从下到上
- LR:从左往右
- RL:从右往左
从第2行起,描述各个节点及其连接关系:
- 节点定义:
- id[文字描述]:矩形节点
- id(文字描述):圆角矩形节点
- id{文字描述}:菱形节点
- 连接线定义:
- 实线连接:
---
- 虚线连接:
-.-
- 带箭头的连接:
-->
- 实线连接:
每一行的描述方式为:起始节点+连接线+目标节点
在上例中:
- A 是流程的起点。
- B 是打开任意门的步骤。
- C 是一个判断节点,决定选择的目的地。
- D 和 E 分别表示金字塔和兵马俑。
最终,所有路径都汇聚到 H,表示流程结束。
通过这种方式,Mermaid.js 提供了一种简洁而强大的方法来创建和展示复杂的信息流。