84 lines
2.6 KiB
Markdown
84 lines
2.6 KiB
Markdown
# amWiki 与流程图
|
||
|
||
amWiki 使用 [flowchart.js](https://github.com/adrai/flowchart.js) 进行流程图渲染，它是一款将文本表达式绘制为简单的 svg 流程图的图形库
|
||
流程图代码块和语法高亮类似，不过类型声明须用 `flow` 关键字
|
||
```flow
|
||
//your flow text here
|
||
```
|
||
|
||
## 流程图样例
|
||
代码：
|
||
|
||
```flow
|
||
st=>start: Start :>https://amwiki.xf09.net[blank]
|
||
e=>end: End :>https://amwiki.xf09.net[blank]
|
||
op1=>operation: My Operation
|
||
op2=>operation: Stuff
|
||
sub1=>subroutine: My Subroutine
|
||
cond=>condition: Yes or No? :>https://amwiki.xf09.net[blank]
|
||
c2=>condition: Good idea
|
||
io=>inputoutput: catch something...
|
||
|
||
st->op1(right)->cond
|
||
cond(yes, right)->c2
|
||
cond(no)->sub1(left)->op1
|
||
c2(yes)->io->e
|
||
c2(no)->op2->e
|
||
```
|
||
效果：
|
||
|
||
```flow
|
||
st=>start: Start :>https://amwiki.xf09.net[blank]
|
||
e=>end: End :>https://amwiki.xf09.net[blank]
|
||
op1=>operation: My Operation
|
||
op2=>operation: Stuff
|
||
sub1=>subroutine: My Subroutine
|
||
cond=>condition: Yes or No? :>https://amwiki.xf09.net[blank]
|
||
c2=>condition: Good idea
|
||
io=>inputoutput: catch something...
|
||
|
||
st->op1(right)->cond
|
||
cond(yes, right)->c2
|
||
cond(no)->sub1(left)->op1
|
||
c2(yes)->io->e
|
||
c2(no)->op2->e
|
||
```
|
||
|
||
## 流程图语法介绍
|
||
流程图语法分两个部分，一个是声明元素，一个是定义流程
|
||
|
||
### 声明元素
|
||
语法：
|
||
|
||
tag=>type: content :>url
|
||
|
||
1. `tag` 设置元素名称
|
||
2. `=>` 元素定义符
|
||
2. `type:` 设置元素类型，共分6种：
|
||
- **start**：开始，圆角矩形
|
||
- **end**：结束，圆角矩形
|
||
- **operation**：操作/行动方案，普通矩形
|
||
- **subroutine**：子主题/模块，双边线矩形
|
||
- **condition**：条件判断/问题审核，菱形
|
||
- **inputoutput**：输入输出，平行四边形
|
||
3. `content` 设置元素显示内容，中英均可
|
||
4. `:>url` 设置元素连接，可选，后接 [blank] 可以新建窗口打开
|
||
|
||
提示：注意空格，`=>` 前后都不能接空格；`type:` 后必须接空格；`:>` 是语法标记，中间不能有空格
|
||
|
||
### 定义流程
|
||
语法：
|
||
|
||
tag1(branch,direction)->tag2
|
||
|
||
1. `->` 流程定义符，连接两个元素
|
||
2. `branch` 设置 condition 类型元素的两个分支，有 `yes`/`no` 两个值，其他元素无效
|
||
3. `direction` 定义流程走线方向，有 `left`/`right`/`top`/`bottom` 四个值，所有元素有效，此项配置可选 (ps:此属性容易造成渲染 bug)
|
||
|
||
小提示：
|
||
- 继续注意空格，`->` 前后都不能有空格
|
||
- 由于 condition 类型有两个分支，我们一般遇到 condition 元素就换行书写，比如：
|
||
st->op1-c2
|
||
c2(yes)->io->e
|
||
c2(no)->op2->e
|