mermaid基本操作

nexthexonextbutterflyvolantisyearnyiliashokaindigoapollolandscapecactusmateryicarusfluidmaterial

Mermaid

这是一个画图的东西，他可以画有向图、无向图、流程图、时序图、类图、状态图等等，官网在这
有一个坑，就是md文件第一非空行不可以是#mermaid, 否则渲染失败，所以我这用了Mermaid作为开头，

why this blog

简单介绍一下用法，避免每次都去官网找半天

基础用法

参数	备注
TB	top bottom
BT	bottom top
RL	right left
LR	left right
TD	same as TB

节点形状

graph TB
  id1[id1]
  id2(id2)
  id3([id3])
  id4[(id4)]
  id5((id5))

graph TB
  id1[id1]
  id2(id2)
  id3([id3])
  id4[(id4)]
  id5((id5))

有向边无向边

graph LR
  A-->B---C--hello-->D--word---E
  A-.->F==>G-.hello.->H==word==>I
  E & I-->1 & 2-->End

graph LR
  A-->B---C--hello-->D--word---E
  A-.->F==>G-.hello.->H==word==>I
  E & I-->1 & 2-->End

子图

graph LR
  a1-->b2
  b1-->a2
  subgraph A
  a1-->a2
  end
  subgraph B
  b1-->b2
  end

graph LR
  a1-->b2
  b1-->a2
  subgraph A
  a1-->a2
  end
  subgraph B
  b1-->b2
  end

文字

graph LR
  A[我是文字]

graph LR
  A[我是文字]

颜色

graph LR
  A[红色]
  style A fill: yellow

graph LR
  A[红色]
  style A fill: yellow

例子

graph LR
  %% style
  classDef green fill:#a3e4d7,stroke:#333,stroke-width:1px
  classDef blue fill:#d6eaf8,stroke:#333,stroke-width:1px
  classDef brown fill:#edbb99,stroke:#333,stroke-width:1px
  classDef grey fill:#f2f3f4,stroke:#333,stroke-width:1px
  
  %% point
  start((数据源)):::green
  op1(算子1):::blue
  op2(算子1):::blue
  op3(算子1):::blue
  op4(算子2):::blue
  op5(算子2):::blue
  op6(算子2):::blue
  output((输出)):::brown
  shuffle((shuffle)):::grey
  
  %% edge
  start --> op1 & op2 & op3 --- shuffle --> op4 & op5 & op6 --> output
  

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-->>John: See you later!

参考

mermaid 给你的文档加层滤镜

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： fightinggg
• 本文链接： http://fightinggg.github.io/yilia/yilia/Q9N2VH.html
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！