1. 如何进入作图模式?
三个`(间隔号)+mermaid
```mermaid //然后回车,进入代码快就能够,做思维导图,流程图了
graph TB //用来描述图的方向,typora中都是默认向下的
2. 结点
- 就是graph(图)中每个文本框(或文本块),是图的基本组成。Mermaid 中每个节点都有一个 id,以及节点的文字。
. 常见的有:
id样式 | id含义 |
---|---|
id( ) | 圆角矩形结点(也可以叫圆角矩形框) |
id [ ] | 矩形结点 (默认) |
id(( )) | 圆形结点 |
id{ } | l棱形结点 |
id > ] | 开口向右的旗帜结点 |
id [ < | 开口向左的旗帜结点( 试了一下发现这个不存在) |
id[/\] | 梯形 |
id[\/] | 倒梯形 |
id[\\] | 平行四边形 |
id[//] | 反向平行四边形 |
eg:
3.结点间的线
线的样式 | 含义 |
---|---|
–> | 带箭头的实线(短线越多线越长) |
----> | 中间可以添加文字 |
— | 不带箭头的实线(短线越多线越长) |
— — | 中间可以添加文字 |
- . - | 虚线 (虚线不能延长) |
- . -> | 虚线 (不能延长) |
-.- -.-> | 中间可以添加文字 (不能延长) |
==> | 带箭头的粗线(可延长) |
=== | 粗线 (可延长) |
====> | 中间可以添加文字(可延长) |
====== | 中间可以添加文字(可延长) |
或者使用:A-->|文字|B
在线上添加文字效果一样
4. 思维导图:
什么是思维导图?
每个结点(标题)的命名最好按照一定的规律:
属性值 | 作用 |
---|---|
LR | 让思维导图从左向右分散 |
RL | 让思维导图从右向左分散 |
TB | 让思维导图从上往下分散 |
BT | 让思维导图从下往上分散 |
拓展: | |
LR分别是Left和Right的首字母 | |
TB分别是Top(顶部)和Bottom(底部)的首字母 | |
添加子图: |
subgraph 子图表名称
子图内容
end
5.流程图
什么是流程图?
- 圆角矩形表示“开始”与“结束”;
- 用平行四边形表示输入输出;
- 矩形表示行动方案、普通工作环节用,待执行的程序;
- 菱形表示问题判断或判定(审核/审批/评审)环节;
- 箭头代表工作流方向。
用结点来表示流程图是不能够规范的,首先因为它没有平行四边形,其次它的排版不规范。想规范流程图,需要用标准流程图源码格式
```mermaid
flowchat
id1=>start: 开始框
id2=>operation: 处理框
id3=>condition: 判断框
id4=>subroutine: 子流程
id5=>inputoutput: 输入输出框
id6=>end: 结束框
id1->id2->id3
id3(yes)->id5->id6
//yes\no是规定写法,控制路径
id3(no)->id4(right)->id2
/*right控制到线从id4哪个方向出来到id2(默认是bottom),
除了判断框,其他的都可以用left,right,top,bottom
四个单词来控制线的方向*/
6.饼图
pie %% showData
title 家禽占比
"鸡" : 40
"鸭" : 30
"猪" : 30