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

💡什么是 Mermaid 思维导图?

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

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

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

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

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

  • 根节点:整个思维导图的中心,通常用`((内容))`表示为圆形。
  • 缩进:使用空格或`Tab`表示层级关系,同缩进为同级节点。
  • 常用节点形状(可省略,默认矩形):
    1. 内容→ 矩形(无括号)
    2. (内容)→ 圆角矩形
    3. ((内容))→ 圆形
    4. 内容→ 矩形(与默认略有区别,边框更方正)
    5. {{内容}}→ 六边形
  • 多行文本:使用"第一行<br>第二行"或直接写多行(需用引号包裹)。

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

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

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

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

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

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

🚀Mermaid思维导图使用技巧

  1. 形状选择建议:

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

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

✅最后总结

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


🔸🔸🔚🔸🔸

🧑‍💻我是`WordBN字远笔记`软件、`C++应用服务器MYCP`开源项目作者。

📌关注我,每天花一分钟学一个编程知识。

相关推荐
周永恒4 小时前
AI制作配图
ai·markdown·绘图·工作流·博客园
洛小豆5 小时前
我是 AI 牛马,老板说:做个简单的原生跨平台 Markdown 编辑器
人工智能·ai编程·markdown
Access开发易登软件3 天前
Access 导入 Markdown 表格:把文档里的数据写进表
前端·html·vba·markdown·access开发
古少侠6 天前
多个 Markdown 文档怎么批量转 Word?DS随心转一次性收口
word·markdown·pandoc·批量转换·ds随心转
狂奔的sherry8 天前
VS Code Remote SSH Markdown 预览白屏排障
markdown·vs code·remote ssh
微小冷9 天前
Mermaid画甘特图
运维·markdown·甘特图·mermaid·时间图
艺杯羹9 天前
拒绝图片断链与样式坍塌:出版级富文本转Word与PDF的语义降维与数据固化引擎
markdown·pdf导出·富文本处理·文档引擎·ast解析
qq_369173639 天前
Markdown 文件怎么发布成网页?
markdown·效率工具·实用工具
感谢地心引力15 天前
我用 Doubao-Seed-2.1-pro 做了一个深度融入 AI 功能的本地知识库软件
ai·开源·seed·markdown·豆包
zzzzzz31015 天前
每日一条技术记录:把碎片学习变成可复盘的知识卡片
程序员·markdown·沸点