This theme now supports the use of `Mermaid` to draw flowcharts, sequence diagrams, Gantt charts, state diagrams, relationship diagrams, and more in plain text format. With the gradual development of `Mermaid`, various types of diagrams will be introduced in the future. For more types and usage methods, please follow its official website:[https://mermaid-js.github.io/](https://mermaid-js.github.io/).
<!--more-->
## Instructions for use
{{<noteinfo>}}
- Create a new article using the `hugo new` command
- Write various types of diagrams using short code, with 2 built-in parameters: Align and bc (background color) can refer to the following usage examples
{{</note>}}
## Process diagram
```shell
{{</* mermaid align="left" */>}}
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
{{</* /mermaid */>}}
```
{{<mermaidalign="left">}}
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
{{</mermaid>}}
## Timing diagram
```shell
{{</* mermaid bc="#eee" */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{{</* /mermaid */>}}
```
{{<mermaidbc="#eee">}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
