一分钟学会用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`开源项目作者。

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

相关推荐
ixiaoyang82 天前
ioDraw v3.7.0 发布:AI 助手完成会话化改造,图表生成一次升级
ai·流程图·甘特图·思维导图·绘图软件·1024程序员节·mermaid
用户298698530142 天前
Python 实现 Markdown 与 Word 文档互转
python·api·markdown
weixin_416660074 天前
千问回答转 Word 后,表格和公式是真能编辑,还是看起来像?
word·markdown·千问
stereohomology6 天前
外挂的不同表现形式
人工智能·markdown·所见即所得
stereohomology7 天前
在markdown编辑器中所见即所得修改表格【概念】
人工智能·markdown·概念·所见即所得·表格编辑
用户298698530148 天前
在 React 中使用 JavaScript 将 Markdown 转换为 PDF
javascript·react.js·markdown
stereohomology8 天前
外挂可能是用AI工具自定义solomd插件和主题适合的方式
人工智能·markdown·薅羊毛·solomd·外挂新特性
jearry13 天前
一个编辑器两个内核:Markdown 实时视图与源码视图并存时的竞态、光标锚点与 PDF 导出
windows·markdown
FungLeo13 天前
成为全栈·Flutter App 篇·Flutter Markdown 阅读器:支持范围与渲染边界
flutter·markdown·dart·代码高亮·成为全栈·移动阅读
飞塔老梅子14 天前
21. PDF文件转换成Markdown格式 ❀ 老梅子学AI
pdf·markdown·转换·mineru·docling