Markdown系列之Flowchat流程图

一.欢迎来到我的酒馆

介绍Markdown的Flowchart流程图语法。

目录

二.什么是Flowchart

2.1 Flowchart是一款基于javascript的工具,使用它可以用代码创建简单的流程图。具体信息可以查看flowchart官网:http://flowchart.js.org/

2.2 flowchart语法介绍

语法可以简单概括为两步:

第一步:定义组件

c 复制代码
st=>start: 一个圆角矩形组件。表示开始。:冒号后面显示你要在组件里展示的内容。
e=>end: 一个圆角矩形组件,表示结束。


op=>operation:一个长方形组件,这个组件的id名为op。
cond=>condition:一个菱形组件,这个组件的id名为cond。
io=>inputoutput:一个平行四边形组件,这个组件的id名为io。
| 后面的是注释

第二步:连接

css 复制代码
| 使用 -> 连接各个组件的id名称
st->op->e

2.3 来看一个简单的例子

markdown ,mermaid代码:

c 复制代码
flowchat
st => start: 开始
e => end: 结束

|定义一个矩形组件
op => operation: 执行的内容

|连接
st -> op -> e

Created with Raphaël 2.3.0 开始 执行的内容 结束

三.更进一步

3.1

c 复制代码
flowchat
st=>start: 开始
e=>end: 结束
op1=>operation: 这是一个矩形
sub1=>subroutine: 这是一个子程序组件
cond=>condition: 这是一个判断语句
io=>inputoutput: 这是一个平行四边形


st->op1->cond
cond(yes)->io->e
cond(no)->sub1->e

cond是一个菱形组件的id名,菱形组件通常用来做判断语句。

cond(yes) 表示当菱形里面的判断语句为true时,执行流程。

cond(no)表示当菱形里面的判断语句为false时
Created with Raphaël 2.3.0 开始 这是一个矩形 这是一个判断语句 这是一个平行四边形 结束 这是一个子程序组件 yes no

3.2

c 复制代码
flowchat
st=>start: 开始
e=>end: 结束
op1=>operation: 这是一个矩形
op2=>operation: 这是一个矩形
sub1=>subroutine: 这是一个子程序组件
cond1=>condition: 这是一个菱形组件
cond2=>condition: 这是一个菱形组件
cond3=>condition: 这是一个菱形组件
io1=>inputoutput: 这是一个平行四边形,输出
io2=>inputoutput: 这是一个平行四边形,输出

st->op1(right)->cond1
cond1(no, right)->cond2
cond1(yes, bottom)->io1->e

cond2(no, right)->cond3
cond2(yes,bottom)->sub1->e

cond3(no, right)->op2->e
cond3(yes, bottom)->io2->e

op1(right)表示从这个组件的右边开始连接。

cond1(no, right)表示当condition组件为no时,从右边开始连接。

cond1(yes, bottom)表示当condition组件为yes时,从组件的底部开始连接。
Created with Raphaël 2.3.0 开始 这是一个矩形 这是一个菱形组件 这是一个平行四边形,输出 结束 这是一个菱形组件 这是一个子程序组件 这是一个菱形组件 这是一个平行四边形,输出 这是一个矩形 yes no yes no yes no

相关推荐
shenyan~5 小时前
关于 栈帧变化完整流程图(函数嵌套)
流程图
<花开花落>13 天前
AI 辅助生成 Mermaid 流程图
ai·流程图·mermaid·tool
晓华-warm14 天前
Warm-Flow发布1.7.4, 设计器和流程图优化
java·中间件·流程图·组件·flowable·工作流·activities
邪恶马铃薯16 天前
Deepseek+墨刀,1min快速生成流程图!
流程图·墨刀
lgldl16 天前
AI自动生成复杂架构图,流程图,思维导图
人工智能·ai·流程图
蓝爱人16 天前
Vue3中使用 Vue Flow 流程图方法
javascript·vue.js·流程图
打码人的日常分享19 天前
智慧园区建设资料合集(Wordppt原件)
大数据·物联网·流程图·智慧城市·制造
小马爱打代码24 天前
计算机系统设计:E-R图、类图、时序图、功能结构图、流程图、用例图、架构图
流程图
꧁༺摩༒西༻꧂25 天前
DeepSeek生成流程图
流程图
斯内科25 天前
C#使用MindFusion.Diagramming框架绘制流程图(3):加权图的最短路径算法
流程图