在CSDN等平台中可使用Mermaid来绘制思维导图。那么先简单介绍下Mermaid。Mermaid是一个用于画思维导图、流程图、状态图、时序图、甘特图等图的工具，使用 JavaScript 进行本地渲染。虽然Mermaid暂不支持思维导图的绘制，但是可通过绘制流程图来替代简单的思维导图。

文章目录

1. 纵向图
2. 横向图
3. 其他用法
- 3.1 文本换行
- 3.2 文本中包含空格或者其他特殊符号
- 3.3 其他形状
- 3.4 箭头上添加文字

本文主要介绍两种基础思维导图：横向图与纵向图。其他语法可参考链接：https://mermaidjs.github.io/#/flowchart?id=graph。

1. 纵向图

如果内容中包括空格等特殊字符，则可通过添加别名(内容)的方法来书写。
mermaid graph TD A(工业用地效率)-->B1(土地利用强度) A-->B2(土地经济效益) B1-->C1(容积率) B1-->C2(建筑系数) B1-->C3(亩均固定资本投入) B2-->D1(亩均工业产值) B2-->D2(亩均税收)

#mermaid-svg-SLw0w9r3hTC1Iuxf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .error-icon{fill:#552222;}#mermaid-svg-SLw0w9r3hTC1Iuxf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SLw0w9r3hTC1Iuxf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .marker.cross{stroke:#333333;}#mermaid-svg-SLw0w9r3hTC1Iuxf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SLw0w9r3hTC1Iuxf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .cluster-label text{fill:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .cluster-label span{color:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .label text,#mermaid-svg-SLw0w9r3hTC1Iuxf span{fill:#333;color:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .node rect,#mermaid-svg-SLw0w9r3hTC1Iuxf .node circle,#mermaid-svg-SLw0w9r3hTC1Iuxf .node ellipse,#mermaid-svg-SLw0w9r3hTC1Iuxf .node polygon,#mermaid-svg-SLw0w9r3hTC1Iuxf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SLw0w9r3hTC1Iuxf .node .label{text-align:center;}#mermaid-svg-SLw0w9r3hTC1Iuxf .node.clickable{cursor:pointer;}#mermaid-svg-SLw0w9r3hTC1Iuxf .arrowheadPath{fill:#333333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-SLw0w9r3hTC1Iuxf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-SLw0w9r3hTC1Iuxf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-SLw0w9r3hTC1Iuxf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-SLw0w9r3hTC1Iuxf .cluster text{fill:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf .cluster span{color:#333;}#mermaid-svg-SLw0w9r3hTC1Iuxf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-SLw0w9r3hTC1Iuxf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

工业用地效率

土地利用强度

土地经济效益

容积率

建筑系数

亩均固定资本投入

亩均工业产值

亩均税收

```mermaid
graph LR
KaTex--> A(标记 Accents)
A-->撇,估计,均值,向量等写于符号上下的标记
KaTex--> 分隔符_Delimiters
分隔符_Delimiters-->小中大括号,竖杠,绝对值等分隔符的反斜杠写法
KaTex--> 公式组_Enviroments
公式组_Enviroments-->B(.....)
KaTex-->C(...)
```

2. 横向图

#mermaid-svg-ud6Jf8IDJaPAzLM9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .error-icon{fill:#552222;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .marker.cross{stroke:#333333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .cluster-label text{fill:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .cluster-label span{color:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .label text,#mermaid-svg-ud6Jf8IDJaPAzLM9 span{fill:#333;color:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .node rect,#mermaid-svg-ud6Jf8IDJaPAzLM9 .node circle,#mermaid-svg-ud6Jf8IDJaPAzLM9 .node ellipse,#mermaid-svg-ud6Jf8IDJaPAzLM9 .node polygon,#mermaid-svg-ud6Jf8IDJaPAzLM9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .node .label{text-align:center;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .node.clickable{cursor:pointer;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .arrowheadPath{fill:#333333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .cluster text{fill:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 .cluster span{color:#333;}#mermaid-svg-ud6Jf8IDJaPAzLM9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ud6Jf8IDJaPAzLM9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

