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.tsyarn add flowchart.tsnpm install flowchart.tsThen, 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->nodeVar3Connection 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:
leftrighttopbottom
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>)->nextNodeoperationVar(<direction>)->nextNodeinputoutputVar(<direction>)->nextNodesubroutineVar(<direction>)->nextNodecondition
Must specify
yesornoOptional direction
conditionalVar(yes, <direction>)->nextNode1 conditionalVar(no, <direction>)->nextNode2parallel
Must specify path direction
path1,path2, orpath3Optional 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.comRecommendations
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"})