flowchart
概述
主题支持在文章中嵌入 flowchart 图表。
该功能由 @vuepress/plugin-markdown-chart 提供支持。
配置
主题默认不启用该功能。
你需要在你的项目中安装 flowchart.ts 库。
npm install flowchart.tspnpm add flowchart.tsyarn add flowchart.ts然后在 .vuepress/config.ts 配置文件中，启用该功能：
export default defineUserConfig({
theme: plumeTheme({
markdown: {
flowchart: true,
},
})
})注
以下文档 Fork 自 @vuepress/plugin-markdown-chart, 遵循 MIT 许可证。
语法
<!------- ↓ :preset 是可选的 -->
```flow:preset
<!-- 放置你的流程图代码 -->
```目前可用的预设:
- vue (默认)
- ant
- pie
演示
Vue 主题
Ant 主题
Pie 主题
流程图介绍
节点类型
定义了结点形状。
开始 & 结束
[Variable]->start: [Text]被用于流程开始的第一个节点。 默认文字为
Start.[Variable]->end: [Text]被用于流程结束的最后一个节点。 默认文字为
End.
开始 & 结束
操作
[Variable]->operation: [Text]
操作
输入输出
[Variable]->inputoutput: [Text]
输入输出
子程序
[Variable]->subroutine: [Text]
子程序
条件
[Variable]->condition: [Text][Variable]([yesText])->[Position][Variable]([noText])->[Position]
条件
平行
定义同时开始的多个程序。
[Variable]->parallel: [Text][Variable](path1, direction)->[Position][Variable](path1, direction)->[Position]
平行
链接
连接方式在流程图中节点定义后描述，使用 -> 指定一个节点之间的链接，例如 nodeVar1->nodeVar2->nodeVar3
流程可以被分开:
nodeVar1->nodeVar2
nodeVar2->nodeVar3连接格式定义如下:
<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]
在 [] 中的项是可选的。
方向
以下方向可用，并定义了连接将从节点离开的方向。如果指定符不止一个，则总是最后一个。所有节点都有默认方向，这使其成为可选规范。<direction> 的可选值为:
leftrighttopbottom
节点特定说明符
每个节点变量都有可选的说明符，例如方向，有些变量有特殊的说明符，具体取决于下面定义的节点类型。在 () 中的变量名后添加说明符，并用, 分隔，例如 nodeVar (spec1，spec2)。
startoperationinputoutputsubroutine
可选方向
startVar(<direction>)->nextNodeoperationVar(<direction>)->nextNodeinputoutputVar(<direction>)->nextNodesubroutineVar(<direction>)->nextNodecondition
必需指定
yesorno可选方向
conditionalVar(yes, <direction>)->nextNode1 conditionalVar(no, <direction>)->nextNode2parallel
必需指定路径方向
path1,path2, 或path3可选方向
parallelVar(path1, <direction>)->nextNode1 parallelVar(path2, <direction>)->nextNode2 parallelVar(path3, <direction>)->nextNode3
网址
可以使用 :> 运算符将外部链接添加到节点。
[blank] 指定打开新的页面
st=>start: Start:>http://www.google.com[blank]
e=>end: End:>http://www.yahoo.com建议
文本中可能不应该使用的符号: =>、->、 :>、|、@> 和 :$
如果要在流程图中强调特定路径，则可以另外定义它，如下所示:
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})