KaTex

标记 Accents

撇,估计,均值,向量等写于符号上下的标记

分隔符_Delimiters

小中大括号,竖杠,绝对值等分隔符的反斜杠写法

公式组_Enviroments

.....

...

3. 其他用法

3.1 文本换行

可使用br标签：<br/>进行换行。

3.2 文本中包含空格或者其他特殊符号

中括号内双引号表示，例如：

root-->Generic["Generic (organisational)  <br/>Domains <br/> (e.g. .com, .edu, .gov, .net, org)"]

3.3 其他形状

~~~mermaid
graph TDa1[带文本矩形]a2(带文本圆角矩形)a3>带文本不对称矩形]b1{带文本菱形}c1((带文本圆形))
~~~

3.4 箭头上添加文字

~~~mermaid
graph TD
b--> |"argmax(output)"|result["breathing/cough"]

在Markdown中绘制思维导图相关推荐

CSDN中使用Mermaid绘制思维导图
CSDN中使用Mermaid绘制思维导图如果想绘制更加美观的思维导图,可以参考具体Mermaid语法: MerMaid参考文档
puml绘制思维导图_如何用ProcessOn画出漂亮的思维导图
说到绘制思维导图,很多人可能都知道XMind,但不一定了解ProcessOnProcessOn - 免费在线作图,实时协作,总以为后者绘制流程图很强大,殊不知其在思维导图方面也有很强大的功能. 好工具 ...
分析思维导图与绘制思维导图方法介绍
每个人在生活中都会遇到很多形形×××的问题,面对这些问题我们要积极解决不要消沉的对待问题,在面对问题时我们都要解决问题的思维,这样事情就会得到好的解决,我所了解的思维导图就是一个很好的工具,可以将正确 ...
思维导图一定要用计算机来完成吗,计算机绘制思维导图有什么优势
思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像 ...
puml绘制思维导图_定制工作计划有哪些操作，4款工作思维导图模板助你效率蹭蹭上涨...
思维导图可以用在工作中的很多场合,比较常见的就是利用思维导图对工作做计划,利用思维导图总结工作中的难题,利用思维导图对自身知识储备量进行分析等用处,可以保证我们思维清晰目标明确.下面为大家分享几款工作 ...
puml绘制思维导图_思维导图的使用方法和技巧
思维导图的表达方式和书写方式不一样,思维导图是以图形的归纳方式表达信息的,虽然思维导图中也有很多字.但是这些字都是依附图形的,没有图形的支撑再多的词汇都是没有思想的,都是单独成立的,思维导图主要是以图 ...
项目思维导图软件测试分析,在软件测试中使用思维导图技术
我们的大脑比书面文字更能处理和回忆视觉效果.视觉图像能够以描述性词语无法描述的方式带来快速的清晰度和理解.思维导图是利用这个事实来形象化地组织和呈现信息的工具. 思维导图软件测试思维导图是一个想法或 ...
如何使用思维导图做计划？这样绘制思维导图的方法你使用过吗？
用思维导图做计划确实是比较快捷高效的,不仅带来了帮助,还给大家的工作,生活,学习等带来了很多乐趣,下面结合小编应用思维导图的经历给大家讲解绘制思维导图做计划的操作技巧,希望对大家有所帮助. 绘制工具- ...
用计算机软件绘制思维导图和手绘思维导图,原来手绘思维导图的好处这么多，你还在用软件画导图吗？...
原标题:原来手绘思维导图的好处这么多,你还在用软件画导图吗? 思维导图在快速阅读和记忆训练中具有重要作用.通常能否手绘思维导图成为了是否学会思维导图的标志. 有些初学者会说,现在科技发展了,有很多思维 ...
学计算机的思维导图,用计算机绘制思维导图的几大优势
相信很多人绘制思维导图还是用彩笔和白纸来完成的,但如今已经是一个信息科技化的时代,我们不妨学习使用计算机来绘制思维导图,可以预见,未来的思维导图必定会由传统的手绘转变为智能化.自动化的计算机绘图时代. ...

在Markdown中绘制思维导图