一分钟学会用Markdown绘制Mermaid思维导图

💡什么是 Mermaid 思维导图?

Mermaid 是一款基于文本的图表绘制工具,通过简单的类 Markdown 语法即可生成各种图表。其中思维导图(mindmap)是 Mermaid 在 v10.0.0 版本开始引入的功能,用于快速绘制层级分明、视觉清晰的思维导图。

🎖️Mermaid思维导图的主要特点

  • 纯文本定义:无需鼠标拖拽,用缩进和标记描述节点关系。
  • 多种节点形状:支持方形、圆角、圆形、六边形、云形、爆炸形等。
  • 样式定制:可设置背景色、边框样式,并自动适配不同主题。
  • 集成方便:在 WordBN、GitHub、Notion、Obsidian 等众多平台原生支持,或通过在线编辑器实时渲染。

📚Mermaid思维导图的基本语法结构

下图是思维导图渲染效果。(WordBN字远笔记软件)

  • 根节点:整个思维导图的中心,通常用`((内容))`表示为圆形。

  • 缩进:使用空格或`Tab`表示层级关系,同缩进为同级节点。

  • 常用节点形状(可省略,默认矩形):

    1. 内容→ 矩形(无括号)
    1. 内容\]→ 矩形(与默认略有区别,边框更方正)

    2. (内容)→ 圆角矩形

    1. ((内容))→ 圆形
    1. {{内容}}→ 六边形
  • 多行文本:使用"第一行`<br>`第二行"或直接写多行(需用引号包裹)。


🎯完整示例:学习编程的思维导图

以下是一个涵盖多种节点形状和层级的思维导图,展示如何系统地学习编程。

下图是思维导图渲染效果。(WordBN字远笔记软件)

✨Mermaid思维导图渲染效果说明

以上代码会生成一个以"编程学习路线"为中心的思维导图:

  • 中心节点为圆形。
  • 第一级节点(基础知识、实践方向、学习资源)使用圆角矩形(通过:内容或(内容)均可,这里用:简化写法)。
  • 第二级及以下混合使用矩形、菱形、六边形、平行四边形等形状,便于视觉区分不同类型的信息。
  • 层级关系通过缩进清晰呈现,每个分支自动环绕中心布局。

🚀Mermaid思维导图使用技巧

  1. 形状选择建议:

    • 核心概念用圆形`(( ))`
    • 分类标题用圆角矩形`( )`或`:`
    • 具体知识点用矩形或方括号`[ ]`
    • 重要难点用爆炸形`)) ((`或云形`) (`
    • 工具/命令用六边形`{{ }}`
  2. 样式微调:可添加%%开头的注释,或使用style语句(部分编辑器支持)。

  3. 复杂导图拆分:如果节点过多,可拆分为多个mindmap图块,或配合click事件(在支持交互的环境中实现跳转)。

✅最后总结

Mermaid 思维导图让结构化的内容可以像代码一样版本管理,非常适合技术笔记、项目规划和学习提纲。


🔸🔸🔚🔸🔸

🧑‍💻我是`WordBN字远笔记`软件、`C++应用服务器MYCP`开源项目作者。
📌关注我,每天花一分钟学一个编程知识。

相关推荐
何雷 — 智能网联汽车2 天前
Harness Engineering学习七 —— AGENTS.md文件编写的最佳实践
markdown·最佳实践·harness·agents.md·智能体编程
REDcker4 天前
个人博客网站建设指南 Markdown资产化与静态站选型部署
前端·后端·博客·markdown·网站·资产·建站
secondyoung5 天前
Markdown数学公式语法速查手册
算法·编辑器·markdown·latex
喝凉白开都长肉的大胖子5 天前
markdown中如何将一部分文字的颜色标红,将另一部分文字高亮,另一部分文字字号放大,其他文字正常显示
markdown
20YC编程社区6 天前
一分钟了解什么是时序图,并学会用mermaid绘制时序图
markdown·mermaid
不剪发的Tony老师8 天前
Tolaria:一款面向AI时代的知识管理工具
markdown·知识管理
20YC编程社区13 天前
一分钟学会绘制Mermaid流程图
流程图·markdown·mermaid流程图
天恩软件16 天前
一分钟学会绘制Mermaid流程图
markdown
夜魔00917 天前
Dify插件 Markdown Exporter 3.6.9离线安装包制作
markdown·exporter·dify·离线安装·dify 1.13.3·3.6.9·内网安装