在Markdown中绘制思维导图

强强学习

已于 2022-06-15 20:27:36 修改

阅读量5.9k

点赞数 13

CC 4.0 BY-SA版权

文章标签： markdown

于 2022-04-26 21:25:04 首次发布

本文链接：https://blog.csdn.net/weixin_47532216/article/details/124437435

本文介绍了如何使用Mermaid在CSDN等平台绘制流程图，以此替代简单的思维导图。Mermaid是一个JavaScript本地渲染工具，支持绘制多种图表，如纵向图和横向图。文中详细展示了绘制纵向图和横向图的实例，并提供了其他用法，如文本换行、处理特殊字符以及添加箭头文字的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

本文主要介绍两种基础思维导图：横向图与纵向图。其他语法可参考链接：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
graph LR
KaTex--> A(标记 Accents)
A-->撇,估计,均值,向量等写于符号上下的标记
KaTex--> 分隔符_Delimiters
分隔符_Delimiters-->小中大括号,竖杠,绝对值等分隔符的反斜杠写法
KaTex--> 公式组_Enviroments
公式组_Enviroments-->B(.....)
KaTex-->C(...)
```

2. 横向图

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 TD
    a1[带文本矩形]
    a2(带文本圆角矩形)
    a3>带文本不对称矩形]
    b1{带文本菱形}
    c1((带文本圆形))
~~~

3.4 箭头上添加文字

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