用旺司制作免费的在线流程图设计工具软件:Markdown流程图mermaid语言标记使用说明

知识管理 markdown OnceDoc by wx_15926 on 1571296810383


OnceOA旺司知识管理套件的Markdown编辑器,集成了mermaid 流程图、简单几步就可以制作流程图。

代码为 flow 或 mermaid,如:

```flow
```

在flow中填写标记即可,下面是一个简单的示例:

```flow
graph LR
    A((圆形开始)) -- 连线文字 --> B(圆角方框)
    B --> C{是否}
    C ==>|粗线是|D[方形结果1]
    C -.->|虚线否|E[方形结果2]
```

效果如下:

连线文字
粗线是
虚线否
圆形开始
圆角方框
是否
方形结果1
方形结果2

方向

流程图可用 graph 表示, TB 代表从 Top 到 Bottom, 上下布局。 流程方向可用 ---> 表示,示例如下:

```flow
graph TB;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

效果如下:

A
B
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
```

效果如下:

A
B
C
D

连线文字说明

用连续两个标记加文字表示,代码如下:

```flow
graph LR
    A-- 实线 -->B
    A== 加粗 ==>C
    A-. 虚线 .->D
```

效果如下:

实线
加粗
虚线
A
B
C
D

结点

ID+圆角边框

结点可以加上 id[文字] 的形式,以ID代表连接关系,简化流程图绘制。 [ ] 代表方形,()代表圆角边框

```flow
graph LR
      id1[This is the text in the box] --> id2
      id1--> id3(圆角边框文字)
      id3-->id2
```

效果如下:

This is the text in the box
id2
圆角边框文字

圆形结点

圆形结点可以以 ((文字)) 表示。

```flow
graph LR
    id1((This is the text in the circle))
```

效果如下:

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
```
three
two
one
c1
c2
b1
b2
a1
a2

上一篇: Katex数学公式 下一篇: Gantt项目进度图