一分钟学会用Markdown绘制Mermaid思维导图
💡什么是 Mermaid 思维导图?
Mermaid 是一款基于文本的图表绘制工具,通过简单的类 Markdown 语法即可生成各种图表。其中思维导图(mindmap)是 Mermaid 在 v10.0.0 版本开始引入的功能,用于快速绘制层级分明、视觉清晰的思维导图。
🎖️Mermaid思维导图的主要特点
- 纯文本定义:无需鼠标拖拽,用缩进和标记描述节点关系。
- 多种节点形状:支持方形、圆角、圆形、六边形、云形、爆炸形等。
- 样式定制:可设置背景色、边框样式,并自动适配不同主题。
- 集成方便:在 WordBN、GitHub、Notion、Obsidian 等众多平台原生支持,或通过在线编辑器实时渲染。
📚Mermaid思维导图的基本语法结构
下图是思维导图渲染效果。(WordBN字远笔记软件)
- 根节点:整个思维导图的中心,通常用`
((内容))`表示为圆形。 - 缩进:使用空格或`
Tab`表示层级关系,同缩进为同级节点。 - 常用节点形状(可省略,默认矩形):
- 内容→ 矩形(无括号)
- [内容]→ 矩形(与默认略有区别,边框更方正)
- (内容)→ 圆角矩形
- ((内容))→ 圆形
- {{内容}}→ 六边形
- 多行文本:使用"第一行`
`第二行"或直接写多行(需用引号包裹)。
🎯完整示例:学习编程的思维导图
以下是一个涵盖多种节点形状和层级的思维导图,展示如何系统地学习编程。
下图是思维导图渲染效果。(WordBN字远笔记软件)
✨Mermaid思维导图渲染效果说明
以上代码会生成一个以“编程学习路线”为中心的思维导图:
- 中心节点为圆形。
- 第一级节点(基础知识、实践方向、学习资源)使用圆角矩形(通过:内容或(内容)均可,这里用:简化写法)。
- 第二级及以下混合使用矩形、菱形、六边形、平行四边形等形状,便于视觉区分不同类型的信息。
- 层级关系通过缩进清晰呈现,每个分支自动环绕中心布局。
🚀Mermaid思维导图使用技巧
- 形状选择建议:
- 核心概念用圆形`
(( ))`
- 分类标题用圆角矩形`
( )`或`:`
- 具体知识点用矩形或方括号`
[ ]`
- 重要难点用爆炸形`
)) ((`或云形`) (`
- 工具/命令用六边形`
{{ }}`
- 核心概念用圆形`
- 样式微调:可添加%%开头的注释,或使用style语句(部分编辑器支持)。
- 复杂导图拆分:如果节点过多,可拆分为多个mindmap图块,或配合click事件(在支持交互的环境中实现跳转)。
✅最后总结
Mermaid 思维导图让结构化的内容可以像代码一样版本管理,非常适合技术笔记、项目规划和学习提纲。
🔸🔸🔚🔸🔸
🧑💻我是`WordBN字远笔记`软件、`C++应用服务器MYCP`开源项目作者。📌关注我,每天花一分钟学一个编程知识。
原文地址: https://www.cveoy.top/t/topic/qGve 著作权归作者所有。请勿转载和采集!



