vuepress-theme-plume/skills/vuepress-plume-markdown/resources/flowchart.md

Flowchart

The theme supports embedding flowchart diagrams within articles.

Configuration

Enable the feature in .vuepress/config.ts:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      flowchart: true,
    },
  })
})

You also need to install the flowchart.ts library:

npm install flowchart.ts

Syntax

Use the flow code block with an optional preset (default vue, ant, pie).

```flow:preset
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
```