Install

Note

This plugin requires VuePress >= 1.0.0, for now you can try it via yarn add vuepress@next -D

yarn add vuepress-plugin-flowchart -D

Usage

// .vuepress/config.js
module.exports = {
  plugins: [
    'flowchart'
  ]
}

Syntax

@flowstart [preset]

<!-- Your flowchart code here. -->

@flowend

vuepress-plugin-flowchart leverages flowchart.js under the hook.

Available presets for now:

  • vue (default)
  • ant

View the current available preset here, feel free to submit your own preset. : )

Start & End

  • [Variable]->start: [Text]
  • [Variable]->end: [Text]
@flowstart
st=>start: Start
e=>end: End

st->e
@flowend

Operation

  • [Variable]->operation: [Text]
@flowstart
process=>operation: Operation
e=>end: End

process->e
@flowend

Inputoutput

  • [Variable]->inputoutput: [Text]
@flowstart
process=>inputoutput: Inputoutput
e=>end: End

process->e
@flowend

Subroutine

  • [Variable]->subroutine: [Text]
@flowstart
process=>subroutine: Subroutine
e=>end: End

process->e
@flowend

Condition

  • [Variable]->condition: [Text]
  • [Variable]([yesText])->[Position]
  • [Variable]([noText])->[Position]
@flowstart
cond=>condition: Process?
process=>operation: Process
e=>end: End

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

Parallel

  • [Variable]->parallel: [Text]
  • [Variable](path1, direction)->[Position]
  • [Variable](path1, direction)->[Position]
@flowstart
para=>parallel: parallel tasks
process=>operation: Process
e=>end: End

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

Showcase

#1 Ordinary process

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

stage1->stage2->stage3
@flowend

#2 Complex process

@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

#3 Ant Preset

@flowstart ant
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
@flowend