跳转到内容
彼岸论坛
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[分享创造] 用文字“画出”流程图:用 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[回程]

内容的显示图
07d7c718d536c91d5fc0df0c7b2988e447655316

Mermaid 语法解释

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

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

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

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

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

在上例中:

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

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

意见的链接
分享到其他网站

加入讨论

您现在可以发表并稍后注册. 如果您是会员,请现在登录来参与讨论.

游客
回复主题...

×   粘贴为富文本.   粘贴为纯文本来代替

  只允许使用75个表情符号.

×   您的链接已自动嵌入.   显示为链接来代替

×   您之前的内容已恢复.   清除编辑器

×   您无法直接粘贴图片.要从网址上传或插入图片.

  • 游客注册

    游客注册

  • 会员

  • 最新的状态更新

    没有最新的状态更新
  • 最近查看

    • 没有会员查看此页面.
×
×
  • 创建新的...