# 概述 你可以使用 [Mermaid](https://mermaid-js.github.io/) 语法在笔记中添加图表和流程图。Mermaid 支持多种图表，如[流程图](https://mermaid.js.org/syntax/flowchart.html)、[时序图](https://mermaid.js.org/syntax/sequenceDiagram.html)和[时间线](https://mermaid.js.org/syntax/timeline.html)等。 > [!tip] > 你也可以尝试使用 Mermaid 的 [在线编辑器](https://mermaid-js.github.io/mermaid-live-editor) 来帮助你在笔记中添加图表。 # 语法 ## 基础语法 要添加 Mermaid 图表，创建一个 `mermaid` [[围栏代码块]]。 ````md ```mermaid sequenceDiagram Alice->>+John: 你好 John，你好吗？ Alice->>+John: John，你能听到我吗？ John-->>-Alice: 嗨 Alice，我能听到你！ John-->>-Alice: 我感觉很好！ ``` ```` ```mermaid sequenceDiagram Alice->>+John: 你好 John，你好吗？ Alice->>+John: John，你能听到我吗？ John-->>-Alice: 嗨 Alice，我能听到你！ John-->>-Alice: 我感觉很好！ ``` ````md ```mermaid graph TD 生物学 --> 化学 ``` ```` ```mermaid graph TD 生物学 --> 化学 ``` ## 在图表中添加链接 你可以通过将节点声明为 `internal-link` [类型](https://mermaid.js.org/syntax/flowchart.html#classes) 来在图表中创建[[内部链接]]。 ````md ```mermaid graph TD 生物学 --> 化学 class 生物学,化学 internal-link; ``` ```` ```mermaid graph TD 生物学 --> 化学 class 生物学,化学 internal-link; ``` > [!note] > 图表中的内部链接不会显示在 [[关系图谱]]中。 如果你的图表中有很多节点，你可以使用以下代码片段。 ````md ```mermaid graph TD A[生物学] B[化学] A --> B class A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z internal-link; ``` ```` 这样，每个字母节点都会成为一个内部链接，[节点文本](https://mermaid.js.org/syntax/flowchart.html#a-node-with-text)将作为链接文本。 > [!note] > 如果你的笔记名称中包含特殊字符，你需要将笔记名称放在双引号中。 > > ``` > class "⨳ 特殊字符" internal-link > ``` > > 或者 `A["⨳ 特殊字符"]`。 想了解更多有关创建图表的信息，请参阅[Mermaid 官方文档](https://mermaid.js.org/intro/)。