mermaid_starter简单使用/渲染问题和调整

mermaid简单流程图

  • mermaid是一种画流图的方便的工具,使用简单的语法,就可以渲染出相关的流图,对于小型图很友好
  • 在markdown中也有所应用

mermaid_starter使用入门

  • 不同图型的语法不同/效果不同
    • 在同一段mermaid代码在图型(A)中是有效且正确的,
    • 但是在图型(B)中可能就是另一种意思,甚至直接导致渲染失败
flowchart LR
    id1((This is the text in the circle))
This is the text in the circle 
flowchart TB
    y<--P-->x[x]
    y(y)<--Q-->z[z]
    z<--R-->x
P
Q
R
y
x
z

不稳定性

引擎版本

由于引擎版本不同,同样的代码效果可能不同

flowchart LR
	a---b & d 
	b---c & e
	c---b 
	c---d
    c---e
a
b
d
c
e

绘制方向(TB/LR)

flowchart TB
	a---b & d 
	b---c & e
	c---b 
	c---d
    c---e
a
b
d
c
e

端点调换

flowchart LR
	a---b & d 
	b---c & e
	c---b 
	c---d
	e---c
a
b
d
c
e

改善线条

  • 拉长边/上下行调换
flowchart LR
	a---b & d 
	c----d & e
	b---c & e
a
b
d
c
e 
flowchart LR
	a---b & d 
	c---d & e
	b---c & e
a
b
d
c
e

子图

例子1

  • flowchart LR
subgraph  
    M[主机]
end
    M<==>IO[I/O接口]<==>dc
subgraph  IO设备 
    dc[设备控制器]-->机,电,磁,光部件
end
  • IO设备
    机,电,磁,光部件
    设备控制器
    主机
    I/O接口

例字2

  • three
    one
    Yes
    No
    c2
    c1
    two
    b2
    b1
    a2
    a1
    Start
    Is it?
    OK
    Rethink
    End 
    • flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
    %%flowchart TB   
    c1-->a2
    
    subgraph one
        a1-->a2
    end

    subgraph two
        b1-->b2
    end
        subgraph three
        c1-->c2
    end

例子3

  • three
    one
    c2
    c1
    two
    b2
    b1
    a2
    a1 
    • flowchart LR
    c1-->a2
    %%子图1
    subgraph one
        a1--->a2
    end
	%%子图2
    subgraph two
        b1-->b2
    end
	%%子图3
    subgraph three
        c1--->c2
    end
	%%组织子图之间的关系
	one---> two
    three--> two
    two--> c2

🎈ref of mermaid

posted @ 2022-11-14 15:10  xuchaoxin1375  阅读(187)  评论(0)    收藏  举报  来源