思维导图基础语法

你们的q哥

已于 2023-08-09 15:48:21 修改

阅读量106

点赞数

文章标签：前端

于 2023-08-09 15:35:55 首次发布

本文链接：https://blog.csdn.net/gfxsx/article/details/132189097

版权

思维导图

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

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

思维导图的一个例子。

代码：

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

句法

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

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

mindmap
Root
A
B
C

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

mindmap
Root
    A
      B
      C

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

不同的形状

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

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

正方形

代码：

mindmap
    id[I am a square]

圆角方形

代码：

mindmap
    id(I am a rounded square)

圆

代码：

mindmap
    id((I am a circle))

Bang

代码：

mindmap
    id))I am a bang((

云

代码：

mindmap
    id)I am a cloud(

六边形

代码：

mindmap
    id{{I am a hexagon}}

默认

代码：

mindmap
    I am the default shape

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

图标和类

图标

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

mindmap
    Root
        A
        ::icon(fa fa-book)
        B(B)
        ::icon(mdi mdi-skull-outline)

类

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

代码：

mindmap
    Root
        A[A]
        :::urgent large
        B(B)
        C

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

Unclear indentation

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

mindmap
Root
A
B
C

这个轮廓不清楚，因为 B 显然是 A 的子级，但当我们转向 C 时，清晰度就消失了。 C 不是具有较高缩进的 B 的子节点，也不具有与 B 相同的缩进。唯一清楚的是，第一个缩进较小的节点（表示父节点）是 A。那么 JHL 在线编辑 依赖于这个已知事实并补偿不清楚的缩进，并选择 A 作为 C 的父级，直到与 B 和 C 作为兄弟姐妹的相同图表为止。

mindmap
Root
    A
        B
      C

Markdown 字符串

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

代码：

mindmap
    id1["`**Root** with
a second line
Unicode works too: 🤓`"]
      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
      id3[Regular labels still works]