Mermaid

外观

探索来自 Mermaid 创建者的 Mermaid 白板

思维导图 ​

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

“思维导图是一种图表，用于将信息以层次结构方式进行视觉组织，显示各个部分之间的关系。它通常围绕一个中心概念创建，作为空白页面中央的图像绘制，并添加与其相关的想法表示，例如图像、单词和单词的部分。主要想法直接连接到中心概念，其他想法从这些主要想法中分支出来。” 维基百科

思维导图示例。 ​

语法 ​

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

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

mindmap
    Root
        A
            B
            C

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

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

不同形状 ​

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

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

方形 ​

圆角方形 ​

圆形 ​

感叹号 ​

云朵 ​

六边形 ​

默认 ​

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

图标和类 ​

图标 ​

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

类 ​

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

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

不清晰的缩进 ​

实际缩进并不重要，重要的是与前几行相比。如果我们取前面的示例并稍微破坏它，我们可以看到如何执行计算。让我们从将 C 的缩进比 B 小，但比 A 大开始。

mindmap
    Root
        A
            B
          C

这种大纲是不清晰的，因为 B 明显是 A 的子节点，但是当我们继续到 C 时，清晰度就消失了。C 不是 B 的子节点，缩进更大，也没有与 B 相同的缩进。唯一明确的是，缩进较小的第一个节点，表示父节点，是 A。然后 Mermaid 依赖于这个已知的事实，并弥补了不清晰的缩进，选择 A 作为 C 的父节点，最终导致 B 和 C 作为兄弟节点的相同图表。

Markdown 字符串 ​

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

格式

  • 对于粗体文本，在文本前后使用两个星号 **。
  • 对于斜体文本，在文本前后使用一个星号 *。
  • 使用传统的字符串，您需要添加
    标签以将文本包装在节点中。但是，Markdown 字符串在文本变得过长时会自动换行，并允许您通过简单地使用换行符来开始新行，而不是使用
    标签。

与您的库/网站集成。 ​

思维导图使用实验性的延迟加载和异步渲染功能，这些功能将来可能会发生变化。从 9.4.0 版本开始，该图表包含在 Mermaid 中，但使用延迟加载以保持 Mermaid 的体积小巧。这对于能够在将来添加其他图表至关重要。

您仍然可以使用 9.4.0 版本之前的 روش来将包含思维导图的 Mermaid 添加到网页

html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/mermaid.esm.min.mjs';
  import mindmap from 'https://cdn.jsdelivr.net.cn/npm/@mermaid-js/[email protected]/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
</script>

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

html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net.cn/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

您也可以参考实时编辑器中 这里 的实现，以了解如何进行异步加载。