Mermaid中文文档

Appearance

思维导图 ​

思维导图：目前这是一个实验性图表。语法和属性可能会在未来的版本中发生变化。除了图标集成（这是实验性部分）之外，语法是稳定的。

“思维导图是一种用于将信息以层次结构方式直观组织的图表，显示整体各部分之间的关系。它通常围绕单个概念创建，该概念被绘制在空白页面中心的图像中，并向其中添加相关的想法表示，例如图像、单词和单词的一部分。” 维基百科

思维导图示例 ​

语法 ​

创建思维导图的语法很简单，它依赖于缩进设置层次结构中的级别。

在下面的示例中，您可以看到有 3 个不同的级别。一个从文本的左侧开始，另一个级别有两行从同一列开始，定义节点 A。最后还有一个级别，其中文本的缩进比定义节点 B 和 C 的前几行更大。

mindmap
    Root
        A
            B
            C

总而言之，这是一个简单的文本大纲，其中根级别有一个名为 Root 的节点，它有一个子节点 A。A 又有两个子节点 B 和 C。在下图中，我们可以看到它呈现为思维导图。

通过这种方式，我们可以使用文本大纲生成分层思维导图。

不同的形状 ​

Mermaid 思维导图可以使用不同的形状显示节点。当为节点指定形状时，语法类似于流程图节点，带有 id 后跟形状定义，以及在形状分隔符内的文本。在可能的情况下，我们将尝试/将尝试保留与流程图相同的形状，即使并非所有形状从一开始就受支持。

思维导图可以显示以下形状：

正方形 ​

Code:
mermaid

圆角正方形 ​

Code:
mermaid

圆形 ​

Code:
mermaid

感叹号 ​

Code:
mermaid

云形 ​

Code:
mermaid

六边形 ​

Code:
mermaid

默认形状 ​

Code:
mermaid

将添加更多形状，从流程图中可用的形状开始。

图标和类 ​

图标 ​

与流程图一样，您可以向节点添加图标，但语法已更新。基于字体的图标的样式是在集成期间添加的，以便它们可用于网页。这不是图表作者可以执行的操作，而必须由站点管理员或集成者执行。一旦图标字体到位，您可以使用 ::icon() 语法将它们添加到思维导图节点。将图标的类放在括号内，如下面的示例所示，其中显示了 Material Design 和Font Awesome 5 的图标。目的是这种方法应该用于所有支持图标的图表。实验性功能： 这种更广泛的范围也是思维导图是实验性的原因，因为此语法和方法可能会发生变化。

Code:
mermaid

类 ​

同样，添加类的语法类似于流程图。您可以使用三个冒号添加类，后跟用空格分隔的多个 css 类。在下面的示例中，其中一个节点附加了两个自定义类 urgent（将背景变为红色，文本变为白色且字体大小增大）和 large（增加字体大小）：

Code:
mermaid

这些类需要由站点管理员提供。

模糊的缩进 ​

实际缩进并不重要，只是与前几行相比。如果我们采用前面的示例并稍微修改一下，我们可以看到计算是如何执行的。让我们从将 C 的缩进放在比 B 小但比 A 大的位置开始。

mindmap
    Root
        A
            B
          C

此大纲不清楚，因为 B 明显是 A 的子节点，但是当我们继续到 C 时，清晰度就丢失了。C 既不是具有更高缩进的 B 的子节点，也没有与 B 相同的缩进。唯一清楚的是，第一个缩进较小的节点（表示父节点）是 A。然后 Mermaid 依赖于这个已知的事实，并补偿模糊的缩进，并选择 A 作为 C 的父节点，从而导致 B 和 C 作为兄弟节点的相同图表。

Markdown 字符串 ​

“Markdown 字符串”功能通过提供更通用的字符串类型来增强思维导图，该类型支持粗体和斜体等文本格式选项，并自动换行标签内的文本。

Code:
mermaid

格式：

  • 对于粗体文本，在文本前后使用双星号 **。
  • 对于斜体文本，在文本前后使用单星号 *。
  • 使用传统字符串，您需要添加 <br> 标签才能换行节点中的文本。但是，Markdown 字符串在文本过长时会自动换行，并允许您只需使用换行符而不是 <br> 标签即可换行。

集成到您的库/网站中 ​

思维导图使用实验性的延迟加载和异步渲染功能，这些功能将来可能会发生变化。从 9.4.0 版本开始，此图表包含在 mermaid 中，但使用延迟加载以减小 mermaid 的大小。为了能够在将来添加其他图表，这一点很重要。

您仍然可以使用 9.4.0 之前的添加包含思维导图的 mermaid 到网页的方法：

html
<script type="module">
  import mermaid from '<CDN_URL>/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
</script>

从 9.4.0 版本开始，您可以将此代码简化为：

html
<script type="module">
  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
</script>

您还可以参考实时编辑器中的实现此处，了解如何完成异步加载。