思维导图
思维导图是一种用来以图形方式组织信息、显示整体各部分之间关系的图表。它通常是围绕一个主题创建的,主题被画在空白页面的中心,然后将与之相关的想法表现形式添加到周围。主要思想直接连接到主题,其他的想法则从这些主要思想分支出来。
思维导图示例: 代码:
复制
嵌入
mindmap
root((mindmap))
Origins
Long history
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 又有两个子级 B 和 C。在下图中,我们可以看到它渲染为思维导图的样式。
代码:
复制
嵌入
mindmap
Root
A
B
C
通过这种方式,我们可以使用文本大纲来生成分层思维导图。
不同形状
Mermaid 思维导图可以使用不同的形状来显示节点。指定节点形状时,语法类似于流程图节点,先是一个 ID,然后是形状定义,文本放在形状的显示框中
思维导图可以显示以下形状:
矩形
代码:
复制
嵌入
mindmap
id[I am a square]
圆角矩形
代码:
复制
嵌入
mindmap
id(I am a rounded square)
圆
代码:
复制
嵌入
mindmap
id((I am a circle))
爆炸气泡
代码:
复制
嵌入
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() 语法将它们添加到思维导图节点中。
代码:
复制
嵌入
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
类
同样,添加类的语法与流程图类似。你可以使用三个冒号::: 来添加类,类名之间用空格分隔。在下面的示例中,其中一个节点附加了两个自定义类:urgent 将背景变为红色,文字变为白色;large 增大字体大小::
代码:
复制
嵌入
mindmap
Root
A[A]
:::urgent large
B(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]
格式化:
- 要加粗文本,请在文本前后使用双星号 **。
- 要斜体文本,请在文本前后使用单星号 *。