文章目录

  • 思维导图(Mindmap)
    • 一个思维导图的例子
    • 语法
    • 形状
      • 矩形
      • 圆角矩形
      • 圆形
      • 爆炸
      • 云朵
      • 六边形
      • 默认
    • 图标和类
      • 图标
      • 类
    • 不清晰的缩进
    • Markdown字符串
    • 与库或网站资源集成

思维导图(Mindmap)

Mindmap现在是一个实验性的图表类型。语法和特性可能会在未来版本中更改，除了图标集成部分是实验性的外，语法是稳定的。

“思维导图是一种将思维形象化的方法。我们知道放射性思考是人类大脑的自然思考方式，每一种进入大脑的资料，不论是感觉、记忆或是想法——包括文字、数字、符码、香气、食物、线条、颜色、意象、节奏、音符等，都可以成为一个思考中心，并由此中心向外发散出成千上万的关节点。” – 百度百科

以下所有例子都是在 mermaid v10.2.3 进行测试，CSDN 当前使用 mermaid v8.14.0 不支持此语法

一个思维导图的例子

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmaproot((思维导图))起源悠久的历史::icon(fa fa-book)普及英国流行心理学作家托尼·布赞研究关于有效性<br/>和功能论自动创造用途创造性技术战略规划参数映射工具笔和纸Mermaid</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body></html>

语法

创建Mindmaps的语法很简单，依赖缩进来设置层级结构。

在下面的示例中，您可以看到有3个不同的层级。一个从文本的左侧开始，另一个层级有两行从同一列开始，定义了节点第一级别。最后还有一个层级，节点第二级别 1和第二级别 2的文本缩进比的前几行更深。
代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmap根节点第一级别第二级别 1第二级别 2</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

简而言之，这是一个简单的文本轮廓，在根级别有一个名为根节点的节点，它有一个子节点第一级别。然后第一级别又有两个子节点第二级别 1和第二级别 2。下面是我们渲染的思维导图。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmap根节点第一级别第二级别 1第二级别 2</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

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

形状

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

Mindmap可以显示以下形状：

矩形

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid[矩形]</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

圆角矩形

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid(圆角矩形)</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

圆形

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid((圆形))</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

