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)

相关推荐
mxwin18 天前
次世代角色 PBR 贴图制作 + Unity URP 接入 极简流程图
unity·流程图·贴图·shader
lipengxs23 天前
PlantUML、Mermaid、SQL ER、OpenAPI 在线预览工具整理
ai·编辑器·流程图·uml
程思扬25 天前
Android 大厂编码规范
android·网络·安全·开源·流程图
相忘于江湖4265431 个月前
【deepseek + draw.io 】生成流程图
流程图·draw.io
blue_dou1 个月前
架构与能力边界解析:七款CRM产品四大核心维度对比测评
大数据·架构·逻辑回归·流程图
zincsweet1 个月前
Linux 命名管道(FIFO)详解:原理分析、源码封装与通信流程图解
linux·服务器·c++·流程图
优思学苑1 个月前
价值流程图:看到流程,而不只是步骤【精益管理CLMP】
流程图
bug总结1 个月前
前端流程图vueflow
前端·流程图
米饭不加菜1 个月前
Mermaid 流程图语法参考四
流程图
米饭不加菜1 个月前
Mermaid 流程图语法参考三
流程图