OnceOA旺司知识管理套件的Markdown编辑器,集成了mermaid 流程图、简单几步就可以制作流程图。
代码为 flow 或 mermaid,如:
```flow
```
在flow中填写标记即可,下面是一个简单的示例:
```flow
graph LR
A((圆形开始)) -- 连线文字 --> B(圆角方框)
B --> C{是否}
C ==>|粗线是|D[方形结果1]
C -.->|虚线否|E[方形结果2]
```
效果如下:
方向
流程图可用 graph 表示, TB 代表从 Top 到 Bottom, 上下布局。 流程方向可用 ---> 表示,示例如下:
```flow
graph TB;
A-->B;
A-->C;
B-->D;
C-->D;
```
效果如下:
OnceDoc 的流程图为了方便打印,使用了不带颜色的渲染主题。除了 TB外,还有如下方向
TB - top bottom
BT - bottom top
RL - right left
LR - left right
TD - 同 TB
连线类型
普通连线用 -- 表示
加精连续用 == 表示
虚线连线用 -.- 表示(中间加个点)
```flow
graph LR
A-->B
A==>C
A-.->D
```
效果如下:
连线文字说明
用连续两个标记加文字表示,代码如下:
```flow
graph LR
A-- 实线 -->B
A== 加粗 ==>C
A-. 虚线 .->D
```
效果如下:
结点
ID+圆角边框
结点可以加上 id[文字] 的形式,以ID代表连接关系,简化流程图绘制。 [ ] 代表方形,()代表圆角边框
```flow
graph LR
id1[This is the text in the box] --> id2
id1--> id3(圆角边框文字)
id3-->id2
```
效果如下:
圆形结点
圆形结点可以以 ((文字)) 表示。
```flow
graph LR
id1((This is the text in the circle))
```
效果如下:
不对称结点
可以使用 id > 文字描述 ] 来表示。
```flow
graph LR
id1>边框中文字]
```
效果如下:
菱形节点
可以使用 { 文字 } 来表示
```flow
graph LR
id1{文字描述}
```
效果如下:
子图形
用subgraph表示,子图形会在方框中写入。
subgraph title
graph definition
end
示例如下:
```flow
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
上一篇: Katex数学公式 | 下一篇: Gantt项目进度图 |