爆炸

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid))爆炸((</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

云朵

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid)云朵(</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

六边形

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid{{六边形}}</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

默认

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmap默认形状</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

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

图标和类

图标

与流程图一样，您可以向节点添加图标，但语法已更新。基于字体的图标的样式是在集成期间添加的，因此它们可用于网页。这不是图表作者可以做的事情，而必须由站点管理员或集成者完成。一旦图标字体就位，您可以使用::icon语法将它们添加到思维导图节点中。将图标的类放置在括号内，如下面的示例所示，其中显示了materialdesignicons.min.css和font-awesome.min.css的图标。意图是该方法应该用于支持图标的所有图表。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><link rel="preload stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"as="style"><link rel="preload stylesheet"href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"as="style"><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmap根节点第一级::icon(fa fa-book)第一级(二)::icon(mdi mdi-skull-outline)</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

类

添加类的语法类似于流程图。你可以使用三个冒号来添加类，后面跟随由空格分隔的一些css类。在下面的例子中，其中一个节点附加了两个自定义类，urgent使背景变红并将文本变为白色和大号字体，从而增加了字体大小：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script><style type="text/css">.urgent .node-rect {fill: hsl(0deg 100% 50%);;}.large .text-inner-tspan {font-size: large;fill: white;}</style></head><body><pre class="mermaid">mindmap根节点A[节点1]:::urgent largeB(节点2)节点3</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

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

不清晰的缩进

实际缩进并不是很重要，只需要与前面的行进行比较即可。如果我们拿上一个例子稍微打乱一下，我们就可以看到计算是如何进行的。让我们从将C放置在B但大于A的缩进较小的位置开始。

mindmap根节点第一级第二级1第二级2

这个大纲结构看着不是很清晰，因为第二级1显然是第一级的子节点，但当我们跳转到第二级2时，清晰度就丢失了。第二级2既不是具有更高缩进的第二级1的子节点，也不具有与第二级1相同的缩进。唯一清楚的是，第一个缩进较小的节点，表示父节点是第一级。然后Mermaid依赖于这个已知的真相，并对不清晰的缩进进行补偿并选择第一级作为第二级2的父节点，导致第二级1和第二级2成为兄弟节点的相同图表。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><link rel="preload stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"as="style"><link rel="preload stylesheet"href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"as="style"><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmap根节点第一级第二级1第二级2</pre><script>const config = {startOnLoad: false,securityLevel: 'loose',};mermaid.initialize(config);
</script></body>
</html>

Markdown字符串

“Markdown字符串”功能通过提供更多样化的字符串类型来增强思维导图，它支持文本格式设置选项，如加粗和斜体，并自动在标签内部包装文本。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Mermaid 思维导图</title><link rel="preload stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"as="style"><link rel="preload stylesheet"href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"as="style"><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script></head><body><pre class="mermaid">mindmapid1["`**根节点**第二行使用Unicode: 												


											

【MarkDown】CSDN Markdown之思维导图mindmap详解相关推荐
	

    
								
  1. java类与接口思维导图_详解java接口基础知识附思维导图
		
    接口: 官方的含义是---->java接口是一系列方法的声明,是一些方法特征的集合 疑问: 那为什么不用抽象类呢?把他们共有的方法集合起来放在一个抽象类里面,同样可以调用哇,但是反过来想一想如果 ...
    
		
    2. 
						
  2. 一键生成CSDN文章的思维导图目录
		
    简 介: 本文给出了直接将CSDN文章一键生成对应的思维导图目录的程序.将目录增加在博文的最开始,可以更好地显示博文的内部结构,作为原来CSDN网页中目录的补充,丰富博文的表达能力. 关键词: CSD ...
    
		
    3. 
						
  3. 一个用JavaScript生成思维导图(mindmap)的github repo
		
    github 地址:https://github.com/dundalek/markmap 作者的readme写得很简单. 今天有同事问作者提供的例子到底怎么跑.这里我就写一个更详细的步骤出来. 首先 ...
    
		
    4. 
						
  4. php 生成思维导图,一个用JavaScript生成思维导图(mindmap)的github repo
		
    作者的readme写得很简单. 今天有同事问作者提供的例子到底怎么跑.这里我就写一个更详细的步骤出来. 首先查看example.parse.js的内容: var fs = require('fs'); ...
    
		
    5. 
						
  5. 生产力工具推荐，思维导图测评 #CSDN博文精选##思维导图##系统化学习#
		
    大家好~我是小C,全名是CSDN高校俱乐部,我的职责之一是担任"文章过滤器",精选大咖干货.助力学习之路. 你是否曾面对海量信息而无从下手? 你是否曾苦恼学习效果不佳.事倍功半?  ...
    
		
    6. 
						
  6. 思维导图mindmap的使用
		
    效果        可以根据数据量的大小,动态的增加或者减小高度,而不是在一个固定的宽高里面缩放(固定宽高数据量大时导出无法使用,上面的字很模糊). 直接使用插件的效果(固定了宽高,数据量大就很难看) ...
    
		
    7. 
						
  7. 运算符总结 - markdown语法绘制的思维导图
		
    
		
    8. 
						
  8. 人工智能AI会话+文字转为markdown格式/思维导图的工具的介绍和使用
		
    AI会话工具和文字转换为markdown格式 1.这里首先要有一个xmind思维导图软件,下载链接在下方. XMind: 2.本章中列举的AI工具是近期国内交火的prompt(文心一言 作者还没排上队 ...
    
		
    9. 
						
  9. 巧记书本结构--思维导图
		
    思维导图 利器 (一)线上 1.Markmap:https://markmap.js.org/repl适配Markdown笔记爱好者,结合Markdown语法自动生成思维导图,有本地版和线上版.使用m ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 数牍科技完成超3亿元A轮融资，隐私工程守护数据全生命周期流通协作
		
    2. 
						
  2. django(权限、认证)系统—— 基于Authentication backends定制
		
    3. 
						
  3. python进阶与数据操控_零基础机器学习Python进阶:Python操作MySql
		
    4. 
						
  4. JavaScript创建Element元素/标签的工具/方法
		
    5. 
						
  5. cacti 升级php,Cacti 升级备忘
		
    6. 
						
  6. topcoder srm 698 div1 -3
		
    7. 
						
  7. 用ZedGraph作图表(一)
		
    8. 
						
  8. react开发教程（九）redux基础
		
    9. 
						
  9. 红黑树与平衡二叉树_大佬用这近百张图来给我解释红黑树，看完直接跪了！
		
    10. 
						
  10. android加载本地图片
		
    11. 
						
  11. 工行u盾显示316_工行手机银行u盾签名失败或未完成(310)是为什么?
		
    12. 
						
  12. 网络信息检索（一）检索模型：布尔，向量，概率检索
		
    13. 
						
  13. 华为云服务查找手机_华为云服务登录入口
		
    14. 
						
  14. 学习C语言从小白到专家你只需要这一篇博客-史上最全C语言学习资源整理
		
    15. 
						
  15. 判断图片是否为现场照片（Live Photo亦即内含Exif信息）
		
    16. 
						
  16. 静态创意和动态创意_2020年创意工作的5个预测
		
    17. 
						
  17. 打造任何地方都能使用的markdown写作软件：Typora云端化
		
    18. 
						
  18. 判断HTML页面是点击历史返回打开，还是正常跳转打开
		
    19. 
						
  19. Ubuntu 12.04 安装 IQQ
		
    20. 
						
  20. visio如何开启开发工具功能
		
    21. 
		

	


热门文章
	

    
									
  1. SparseTensor
			
    2. 
						
  2. 练习：VTK 四视图显示（三视图+三正交切片）
			
    3. 
						
  3. P4 2.4GHZ CPU(速度)指什么? 次/秒 HZ/S 运算速度
			
    4. 
						
  4. FTX创办人SBF承诺将捐赠高达10亿美元做慈善：为贫困社区创造生存权
			
    5. 
						
  5. 华为机试HJ107：求解立方根
			
    6. 
						
  6. 分享SysWOW64 文件夹
			
    7. 
						
  7. php古诗代码,今日诗词开放接口 - 今日诗词 - 诗词实时智能推荐
			
    8. 
						
  8. Pfsense2.34中文版
			
    9. 
						
  9. Bessie Goes Moo
			
    10. 
						
  10. MP3,AAC,AC3技术比较
			
    11.