【mermaid】01 typora中使用流程图
2018-09-07 本文已影响0人
境与界
一、简介
Generation of diagrams and flowcharts from text in a similar manner as markdown.
网址：https://mermaidjs.github.io/
二、流程图 - 基本语法
image
1、图形
//该语句声明了一个新图形和图形布局的方向。
graph TD
开始 --> 结束
方向是：
- TB - 从上到下
- BT - 从下到上
- RL - 从右到左
- LR - 从左到右
- TD - 与TB相同
image
2、节点和形状
- （1）节点
默认节点就是默认的内容
graph LR
start
image
- （2）带有文本的节点
graph LR
start[开始]
image
- （3）具有圆边的节点
graph LR
start(开始)
image
- （4）圆形的节点
graph LR
start((开始))
image
- （5）非对称形状的节点
graph LR
start>开始]
image
- （6）菱形节点
graph LR
start{开始}
image
3、节点之间的连接
- （1）带箭头的连接
graph LR
A --> B
image
- （2）没有箭头的连接
graph LR
A --- B
image
- （3）连接上的文字
graph LR
A-- 连接上的文字 ---B
或者
graph LR
A---|连接上的文字|B
image
- （4）带箭头和文字的连接
graph LR
A-->|带箭头和文字的连接|B
或者
graph LR
A-- 带箭头和文字的连接 -->B
image
- （5）虚线连接
graph LR
A-.->B
image
- （6）带文字的虚线连接
graph LR
A-. 带文字的虚线连接 .-> B
image
- （7）粗连接
graph LR
A ==> B
image
- （8）带文本的粗连接
graph LR
A == 带文本的粗连接 ==> B
image
- （9）破坏语法的特殊字符
可以将文本放在引号内以便渲染更麻烦的字符
graph LR
id1["破坏语法的特殊字符!"]
image
- （10） 实体代码转义字符
graph LR
A["这里有个引号#quot;"] -->B["特殊字符:#9829;"]
image
4、子图
语法：
subgraph title
graph definition
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
image
5、样式链接
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
image
6、对fontawesome的基本支持
图标通过语法fa：#icon class name＃来获取
graph TD
B["fa:fa-twitter 和平"]
B-->C[fa:fa-ban 禁止]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro 也许?);
image
