使用markdown绘制简单的思维导图
在CSDN等平台中可使用Mermaid来绘制思维导图。那么先简单介绍下Mermaid。Mermaid是一个用于画思维导图、流程图、状态图、时序图、甘特图等图的工具,使用 JavaScript 进行本地渲染。虽然Mermaid暂不支持思维导图的绘制,但是可通过绘制流程图来替代简单的思维导图。
在CSDN等平台中可使用Mermaid来绘制思维导图。那么先简单介绍下Mermaid。Mermaid是一个用于画思维导图、流程图、状态图、时序图、甘特图等图的工具,使用 JavaScript 进行本地渲染。虽然Mermaid暂不支持思维导图的绘制,但是可通过绘制流程图来替代简单的思维导图。
mermaid 基础语法
mermaid的基础语法中,在语法文本中,用mermaid指定语法,然后用 --> 指定前后的关系,graph关键字指定是纵向图还是横向图,TD代表纵向图,LR代表横向图,在箭头前后,的节点上,可以用括号等指定别名,可使用br标签进行换行,如下的代码可以生成的思维导图如下:
```mermaid
flowchart LR
KaTex-->|"ddd"|A[标记 Accents]
A-->撇,估计,均值,向量等写于符号上下的标记
KaTex--> A2((分隔符_Delimiters))
A2 --> 小中大括号,竖杠,绝对值等分隔符的反斜杠写法
A2-->A22["`分开多行
line 2
line 3`"]
KaTex--> 公式组_Enviroments
公式组_Enviroments-->B(.....)
KaTex-->C(想要写中文标点,需要将内容放置在英文引号内部)
```
其他用法
其他形状
可以在节点的别名和内容上用不同的括号表达不同的形状,如上图中的A2((分隔符_Delimiters))这个节点,常用的形状如下:
```mermaid
flowchart TD
a1[带文本矩形]
a2(带文本圆角矩形)
a3>带文本不对称矩形]
b1{带文本菱形}
c1((带文本圆形))
```
箭头上添加文字
可以在箭头后面的节点名称签名用两个竖线(|)加上箭头的文字,如上图中的KaTex–>|“ddd”|A[标记 Accents]这个节点,其中的ddd就是文字的内容
其他详细的用法可以参考:http://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax
后记
个人总结,欢迎转载、评论、批评指正
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)