【mermaid】画图工具使用笔记_xybdiy的博客-爱代码爱编程

Mermaid简介

Mermaid 允许使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表绘制和图表工具，可呈现受 Markdown 启发的文本定义，以动态创建和修改图表。

Mermaid使用方法

1、流程图（graph）

graph TD;
	A-->B;
	A-->C;
	B-->D;

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

2、时序图(sequenceDiagram)

sequenceDiagram
	Alcie->>Johb:hello John, how are you?
	John-->>Alice:Great!

3、状态图（stateDiagram）

stateDiagram
	[*]-->s1
	s1-->[*]

4、类图

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

5、甘特图（gantt）

gantt
    section Section
    Completed :done,    des1, 2022-01-06,2022-01-08
    Active        :active,  des2, 2022-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

6、饼图(pie)

pie
	title Key elements in Product X
	"Dogs" : 25
	"Cats" : 25
	"Rats" : 15
	"Iron" : 35

7、需求图

flowchat
  st=>start: Start
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->e
  cond(no)->op

参考连接

🔴[Theming (mermaid-js.github.io)

🟡 https://github.com/mermaid-js/mermaid