流程图支持

Mr.Hope ... Markdown
小于 1 分钟

# 流程图支持

让你的 VuePress 站点中的 Markdown 文件支持流程图。

# 配置



 

 
 



module.exports = {
  themeConfig: {
    markdown: {
      // 启用流程图功能
      flowchart: true,
    },
  },
};
1
2
3
4
5
6
7
8

# 语法

@flowstart [preset]

<!-- 放置你的流程图代码 -->

@flowend
1
2
3
4
5

目前可用的预设:

  • vue(默认)
  • ant

# 演示

@flowstart
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
@flowend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 流程图介绍

详见 流程图介绍