mermaid(美人鱼), 是一个类似 Graphviz ，用文本语法来描述各种图(流程图、 时序图、甘特图)的工具!

flowchart TD用户["fa:fa-user用户"] --> API网关("fa:fa-random API网关")subgraph one ["领域微服务"]direction LR认证授权 <--> 用户服务 <--> 商品服务  <--> 交易服务style 认证授权 fill:gray,stroke:red,color:#fff,stroke-dasharray: 2 2style 用户服务 fill:#a00,stroke:red,color:#fff,stroke-dasharray: 2 2style 商品服务 fill:#bb0,stroke:red,color:#fff,stroke-dasharray: 2 2style 交易服务 fill:#6419E6,stroke:red,color:#fff,stroke-dasharray: 2 2endsubgraph two ["基础设施"]配置中心["fa:fa-cogs 配置中心"]服务发现["fa:fa-graduation-cap 服务发现"]服务监控["fa:fa-cogs 服务监控"]日志分析["fa:fa-area-chart 日志分析"]配置中心 & 服务发现 & 服务监控 &  日志分析style 配置中心 fill:gray,stroke:red,color:#fff,stroke-dasharray: 2 2style 服务发现 fill:#a00,stroke:red,color:#fff,stroke-dasharray: 2 2style 服务监控 fill:#bb0,stroke:red,color:#fff,stroke-dasharray: 2 2style 日志分析 fill:#6419E6,stroke:red,color:#fff,stroke-dasharray: 2 2endAPI网关 -->oneone --> two

输出如下:

再看一个复杂的:

flowchart LRstart["fa:fa-address-card packageData\n组装数据"] --> if_1{"fa:fa-code-fork if_1判断1"}if_1 -->|"条件1,指定供应商"| channel1["channel1\n供应商1"]
if_1 -->|"条件2,指定供应商"| channel2[channel2\n供应商2]
if_1 -->|"条件3,并行获取\n供应商渠道剩余量"| if_3((" "))
if_1 -->|"条件4,各种复杂判断"| if_4["biz1获取业务动态值"]subgraph " "
d1["channel1Query\n获取供应商1剩余量"]
d2["channe2Query\n获取供应商1剩余量"]
d3["channe3Query\n获取供应商1剩余量"]
d4["channe4Query\n获取供应商1剩余量"]
d5["channe5Query\n获取供应商1剩余量"]
d6["channe6Query\n获取供应商1剩余量"]if_3 --> d1 & d2 & d3 & d4  & d5  & d6d22["channelSelectc选出剩余量\n最多的那个供应商"]
d1 --> d22
d2 --> d22
d3 --> d22
d4 --> d22
d5 --> d22
d6 --> d22
end  if_4 --> f{"if_2判断2"}
subgraph " "
f --> f1["channel3供应商3"]
f --> f2["channel4供应商4"]f --> f3{"if_3判断3"}
f3 --> g1["channel5供应商5"]
f3 --> g2["channel6供应商6"]
g1 & g2 --> JJ((" "))f1 & f2 & JJ--> f1f2((" "))end  channel1 --> stop["batchsende\n批量发送消息"]
channel2 --> stop
d22 --> stop
f1f2 --> stop

输出如下: