使用typora的mermaid进行代码画图

简介

mermaid,通过类markdown语法生成常用图形

内嵌于多种常用笔记工具,如notion,typora等,另外,官方也提供了在线编辑器

在typora中,先开启mermaid,即偏好设置->markdown->勾选图表

然后输入````mermaid` 然后回车,就可以编辑生成mermaid图像了

流程图 (Flowchart)

适合表示流程、步骤或决策路径。

flowchart TD
    A[开始] --> B[决策]
    B -->|是| C[操作1]
    B -->|否| D[操作2]
    C --> E[结束]
    D --> E

时序图 (Sequence Diagram)

用于描述参与者之间的交互。

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 前端服务器
    participant 后端服务器
    participant 数据库

    用户->>浏览器: 输入注册信息
    浏览器->>前端服务器: 提交注册表单
    前端服务器->>后端服务器: 发送注册数据
    后端服务器->>数据库: 保存用户信息
    数据库-->>后端服务器: 确认保存成功
    后端服务器-->>前端服务器: 返回注册成功信息
    前端服务器-->>浏览器: 显示注册成功页面
    浏览器-->>用户: 通知注册成功

    用户->>浏览器: 输入登录信息
    浏览器->>前端服务器: 提交登录表单
    front end-->>后端服务器: 转发登录请求
    后端服务器->>数据库: 验证用户信息
    alt 验证成功
        数据库-->>后端服务器: 返回用户信息
        后端服务器-->>前端服务器: 登录成功信息和令牌
        前端服务器-->>浏览器: 显示登录成功
        浏览器-->>用户: 登录成功页面
    else 验证失败
        数据库-->>后端服务器: 验证失败
        后端服务器-->>前端服务器: 登录失败信息
        前端服务器-->>浏览器: 显示登录失败
        浏览器-->>用户: 登录失败提示
    end

类图 (Class Diagram)

适合用于表示类的结构和关系。

classDiagram
    class 动物 {
        +吃()
        +睡觉()
    }
    class 狗 {
        +汪汪()
    }
    动物 <|-- 狗

状态图 (State Diagram)

用来描述状态和状态之间的转移。

stateDiagram
    [*] --> 空闲
    空闲 --> 工作中 : 接收任务
    工作中 --> 空闲 : 任务完成
    工作中 --> [*] : 停止

甘特图 (Gantt Chart)

适合用于项目计划和时间管理。

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 计划
    任务1 :done, des1, 2024-11-01, 3d
    任务2 :active, des2, 2024-11-04, 5d
    任务3 : des3, 2024-11-10, 7d

饼图 (Pie Chart)

用于展示数据的比例。

pie
    title 市场份额
    "苹果": 40
    "三星": 30
    "华为": 20
    "其他": 10