vuepress-theme-plume/docs/en/guide/chart/flowchart.md

title, createTime, icon, permalink

title	createTime	icon	permalink
flowchart	2025/10/08 19:34:31	f7:flowchart	/en/guide/chart/flowchart/

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.

::: npm-to

npm install flowchart.ts

:::

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

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      flowchart: true, // [!code ++]
    },
  })
})

::: 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

::: demo markdown title="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
```

:::

::: demo markdown title="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
```

:::

::: demo markdown title="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.

::: demo markdown title="Start & End"

```flow
st=>start: Start
e=>end: End

st->e
```

:::

Operation

[Variable]->operation: [Text]

::: demo markdown title="Operation"

```flow
process=>operation: Operation
e=>end: End

process->e
```

:::

Input/Output

[Variable]->inputoutput: [Text]

:::demo markdown title="Input/Output"

```flow
process=>inputoutput: Input/Output
e=>end: End

process->e
```

:::

Subroutine

[Variable]->subroutine: [Text]

::: demo markdown title="Subroutine"

```flow
process=>subroutine: Subroutine
e=>end: End

process->e
```

:::

Condition

• [Variable]->condition: [Text]

• [Variable]([yesText])->[Position]

• [Variable]([noText])->[Position]

::: demo markdown title="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]

::: demo markdown title="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).

• start operation inputoutput subroutine

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