【MarkDown】CSDN Markdown之思维导图mindmap详解

已于 2023-06-19 21:12:04 修改
阅读量2.8k 收藏 9
点赞数 1
分类专栏： 语言-排版 文章标签： 思维导图 Mindmap Markdown
于 2023-06-19 21:10:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenlu5201314/article/details/131293977
版权

文章目录

思维导图(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">
  mindmap
  root((思维导图))
    起源
      悠久的历史
      ::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">
      mindmap
      id[矩形]
    </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
      id(圆角矩形)
    </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
      id((圆形))
    </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
      id))爆炸((
    </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
      id)云朵(
    </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
      id{{六边形}}
    </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 large
          B(节点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">
      mindmap
      id1["`**根节点**
  第二行
  使用Unicode: 🤓`"]
        id2["`狗**骑**猪身上... *很长很长的文本* 自动换行到新的一行`"]
        id3[常规标签仍然有效]
    </pre>
    <script>
  const config = {
    startOnLoad: false,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
  </body>
</html>

在这里插入图片描述

格式：

  • 要使用粗体文本，请在文本前后使用双星号**。
  • 要使用斜体，请在文本前后使用单个星号*。

在传统的字符串中，你需要添加标签，以使文本包裹在节点中。但是，Markdown字符串在文本过长时会自动换行，并允许你通过简单地使用换行符而不是标签来开始新行。

与库或网站资源集成

Mindmap使用实验性的懒加载和异步渲染功能，这些功能在未来可能会发生变化。从9.4.0版本开始，该图表已被包含在mermaid中，但使用懒加载以保持mermaid的大小。这是非常重要的，以便能够添加更多的图表。

你仍然可以使用9.4.0版本之前的方法将mermaid与mindmaps添加到网页中：

<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版本开始，你可以将这段代码简化为：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>

你还可以参考这里的实现来查看如何进行异步加载。

少莫千华
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
obsidian思维导图插件obsidian-enhancing-mindmap
09-07
而今天我们要探讨的是一个能够进一步提升其效能的插件——Obsidian Enhancing Mindmap，它为用户提供了丰富的思维导图功能，让复杂的思考过程变得井然有序。 Obsidian Enhancing Mindmap是专为Obsidian设计的一款...
Python-mindr一个将markdown文件转换为思维导图的R语言包
08-10
在Python开发领域，尽管有许多强大的库和工具，但`mindr`的独特之处在于它专注于Markdown到思维导图的转换。Markdown是一种轻量级的标记语言，被广泛用于编写文档、笔记和个人项目管理，因为它易于阅读和编写。而...
MarkDown制作思维导图
Solititude的博客
10-13 348
如何用 MarkDown 快速制作思维导图，提升效率
Markdown绘制思维导图
热门推荐
我是小O
04-29 4万+
1引言 Markdown是轻量级的标记语言，绘制思维导图不是Markdown的工作而是Markdown解析器（引擎）的工作。 不同的Markdown编辑器或平台使用的Markdown解析器不尽相同，语法存在细微差异。 Markdown编辑器or平台在线本地CSDN简书githubTyporaAtomMou 本文持续更新，致力于总结不同平台下Markwon绘制思维导图的解决方案，也就是写法。 ...
推荐一款轻量级神器，将 Markdown 转为思维导图的开源工具，轻松绘制，解决可视化问题（文末福利）
最新发布
m0_68103666的博客
05-08 2003
这是一款能够将 Markdown 转为思维导图的开源工具，可以看作是 markdown 和 mindmap 的结合，通过使用markmap，你可以很轻松的绘制一幅思维导图。
在Markdown中绘制思维导图
weixin_47532216的博客
04-26 5422
  在CSDN等平台中可使用Mermaid来绘制思维导图。那么先简单介绍下Mermaid。Mermaid是一个用于画思维导图、流程图、状态图、时序图、甘特图等图的工具，使用 JavaScript 进行本地渲染。虽然Mermaid暂不支持思维导图的绘制，但是可通过绘制流程图来替代简单的思维导图。   本文主要介绍两种基础思维导图：横向图与纵向图。其他语法可参考链接：https://mermaidjs.github.io/#/flowchart?id=graph。 ```mermaid graph TD A(工
思维导图mindmap的使用
weixin_43239880的博客
11-01 684
可以根据数据量的大小，动态的增加或者减小高度，而不是在一个固定的宽高里面缩放（固定宽高数据量大时导出无法使用，上面的字很模糊）。主要是因为看起来比较好看，跟平时电脑端的思维导图比较像。数据量大时，撑开盒子，保证清晰度。使用方法：上面的地址有。
VSCode + Markdown = Mindmap
qq_41566483的博客
10-24 358
VSCode 中，使用 markdown 编写 .uml 文件，生成思维导图。
【mermaid】【typora】在typora中使用mermaid绘制思维导图
weixin_70677783的博客
04-07 1396
使用mermaid绘制思维导图
markmap:使用Markmap将Markdown可视化为思维导图
05-03
将Markdown可视化为思维导图。 这个项目受到（ 极大启发。 :backhand_index_pointing_right: 。 :backhand_index_pointing_right: 以获取更多详细信息。 配套 将Markdown转换为markmap使用的数据。 在浏览器...
gitbook-mindmaps:用于在 Markdown 中生成思维导图的 GitBook 插件
08-04
一个用Markdown生成思维导图的GitBook插件，直接看 。 安装 将以下插件添加到您的book.json并运行命令gitbook install { " plugins " : [ " mind-maps " ] } 用法 使用 Markdown 标题语法生成思维导图： ```mind...
思维导图
05-03
NULL 博文链接：https://lingzhi927.iteye.com/blog/2427472
obsidian-mind-map:一个黑曜石插件，用于使用Markmap将降价笔记显示为思维导图
04-21
该存储库包含一个用于的插件，可使用将Markdown注释作为思维导图。 提供了类似的插件。 特征 将您当前的笔记预览为思维导图 当您选择其他窗格时，思维导图预览会更新，类似于“ ，“和“窗格 用法 您可以使用命令...
Markdown 制作思维导图
BiaoYuShiYin的博客
01-14 1304
Markdown 制作思维导图 @(第三方工具)[markmap, 思维导图] 工具介绍 markmap，需要翻墙 markmap 可以将Markdown语法的文本通过思维导图的方式进行可视化 markmap核心符号 #：标题 -：列表 —：分割 在线版 谷歌浏览器访问：https://markmap.js.org/repl/ 离线 采用Visual Studio Code 需要安装插件：markmap-用于思维导图可视化、Markdown Theme Kit-用于预览 MarkMap的优
博客中添加思维导图
qq_43523503的博客
05-05 1068
博客中添加思维导图 1 思维导图软件 Mind Master [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W54LGe1j-1588663013841)(C:\Users\lenovo\Desktop\20200505150905.png)] 2 插入已经绘制好的思维导图 将思维导图导出为图片格式，再使用markdown语句插入图片 ...
有道云脑图 mindmap文件必须会员才能导出
nbspzs的专栏
08-10 1084
可以通过分享下载一个mindmap文件在导入即可
obsidian-enhancing-mindmapcha插件以思维导图模式显示失败问题
lhy350123的博客
09-07 789
想到我之前更新过obsidian软件，就想更新下obsidian-enhancing-mindmapcha插件能不能解决问题，于是去git上搜索了插件，重新放到\.obsidian\plugins目录下，重新安装后，重启，问题解决。路径下，就可以内嵌使用思维导图，这里就不赘诉了。
思维导图基础语法
gfxsx的博客
08-09 68
思维导图：这是目前的实验图。语法和属性可能会在未来版本中更改。除了图标集成是实验部分之外，语法是稳定的。“思维导图是一种图表，用于将信息直观地组织成层次结构，显示整体各个部分之间的关系。它通常是围绕单个概念创建的，在空白页面的中心绘制为图像，其中关联的表示 添加诸如图像、文字和部分文字等想法。主要想法直接与中心概念相关，而其他想法则从这些主要想法中分支出来。” 维基百科。
Markdown使用mermaid画流程图
Kobaayyy的博客
01-14 665
Markdown使用mermaid画图参考 参考 码字不易，如果您觉得有帮助，欢迎点赞和收藏~~
markdown转思维导图
07-27
你可以使用一些工具将Markdown文档转换为思维导图。以下是一些常用的工具： 1. Typora：Typora是一款支持Markdown语法的编辑器，它可以实时预览Markdown文档，并且支持将文档导出为PDF、HTML、图片、Word等格式。你可以在Typora中使用特定的Markdown语法来创建思维导图。 2. MindMaster：MindMaster是一款专业的思维导图软件，它支持将Markdown文档转换为思维导图。你可以在MindMaster中导入Markdown文档，并将其中的标题、列表等元素转换为思维导图中的主题、分支等。 3. Mermaid：Mermaid是一个开源的基于文本的流程图和时序图绘制工具，它支持在Markdown文档中使用特定的语法来创建思维导图。你可以在Markdown文档中使用Mermaid的语法来描述思维导图的结构，然后使用Mermaid渲染器将其转换为可视化的思维导图。 这些工具可以帮助你将Markdown文档转换为思维导图，并且具有不同的功能和特点，你可以根据自己的需求选择适合的工具来使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值