Mermaid

外观

探索由Mermaid创作者打造的Mermaid白板

思维导图 ​

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

"思维导图是一种用于将信息视觉化组织成层次结构的图表，显示整体各部分之间的关系。它通常围绕一个单一的概念创建，绘制在空白页面的中心，然后添加与之相关的想法表示，如图像、单词和单词的部分。主要想法直接连接到中心概念，其他想法则从这些主要想法中分支出来。" 维基百科

思维导图的一个示例。 ​

语法 ​

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

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

mindmap
    Root
        A
            B
            C

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

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

不同的形状 ​

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

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

平方 ​

圆角正方形 ​

圆形 ​

砰 ​

云 ​

六边形 ​

默认 ​

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

图标和类 ​

图标 ​

与流程图一样，您可以为节点添加图标，但使用更新的语法。基于字体的图标样式在集成过程中添加，以便它们在网页上可用。这不是图表作者可以做的事情，而是必须由网站管理员或集成人员完成。一旦图标字体就位，您就可以使用::icon()语法将它们添加到思维导图节点中。您将图标的类放在括号内，如下例所示，其中显示了材料设计和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/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
  import mindmap from 'https://cdn.jsdelivr.net/npm/@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 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

你也可以参考实时编辑器中的实现这里，看看异步加载是如何完成的。