flowchart
About 805 wordsAbout 3 min
2025-10-08
Overview
The theme supports embedding flowchart diagrams within articles.
This feature is powered by @vuepress/plugin-markdown-chart.
Configuration
This feature is disabled by default in the theme.
You need to install the flowchart.ts library in your project.
pnpm add flowchart.ts
yarn add flowchart.ts
npm install flowchart.ts
Then, enable the feature in the .vuepress/config.ts
configuration file:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
flowchart: true,
},
})
})
Note
The following documentation is forked from @vuepress/plugin-markdown-chart, licensed under MIT.
Syntax
<!------- ↓ :preset is optional -->
```flow:preset
<!-- Place your flowchart code here -->
```
Currently available presets:
- vue (default)
- ant
- pie
Demo
Vue Theme
```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: Operation 1|past
op2=>operation: Operation 2|current
sub1=>subroutine: Subroutine|invalid
cond=>condition: Yes/No?|approved:>http://www.google.com
c2=>condition: Condition 2|rejected
io=>inputoutput: Process input...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
Ant Theme
```flow:ant
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: Operation 1|past
op2=>operation: Operation 2|current
sub1=>subroutine: Subroutine|invalid
cond=>condition: Yes/No?|approved:>http://www.google.com
c2=>condition: Condition 2|rejected
io=>inputoutput: Process input...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
Pie Theme
```flow:pie
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: Operation 1|past
op2=>operation: Operation 2|current
sub1=>subroutine: Subroutine|invalid
cond=>condition: Yes/No?|approved:>http://www.google.com
c2=>condition: Condition 2|rejected
io=>inputoutput: Process input...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
Flowchart Introduction
Node Types
Define node shapes.
Start & End
[Variable]->start: [Text]
Used for the first node in the flowchart. Default text is
Start
.[Variable]->end: [Text]
Used for the last node in the flowchart. Default text is
End
.
Start & End
```flow
st=>start: Start
e=>end: End
st->e
```
Operation
[Variable]->operation: [Text]
Operation
```flow
process=>operation: Operation
e=>end: End
process->e
```
Input/Output
[Variable]->inputoutput: [Text]
Input/Output
```flow
process=>inputoutput: Input/Output
e=>end: End
process->e
```
Subroutine
[Variable]->subroutine: [Text]
Subroutine
```flow
process=>subroutine: Subroutine
e=>end: End
process->e
```
Condition
[Variable]->condition: [Text]
[Variable]([yesText])->[Position]
[Variable]([noText])->[Position]
Condition
```flow
cond=>condition: Execute operation?
process=>operation: Operation
e=>end: End
cond(yes)->process->e
cond(no)->e
```
Parallel
Define multiple processes that start simultaneously.
[Variable]->parallel: [Text]
[Variable](path1, direction)->[Position]
[Variable](path1, direction)->[Position]
Parallel
```flow
para=>parallel: Parallel tasks
process=>operation: Operation
e=>end: End
para(path1, bottom)->process->e
para(path2)->e
```
Connections
Connections are described after node definitions in the flowchart, using ->
to specify links between nodes, e.g., nodeVar1->nodeVar2->nodeVar3
Flows can be split:
nodeVar1->nodeVar2
nodeVar2->nodeVar3
Connection format is defined as:
<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]
Items in []
are optional.
Directions
The following directions are available and define which direction the connection will leave the node. If more than one specifier is present, the last one takes precedence. All nodes have default directions, making this an optional specification. Available values for <direction>
are:
left
right
top
bottom
Node-specific Specifiers
Each node variable has optional specifiers, such as direction, and some variables have special specifiers depending on the node type defined below. Add specifiers after the variable name in ()
separated by ,
, e.g., nodeVar (spec1, spec2)
.
startoperationinputoutputsubroutine
Optional direction
startVar(<direction>)->nextNode
operationVar(<direction>)->nextNode
inputoutputVar(<direction>)->nextNode
subroutineVar(<direction>)->nextNode
condition
Must specify
yes
orno
Optional direction
conditionalVar(yes, <direction>)->nextNode1 conditionalVar(no, <direction>)->nextNode2
parallel
Must specify path direction
path1
,path2
, orpath3
Optional direction
parallelVar(path1, <direction>)->nextNode1 parallelVar(path2, <direction>)->nextNode2 parallelVar(path3, <direction>)->nextNode3
URLs
External links can be added to nodes using the :>
operator.
[blank]
specifies opening in a new page
st=>start: Start:>http://www.google.com[blank]
e=>end: End:>http://www.yahoo.com
Recommendations
Symbols that should probably not be used in text: =>
, ->
, :>
, |
, @>
, and :$
To emphasize a specific path in the flowchart, you can additionally define it as follows:
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})