思维导图

¥Mindmap

思维导图：这是目前的实验图。语法和属性可能会在未来版本中更改。除了图标集成是实验部分之外，语法是稳定的。

¥Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.

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

¥"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia

思维导图的一个例子。

¥An example of a mindmap.

语法

¥Syntax

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

¥The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.

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

¥In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.

mindmap
    Root
        A
            B
            C

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

¥In summary is a simple text outline where there is one node at the root level called Root which has one child A. A in turn has two children Band C. In the diagram below we can see this rendered as a mindmap.

这样我们就可以利用文本大纲来生成层次思维导图。

¥In this way we can use a text outline to generate a hierarchical mindmap.

不同的形状

¥Different shapes

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

¥Mermaid mindmaps can show nodes using different shapes. When specifying a shape for a node the syntax is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts, even though they are not all supported from the start.

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

¥Mindmap can show the following shapes:

正方形

¥Square

圆角方形

¥Rounded square

圆圈

¥Circle

砰

¥Bang

云

¥Cloud

六边形

¥Hexagon

默认

¥Default

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

¥More shapes will be added, beginning with the shapes available in flowcharts.

图标和类

¥Icons and classes

图标

¥Icons

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

¥As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. This is not something a diagram author can do but has to be done with the site administrator or the integrator. Once the icon fonts are in place you add them to the mind map nodes using the ::icon() syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and Font Awesome 5 are displayed. The intention is that this approach should be used for all diagrams supporting icons. Experimental feature: This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.

类

¥Classes

同样，添加类的语法与流程图类似。你可以使用三个冒号添加类，后面是多个由空格分隔的 css 类。在以下示例中，其中一个节点附加了两个自定义类，紧急将背景变为红色，将文本变为白色并增大字体大小：

¥Again the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text white and large increasing the font size:

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

¥These classes need to be supplied by the site administrator.

压痕不清晰

¥Unclear indentation

仅与前面的行相比，实际的缩进并不重要。如果我们把前面的例子稍微破坏一下，我们就可以看到计算是如何执行的。让我们首先将 C 放置为比 B 更小的缩进，但比 A 更大的缩进。

¥The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than B but larger then A.

mindmap
    Root
        A
            B
          C

该轮廓不清楚，因为 B 显然是 A 的子级，但当我们继续讨论 C 时，清晰度就消失了。C 不是具有更高缩进的 B 的子代，也不具有与 B 相同的缩进。唯一清楚的是，第一个缩进较小的节点（表示父节点）是 A。然后 Mermaid 依靠这个已知的事实并补偿不清楚的缩进并选择 A 作为 C 的父代，直到与 B 和 C 作为兄弟姐妹的相同图。

¥This outline is unclear as B clearly is a child of A but when we move on to C the clarity is lost. C is not a child of B with a higher indentation nor does it have the same indentation as B. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects A as a parent of C leading till the same diagram with B and C as siblings.

Markdown 字符串

¥Markdown Strings

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

¥The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.

格式设置：

¥Formatting:

• 对于粗体文本，请在文本前后使用双星号 **。

  ¥For bold text, use double asterisks ** before and after the text.

• 对于斜体，请在文本前后使用单个星号 *。

  ¥For italics, use single asterisks * before and after the text.

• 对于传统字符串，你需要添加
  标签以使文本换行在节点中。但是，当文本变得太长时，Markdown 字符串会自动换行，并允许你只需使用换行符而不是
  标记来开始新行。

  ¥With traditional strings, you needed to add
  tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a
  tag.

与你的库/网站集成。

¥Integrating with your library/website.

Mindmap 使用实验性延迟加载和异步渲染功能，这些功能将来可能会发生变化。从版本 9.4.0 开始，该图包含在 mermaid 中，但使用延迟加载以缩小 mermaid 的大小。这对于能够添加其他图表非常重要。

¥Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.

你仍然可以使用 9.4.0 之前的方法将带有思维导图的 Mermaid 添加到网页：

¥You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:

<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 开始，你可以将此代码简化为：

¥From version 9.4.0 you can simplify this code to:

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

你还可以参考在线编辑器 此处 中的实现来查看异步加载是如何完成的。

¥You can also refer the implementation in the live editor here to see how the async loading is done.