Markdown之Mermaid流程图

一:简介

随着AI的兴起,Markdown是一种重要的载体用于AI的输入和输出,对于Markdown中支持的图标语法我们要能达到看的懂。

1.1 什么是 Mermaid?

Mermaid 是一个基于 JavaScript 的图表绘制工具,可以通过简单的文本语法创建各种图表,直接在 Markdown 中渲染。

1.2 优点

  • 纯文本 - 易于版本控制
  • 跨平台 - 大多数 Markdown 平台都支持
  • 易维护 - 修改方便
  • 可读性强 - 即使不看渲染结果也能理解

1.3 基本用法

在 Markdown 中使用 Mermaid,需要用 mermaid 代码块,%%表示注释,使用A、B、C、...来给每个节点起标识符ID,节点的形状是由后面的图形表示的,如 { } 表示判断, 表示方形节点,( )表示圆角方形,(( )) 表示正圆形, | | 表示条件值。

复制代码
	```mermaid
	graph TD
		%% 这是一条注释
	    A[开始] --> B{判断}
	    B -->|是| C[执行操作]
	    B -->|否| D[结束]
    ```

1.3.1 流程图方向

T(Top) 、B(Bottom)、L(Left)、R(Right):

  • graph TD - 从上到下
  • graph LR - 从左到右
  • graph RL - 从右到左
  • graph BT - 从下到上

1.3.2 节点形状

:长方形、( ) :圆角长方形、(( )):正圆、{ }:判断、/ /:平行四边形、\\ :反平行四边形

复制代码
	```mermaid
	graph LR
	    A[方形]
	    B(圆角方形)
	    C((圆形))
	    D{菱形}
	    E[/平行四边形/]
	    F[\反平行四边形\]
    ```

1.3.3 连接线样式

--> 表示实线实心箭头。
-.-> 表示虚线实心箭头。

复制代码
	```mermaid
	graph LR
	   %% 创建示例节点
	    A[起点] --> B[终点]
	    
	    %% 创建其他示例节点对
	    C[起点] --- D[终点]
	    E[起点] -.-> F[终点]
	    G[起点] ==> H[终点]
	    I[起点] -- 文本 --> J[终点]
	    K[起点] -->|文本| L[终点]
    ```

二:支持的图表类型

1. 流程图 (Flowchart)

复制代码
	```mermaid
	graph TD
    A[起床] --> B{是否周末?}
    B -->|是| C[继续睡觉]
    B -->|否| D[去上班]
    D --> E[工作]
    ```

2. 时序图 (Sequence Diagram)

复制代码
	```mermaid
	sequenceDiagram
    participant 用户
    participant 服务器
    participant 数据库
    
    用户->>服务器: 登录请求
    服务器->>数据库: 验证用户
    数据库-->>服务器: 验证结果
    服务器-->>用户: 登录成功
    ```

3. 状态图 (State Diagram)

复制代码
	```mermaid
	stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 暂停: 暂停按钮
    暂停 --> 运行: 继续按钮
    运行 --> 待机: 停止
    暂停 --> 待机: 停止
    ```

4. 类图 (Class Diagram)

复制代码
	```mermaid
	classDiagram
    class Animal {
        +String name
        +void eat()
        +void sleep()
    }
    class Dog {
        +void bark()
    }
    class Cat {
        +void meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    ```

5. 饼图 (Pie Chart)

6. 甘特图 (Gantt Chart)

相关推荐
斯普信专业组6 小时前
Kafka 消费者 poll() 流程与原理详解
kafka·流程图
学IT的周星星6 天前
LangGraph:用「流程图」的方式编排 Agent
数据库·人工智能·大模型·llm·流程图·agent
钛生智能6 天前
OA 流程定制全参数详解(十):画流程图与美化——从“能跑”到“好看”的最后一公里
流程图·办公自动化·oa·协同办公·oa办公系统
ixiaoyang810 天前
ioDraw v3.7.0 发布:AI 助手完成会话化改造,图表生成一次升级
ai·流程图·甘特图·思维导图·绘图软件·1024程序员节·mermaid
神色自若10 天前
Net10 Avalonia UI漂亮美观的流程图设计器重磅开源了
流程图
Keith Guo10 天前
ESP32-S31 分区表的访问流程图
流程图·esp32
学术 学术 Fun17 天前
AI 流程图图片怎样变成可编辑文件?先修文字,再核对逻辑
流程图
学术 学术 Fun18 天前
截图转可编辑 PPT:旧流程图改步骤,不再靠白色方块遮字
powerpoint·流程图
tedcloud12319 天前
Docker Compose 部署 Immich:手机照片自动备份与常见故障排查
运维·前端·docker·容器·智能手机·开源·流程图
weixin_4166600721 天前
AI 生成的 Mermaid 流程图和 LaTeX 公式,怎么一起导出到 Word?
人工智能·word·流程图·豆包