markdown的mermaid用法及例子

Markdown高级用法——mermaid

前言

Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。

Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。

流程图（FlowChart）

流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。

Mermaid 支持多种图表的方向

语法

graph 方向描述
      图表中的其他语句...

方向描述

用词	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

节点定义

即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字

表述	说明
id[文字]	矩形节点
id(文字)	圆形矩形节点
id((文字))	圆形节点
id>文字]	右向旗帜状节点
id{文字}	菱形节点
id[[文字]]	双边框
id[(文字)]	圆柱
id{ {文字}}	两边尖尖

需要注意的是，如果节点的文字中包含标点符号，需要时使用双引号包裹起来。

另外如果希望在文字中使用换行，请使用替换换行

节点间的连线

表述	说明
>	添加尾部箭头
-	不添加尾部箭头
–	单线
–text–	单线上加文字
==	粗线
text	粗线加文字
-.-	虚线
-.text.-	虚线加文字

子图表

使用以下语法添加子图表

subgraph 子图表名称
         子图表中的描述语句...
end

### 例子

---
title: Node
---
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    id1--普通线-->a["包含标点符号，需要时用双引号包裹起来"]
    a-->b[换行<br>换行]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
        id5-->id6[[双边框]]
        id4-->id7[(圆柱)]
        id7-->id8{
  {尖尖}}
    end

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

graph TD
  subgraph 用户
    用户操作 --> A[前端应用]
  end

  subgraph 服务端
    A --> B[负载均衡]
    B -->|请求| C[服务1]
    B -->|请求| D[服务2]
    B -->|请求| E[服务3]
  end

  subgraph 数据存储
    C -->|读写| F[数据库1]
    D -->|读写| G[数据库2]
    E -->|读写| H[数据库3]
  end

  subgraph 消息队列
    C -->|异步通信| I[消息队列1]
    D -->|异步通信| I
    E -->|异步通信| I
  end