1分钟快速掌握Mermaid（入门）

AIcoding>AI工具>画图
1.6k words

1分钟快速掌握 Mermaid

图表代码化 | 文档可视化神器

一、核心价值

  1. 三大优势

    • 代码即图表：用纯文本编写图表，告别拖拽排版

    • 版本友好：代码可git管理，轻松追踪图表变更历史

    • 多场景适用：流程图、时序图、甘特图等一键生成

      比喻：Mermaid=图表界的Markdown，拖拽工具=手动排版Word

二、快速开始

  1. 环境准备

    • 在线编辑器：mermaid.live（开箱即用）
    • 本地文档：VS Code安装 Mermaid插件 或 Typora原生支持
    • 网页集成：引入<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

  2. 基础语法结构

    image-20251027122505799

    1
    2
    3
    4
    graph LR
    A[开始] --> B{判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]

    只需在代码块标记mermaid即可解析

三、常用图表速成

  1. 流程图（Flowchart）

    image-20251027122519250

    代码：

    1
    2
    3
    4
    graph TD
    起床-->刷牙
    刷牙-->吃早餐
    吃早餐-->上班

  2. 时序图（Sequence Diagram）

    image-20251027122530773

    代码：

    1
    2
    3
    4
    5
    sequenceDiagram
    用户->>系统: 登录请求
    系统->>数据库: 验证账号
    数据库-->>系统: 返回结果
    系统-->>用户: 欢迎页面

  3. 饼图（Pie Chart）

    image-20251027122540600

    代码：

    1
    2
    3
    4
    5
    pie title 工作日时间分配
    "写代码" : 6
    "开会" : 2
    "摸鱼" : 1
    "学习" : 1

  4. 类图（Class Diagram）

    image-20251027132027552

    代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    classDiagram
    class User {
      -String username
      -String email
      +login()
      +logout()
    }
    class Admin {
      +manageUsers()
    }
    User <|-- Admin

四、实用技巧

  1. 样式美化

    image-20251027122553418

    1
    2
    3
    4
    5
    6
    graph LR
    A[默认矩形] --> B(圆角矩形)
    B --> C{{菱形判断}}
    C --> D[红色矩形]
    classDef red fill:#f96
    class D red

  2. 子图分组

    image-20251027122815620

    1
    2
    3
    4
    5
    6
    7
    8
    graph TB
    subgraph 前端模块
    A1[HTML结构] --> A2[CSS样式]
    end
    subgraph 后端模块
    B1[Java逻辑] --> B2[数据库]
    end
    A2 --> B1

五、进阶场景

  1. 甘特图管理项目

    image-20251027122631238

    1
    2
    3
    4
    5
    6
    7
    8
    gantt
    title 项目时间线
    section 设计
    需求分析 :a1, 2024-06-01, 7d
    UI设计 :a2, after a1, 5d
    section 开发
    前端开发 :b1, after a2, 10d
    后端联调 :b2, after b1, 7d

  2. 状态图（State Diagram）

    image-20251027132158288

    1
    2
    3
    4
    5
    6
    7
    stateDiagram-v2
    [*] --> 待机
    待机 --> 运行 : 启动命令
    运行 --> 暂停 : 暂停命令
    暂停 --> 运行 : 继续命令
    运行 --> 待机 : 停止命令
    待机 --> [*]

  3. Git分支可视化

    image-20251027122637743

    1
    2
    3
    4
    5
    6
    7
    gitGraph
    commit
    branch feature
    checkout feature
    commit
    checkout main
    merge feature

六、学习建议

  1. 必会图表清单
    • 流程图（graph TD/LR）
    • 时序图（sequenceDiagram）
    • 饼图（pie）
    • 类图（classDiagram）
  2. 推荐资源

附：通用创作流程

1
确定图表类型 → 编写mermaid代码 → 预览调整 → 嵌入文档/网页

掌握以上四种图表，可应对90%的可视化需求！