How to draw flowchart in Vuepress?

In Vuepress we can use flowchart plugin to draw flowcharts. Here are some examples which found in this plugin’s site.

@flowstart
st=>start: Start
e=>end: End
st->e
@flowend

@flowstart st=>start: Start e=>end: End st->e @flowend

@flowstart
process=>operation: Operation
e=>end: End

process->e
@flowend

@flowstart process=>operation: Operation e=>end: End

process->e @flowend

@flowstart
process=>inputoutput: Inputoutput
e=>end: End

process->e
@flowend

@flowstart process=>inputoutput: Inputoutput e=>end: End

process->e @flowend

@flowstart
process=>subroutine: Subroutine
e=>end: End

process->e
@flowend

@flowstart process=>subroutine: Subroutine e=>end: End

process->e @flowend

@flowstart
cond=>condition: Process?
process=>operation: Process
e=>end: End

cond(yes)->process->e
cond(no)->e
@flowend

@flowstart cond=>condition: Process? process=>operation: Process e=>end: End

cond(yes)->process->e cond(no)->e @flowend

@flowstart
para=>parallel: parallel tasks
process=>operation: Process
e=>end: End

para(path1, bottom)->process->e
para(path2)->e
@flowend

@flowstart para=>parallel: parallel tasks process=>operation: Process e=>end: End

para(path1, bottom)->process->e para(path2)->e @flowend

@flowstart
stage1=>operation: Stage 1
stage2=>operation: Stage 2
stage3=>operation: Stage 3

stage1->stage2->stage3
@flowend

@flowstart stage1=>operation: Stage 1 stage2=>operation: Stage 2 stage3=>operation: Stage 3

stage1->stage2->stage3 @flowend

@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

@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

Pretty cool. 💁‍♂️