思维导图

🌐 Mindmap

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

思维导图是一种用来以图形方式组织信息、显示整体各部分之间关系的图表。它通常围绕一个核心概念创建，该概念被画在空白页面的中心，然后将与之相关的想法表现形式（如图片、文字和词的部分）添加到周围。主要思想直接连接到核心概念，其他的想法则从这些主要思想分支出来。

心智图示例。

🌐 An example of a mindmap.

语法

🌐 Syntax

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

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

在以下示例中，你可以看到有三个不同的层级。一个从文本的左侧开始的层级，另一个层级有两行从同一列开始，定义了节点 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

再次，添加类的语法与流程图类似。你可以使用三个冒号来添加类，类名之间用空格分隔。在下面的示例中，其中一个节点附加了两个自定义类：urgent 将背景变为红色，文字变为白色；large 增大字体大小：

🌐 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 neither 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:

• 要加粗文本，请在文本前后使用双星号 **。
• 要使用斜体，请在文本前后使用单个星号 *。
• 使用传统字符串时，你需要添加
  标签才能让文本在节点中换行。然而，Markdown 字符串会在文本过长时自动换行，并且只需使用换行符而不是
  标签就可以开始新的一行。

与你的库/网站集成

🌐 Integrating with your library/website.

思维导图使用了实验性的延迟加载和异步渲染功能，这些功能在未来可能会发生变化。从 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 to see how the async loading is done.

布局

🌐 Layouts

Mermaid 还支持用于思维导图的整齐树布局。

🌐 Mermaid also supports a Tidy Tree layout for mindmaps.

---
config:
  layout: tidy-tree
---
mindmap
root((mindmap is a long thing))
  A
  B
  C
  D

添加和注册 tidy-tree 布局的说明请参见 Tidy Tree 配置

🌐 Instructions to add and register tidy-tree layout are present in Tidy Tree Configuration