【保姆级图文步骤】VSCode整合Markdown制作思维导图

【图文步骤】VSCode整合Markdown制作思维导图

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是VSCode整合Markdown。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

系列文章总目录，除了当前的vue+boot前后分离此系列外，还包括Python，AI，大模型，游戏，面试等等，系列文章归纳在此：
系列文章—总目录

前言

鉴于目前市面上有很多的思维导图，但是：
各有所需
···有些是网页版本的，功能多，收费。
···有些愿意付费，但是网页版的觉得数据内容不安全（毕竟，你的所有东西都需要发送给服务器，下次登陆，服务器根据不同账号，发送对应的内容）东西是保存在别人数据库的
···有些本地运行的软件，麻烦且功能不熟悉
···等等

所以：功能多，免费，本地使用，最好的选择就可以是，本文章主题：
VSCode整合Markdown

此篇文章仅仅分享主题，VSCode的安装请移步其他文章查阅

一、Markdown插件

VSCode关于Markdown有很多个不同的插件，每一个的作用和功能都不一样

1.Markdown Preview Enhanced
增强的Markdown预览，支持Mermaid等图表
支持的文件格式：.md

最通用：在普通Markdown文件中用代码块画图，实时预览。适合轻度、零散使用。

2.vscode-markmind
Markdown与思维导图双向编辑与同步
支持的文件格式：.md 和 .km

整合度高：专为思维导图设计，可在图形界面和源码间切换，支持导出。适合重度思维导图用户。

3.Markmap
将层级化Markdown实时渲染为思维导图
支持的文件格式：.md 和 .html

视觉化专精：自动将#标题层级转为思维导图，视图交互性好。适合用Markdown做结构化笔记的用户。

4.vscode-mindmap
传统的思维导图编辑器
支持的文件格式：.km

操作直观：像XMind一样点击编辑，可导出为Markdown。适合习惯传统思维导图操作的用户。

5.Foam
Foam 基于Markdown的知识管理与图谱
支持的文件格式：.md

知识网络：侧重于笔记间的双向链接，并生成知识图谱。适合构建个人知识库。

二、Markdown Preview Enhanced

1.安装插件：在VS Code扩展商店搜索并安装 “Markdown Preview Enhanced”。

点击install安装

2.创建Markdown文件：新建一个 .md 文件。

3.直接在md文件里面，用Markdown的语法编辑就好了
到这里就和vscode无关了，就像用vscode写C语言代码,写Python代码或者写vue项目, 本次就用Markdown语法来写

三、markmind

非常纠结，要不要写它
在vsCode商店已经搜索不到Markmind了
查阅官网已经下架，那写它干啥。
因为：它存在了很多年，功能也非常方便好用，用的javaScript及typeScript开发的
可以把Markdown直接变成思维导图，在vsCode里面阅览界面里面:能拖拽，能修改节点,等等等.

所以：我找了一圈，发现还是比较多的，写上了。也侧面说明大家还都是喜欢用markmind，在git或者一些网盘里面:

有安装了Markmind的vsCode文件夹的分享。不同博主的github有很多vsCode，整个下载下来，运行打开，里面就直接有Markmind插件

它长这样:有了之后，创建一个.km后缀的文件，点击就是脑图拖拽

四、Markmap

安装：

写一些Markdown，右边点击对应的图标（open as Markmap）
其他的也能点击，如用默认的Markdown来打开，而不是导图类型

点击之后：
修改：直接在md文本里面改就好了，它会根据你写不同的Markdown语法，来渲染为对应的思维导图
我这里没有截屏：演示 --》 表格 链接 emj表情 数学公式 等等等 其实都是可以的，就是对应的Markdown语法

五、Markdown Preview Mermaid Support

安装，编写代码，格式：

```mermaid mindmaproot((Mermaid思维导图<br>完整功能测试))这里还有三个`结尾 包起来(平台会强制渲染，我只能删除)

正常写：

六、mindmap

搜索及安装：
搜索有很多mindmap相似的，安装这个，别人介绍是一个动图，我故意截屏的这里，看，思维导图，安装这个名字的！！！ 就1000%不会错

创建.km结尾的文件