hexo开启mermaid流程图效果

发表于 分类于

hexo: 7.3.0

hexo-theme-next 8.22.0

流程图

1
2
3
4
5
6
7
8
9
graph TD;

    A-->B;

    A-->C;

    B-->D;

    C-->D;
graph TD;

    A-->B;

    A-->C;

    B-->D;

    C-->D;

1
2
3
4
5
6
graph TD 
	A[Christmas] -->|Get money| B(Go shopping) 
	B --> C{Let me think} 
	C -->|One| D[Laptop] 
	C -->|Two| E[iPhone] 
	C -->|Three| F[fa:fa-car Car]
graph TD 
	A[Christmas] -->|Get money| B(Go shopping) 
	B --> C{Let me think} 
	C -->|One| D[Laptop] 
	C -->|Two| E[iPhone] 
	C -->|Three| F[fa:fa-car Car]

时序图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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!
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!

甘特图

1
2
3
4
5
6
7
8
9
10
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2025-01-10

section A section
Completed task            :done,    des1, 2025-01-06,2025-01-08
Active task               :active,  des2, 2025-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2025-01-10

section A section
Completed task            :done,    des1, 2025-01-06,2025-01-08
Active task               :active,  des2, 2025-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d