Mermaid介绍

Mermaid 是一个开源的 JavaScript 库，它允许你用纯文本代码的方式编写流程图、时序图、架构图等各类图表，然后在网页上自动渲染成可视化的图形。

简单来说：

• 你不用手动拖拽画图（比如用 Visio、ProcessOn），只需要写几行类似你之前看到的 graph TD 这种文本代码；
• Mermaid 会解析这些代码，在浏览器里生成美观、规范的图表；
• 它的核心优势是 “代码即图表”，方便版本控制（比如 Git）、批量修改，也能轻松嵌入网页（包括 WordPress）。

Mermaid在线编辑

https://mermaid.live

Mermaid语法与格式

流程图是你最常用的类型，核心结构是：图表方向 + 节点定义 + 连线定义。

1. 第一步：指定图表方向

2. 第二步：定义节点（核心）

节点是流程图中的 “方框 / 圆框”，支持多种样式，常用的有：

3. 第三步：定义连线（核心）

连线是节点之间的箭头，支持加说明文本、调整样式：

基础案例

格式注意需要类似yaml一样。建议保持2个空格，不得使用tab。

流程图

建议：文字内容被引号包起来比较合适。比如『返回结果(Json)』 因为括号被转义了，就无法展示了。建议双引号包起来。或者使用中文括号。返回结果（Json）

flowchart TD
    A[用户点击按钮] --> B[源头系统请求后端]
    B --> C[后端验证参数]
    C --> D["返回结果 (Json)"]
    D --> E[跳转前端地址]

时序图

sequenceDiagram
    participant 用户
    participant 源头系统
    participant 目标后端系统
    participant 目标前端系统

    用户->>源头系统: 点击跳转按钮
    源头系统->>目标后端系统: 请求目标后端(args, operationId)
    目标后端系统->>目标后端系统: 处理参数与验证
    目标后端系统-->>源头系统: 返回结果(JSON)
    目标后端系统-->>用户: 跳转目标前端地址
    用户->>目标前端系统: 打开前端页面并附 operationId
    目标前端系统->>目标后端系统: 授权处理

甘特图（Gantt Chart）

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    原型设计 :active, des1, 2024-06-01, 4d
    UI定稿    :des2, after des1, 3d
    section 开发阶段
    后端开发  :dev1, after des2, 10d
    前端开发  :dev2, after dev1, 7d
    section 测试阶段
    联调测试  :test1, after dev2, 5d

状态图（State Diagram）

stateDiagram-v2
    [*] --> 等待跳转
    等待跳转 --> 请求后端 : 用户点击
    请求后端 --> 返回前端 : 获得结果
    返回前端 --> [*]

网页嵌入 Mermaid - WordPress嵌入

引入Html模块，放入如下内容即可！

<!-- 引入 Mermaid 官方 CDN 库 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

<!-- 初始化 Mermaid 配置 -->
<script>
mermaid.initialize({
  startOnLoad: true,
  theme: 'default' // 可选：dark、forest、neutral 等主题
});
</script>

<!-- 你的流程图容器 -->
<div class="mermaid">
graph TD
    A[Producer 生产者] -->|1. 建立 Connection| B[Broker]
    B -->|2. 创建 Channel| C[Channel]
    A -->|3. 发布消息到 Exchange| D[Exchange]
    D -->|4. 根据 Binding & Routing Key 路由| E[Queue]
    E -->|5. 消息入队，状态: Ready| E
    F[Consumer 消费者] -->|6. 建立 Connection| B
    B -->|7. 创建 Channel| G[Channel]
    F -->|8. 订阅/拉取队列| E
    E -->|9. 投递消息到 Consumer，状态: Unacked| F
    F -->|10. 处理业务逻辑| F
    F -->|11. 发送 ACK 确认| E
    E -->|12. 移除已确认消息| E
</div>