首页 > 编程学习 > mermaid_starter简单使用/渲染问题和调整

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

发布时间:2022/11/15 5:23:34

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

  • mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. (mermaid-js.github.io)
    支持一下类型的图型,各有个的语法

    • Flowchart

    • Sequence diagram

    • Class Diagram

    • State Diagram

    • Entity Relationship Diagram

    • User Journey

    • Gantt

    • Pie Chart

    • Requirement Diagram

    • Gitgraph (Git) Diagram 🔥

    • Other Examples

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式