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
|