用文字“画出”流程图：用 AI+Mermaid.js 构建出你心中的可视化世界

[wxd3li]

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[回程]

内容的显示图

Mermaid 语法解释

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

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

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

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

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

在上例中：

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

通过这种方式，Mermaid.js 提供了一种简洁而强大的方法来创建和展示复杂的信息流。

[Jackyxiaoc]

太需要这种东西了。

[lxwlxc]

这个好

[peko01]

你这个介绍都是用 ai 生成的吧。。。

[R4rvZ6agNVWr56V0]

已经很好了，也支持中文 https://www.mermaidflow.app/editor

[wxd3li]

@peko01 这倒真的没有

[nnn2233]

同类产品： https://www.mermaidonline.live/editor

[mmmao]

想问一下 op 有遇到过 drawio 的开发模式少了个 [mermaid2drawio.js] 的文件吗

[guiheng]

https://www.mermaidkit.com/ 也可以尝试用一下，效果还可以，不用记忆复杂的 Mermaid 语法了