OD(12)之Mermaid思维导图(Mindmap)使用详解

Author: Once Day Date: 2024年2月29日

漫漫长路才刚刚开始…

全系列文章可参考专栏: Mermaid使用指南_Once_day的博客-CSDN博客

参考文章:

• 关于 Mermaid | Mermaid 中文网 (nodejs.cn)
• Mermaid | Diagramming and charting tool
• ‍‌⁡⁤‍‍⁢‌‬⁡⁤⁢‍‌⁣⁢⁢⁤⁣‌‌⁢⁣⁢⁤⁡‌‌⁤⁤⁢⁡⁡⁢‍⁢⁣⁤‌Mermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)
• Draw Diagrams With Markdown - Typora Support (typoraio.cn)
• Mermaid 使用教程：从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)
• 思维导图 | Mermaid 中文网 (nodejs.cn)
• mermaid live 在线mermiad工具

1. 介绍

思维导图，这个术语最早由英国心理学家托尼·博赞（Tony Buzan）在20世纪70年代提出，是一种用于辅助脑力激荡、记忆和可视化思考的工具。它通过图形化的方式组织信息，让人们可以更直观地看到思想和概念之间的联系。思维导图通常以一个中心主题开始，然后围绕这个中心主题扩展出多个分支，分支上再进一步衍生出子分支，形成一个网络状的结构。每个分支上都会标记关键词或图像，以代表相应的想法或信息。

思维导图不仅仅是一种画图工具，它更是一种思考的艺术。它帮助人们以非线性的方式组织信息，这种方式更接近人脑自然的工作方式。使用思维导图，我们可以将零散的信息串联起来，构建出一个有逻辑的、层次分明的信息结构。这种方法特别适合脑力激荡、规划、复习、记忆和学习等场景。

优点方面，思维导图能够激发创造力，提高记忆和学习效率，同时还能帮助人们更好地组织和管理信息。它的多彩和直观特性使得复杂的信息变得简单易懂，可以快速捕捉信息的核心内容。

缺点可能在于，对于习惯了线性笔记和逻辑表达的人来说，刚开始可能会不太适应思维导图的非线性和图形化特点。此外，如果不加以控制，一个思维导图可能会变得过于庞大和复杂，从而失去其应有的清晰和简洁性。

随着数字技术的发展，思维导图的应用已经从纸张转移到了电子设备上。现在市面上有很多软件可以用来绘制思维导图，如MindManager、XMind、FreeMind等，它们提供了更多的功能和便捷性，比如快速插入图像、链接、文件，以及多人协作等。

在实际使用中，思维导图可以帮助个人整理思路，规划文章或演讲的结构；在团队中，它可以作为沟通和讨论的工具，帮助成员之间建立共识；在企业和教育领域，它也常被用来进行项目管理和教学活动。

下面是Mermaid中思维导图的使用实例:

2. 使用

2.1 语法

Mermaid的思维导图直接使用缩进来设置层次结构中的级别，因此使用起来比较简单。

下面是简单的四个节点，分成三个层次，如下:

mindmapRootABC

这个简单文本式代码表述的节点，很容易就被渲染为一个思维导图，还是非常简单的，类似于文本大纲。

Mermaid的思维导图不需要其他形式语法，只要如上所示的缩进排布即可。

2.2 节点形状

Mermaid思维导图节点的形状也和流程图类似，可以用不同符号来确定，如下所示:

形状名称	语法示例	描述
正方形	Square id[I am a square]	标准的正方形节点
圆角方形	Rounded square id(I am a rounded square) rounded	带有圆角的方形节点
圆圈	Circle id((I am a circle)) circle	圆形节点
砰	Bang id))I am a bang(( bang	特殊的“砰”形状节点
云	Cloud id)I am a cloud( cloud	云形状的节点
六边形	Hexagon id{{I am a hexagon}} hexagon	六边形节点
默认形状	Default I am the default shape the default shape	Mermaid 的默认节点形状

下面是示例：

mindmapRoot(("圆形节点"))bang))"特殊的“砰”形状节点"((cloud)"云形状的节点"(Hexagon{{"六边形节点"}}Square["标准的正方形节点"]Rounded("带有圆角的方形节点")default

2.3 缩进问题

如果编写思维导图时，缩进排版不够清晰，可能会造成错误的结果，比如:

mindmapRoot"A""B""C"

我们会发现，虽然"C"不是"B"缩进的子代，也没有与"B"平级，但是Mermaid通过一个错误补偿机制，把"A"作为"C"的父节点，从而实际绘图时，呈现出来"B"和"C"是兄弟姐妹节点。

2.4 Markdown语法

Mermaid支持在思维导图中嵌入简单的Markdown语法，如斜体、粗体、换行等格式，如下所示：

mindmapRoot("`**这是粗体**`")A("`*这是斜体*`")C("`可以换行`")

Once Day

也信美人终作土，不堪幽梦太匆匆......

如果这篇文章为您带来了帮助或启发，不妨点个赞👍和关注，再加上一个小小的收藏⭐！

(｡◕‿◕｡)感谢您的阅读与支持~~~