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

pnpm add flowchart.ts

yarn

yarn add flowchart.ts

npm

npm install flowchart.ts

Then, enable the feature in the .vuepress/config.ts configuration file:

.vuepress/config.ts

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 or no

  Optional direction

  conditionalVar(yes, <direction>)->nextNode1
  conditionalVar(no, <direction>)->nextNode2

• parallel

  Must specify path direction path1, path2, or path3

  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"})

Contributors

pengzhanbo

Changelog

3/5/26, 7:34 AM

View All Changelog

• 9b9f8-style: lint fixon 3/5/26
• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageMermaid

Next pagemarkmap