美妙的美人鱼 mermaid 程序猿的画图神器

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 2
    style 用户服务 fill:#a00,stroke:red,color:#fff,stroke-dasharray: 2 2
    style 商品服务 fill:#bb0,stroke:red,color:#fff,stroke-dasharray: 2 2
    style 交易服务 fill:#6419E6,stroke:red,color:#fff,stroke-dasharray: 2 2
  end
  
  subgraph 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 2
    style 服务发现 fill:#a00,stroke:red,color:#fff,stroke-dasharray: 2 2
    style 服务监控 fill:#bb0,stroke:red,color:#fff,stroke-dasharray: 2 2
    style 日志分析 fill:#6419E6,stroke:red,color:#fff,stroke-dasharray: 2 2
  end

  API网关 -->one
  one --> two

输出如下:

再看一个复杂的:

flowchart LR

start["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  & d6

d22["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

输出如下: