V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
wxd3li
V2EX  ›  分享创造

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

  •  
  •   wxd3li · 72 天前 · 1186 次点击
    这是一个创建于 72 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 提供了一种简洁而强大的方法来创建和展示复杂的信息流。

    5 条回复    2024-10-17 12:27:31 +08:00
    Jackyxiaoc
        1
    Jackyxiaoc  
       70 天前
    太需要这种东西了。
    lxwlxc
        2
    lxwlxc  
       70 天前
    这个好
    peko01
        3
    peko01  
       69 天前
    你这个介绍都是用 ai 生成的吧。。。
    GeekGao
        4
    GeekGao  
       69 天前
    已经很好了,也支持中文 https://www.mermaidflow.app/editor
    wxd3li
        5
    wxd3li  
    OP
       66 天前
    @peko01 这倒真的没有
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2917 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 12:59 · PVG 20:59 · LAX 04:59 · JFK 07:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.