Markdown系列之Flowchat流程图

一.欢迎来到我的酒馆

        介绍Markdown的Flowchart流程图语法。

目录

    • 一.欢迎来到我的酒馆
    • 二.什么是Flowchart
    • 三.更进一步

二.什么是Flowchart

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

2.2 flowchart语法介绍
语法可以简单概括为两步:
第一步:定义组件

st=>start: 一个圆角矩形组件。表示开始。:冒号后面显示你要在组件里展示的内容。
e=>end: 一个圆角矩形组件,表示结束。op=>operation:一个长方形组件,这个组件的id名为op。
cond=>condition:一个菱形组件,这个组件的id名为cond。
io=>inputoutput:一个平行四边形组件,这个组件的id名为io。
| 后面的是注释

第二步:连接

| 使用 -> 连接各个组件的id名称
st->op->e

在这里插入图片描述

2.3 来看一个简单的例子
markdown ,mermaid代码:

flowchat
st => start: 开始
e => end: 结束|定义一个矩形组件
op => operation: 执行的内容|连接
st -> op -> e
Created with Raphaël 2.3.0 开始 执行的内容 结束

三.更进一步

3.1

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

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->econd2(no, right)->cond3
cond2(yes,bottom)->sub1->econd3(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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/26280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【暑期每日一练】 Epilogue

目录 选择题(1)解析: (2)解析: (3)解析: (4)解析: (5)解析: 编程题题一描述输入描述:输…

ad+硬件每日学习十个知识点(23)23.8.3(LDO 设计实例)(涉及到自控没听懂,学完自控再回来看)

文章目录 1.输入电容的选取(两个,一个大电容,一个小电容)2.输出电容的选取(两个,一个大电容,一个小电容)3.有些LDO需要输出的最小负载电流,所以需要接一个下拉电阻。4. 1…

电影售票后台管理系统快速搭建(优惠券制作+java开源)

为了快速搭建电影售票后台管理系统并实现优惠券制作功能,你可以按照以下步骤进行操作: 1. 确定系统的需求和功能,包括用户管理、影院管理、电影管理、订单管理以及优惠券制作等模块。 2. 选择一款适合的Java开源框架来搭建系统,…

【Megatron-DeepSpeed】张量并行工具代码mpu详解(三):张量并行层的实现及测试

相关博客 【Megatron-DeepSpeed】张量并行工具代码mpu详解(三):张量并行层的实现及测试 【Megatron-DeepSpeed】张量并行工具代码mpu详解(一):并行环境初始化 【Megatron-DeepSpeed】张量并行工具代码mpu详解(二):Collective通信操作的封装ma…

SOME/IP学习笔记1

SOA概念 在SOA中,每个服务就好像我们每一个人在社会中扮演的角色,在对别人提供着服务的同时,同时也享受着别人提供出来的服务,人与人之间,既是彼此独立的,又是需要互相通讯的。服务提供者将功能具象为一组接口,这样使用者就能知道如何调用服务,完成某件事情,得到某个…

Windows下调试UEFI程序:Visual Studio调试

以edk2\MdeModulePkg\Application\HelloWorld这个项目作为调试目标。 1. 使用VS2017建立Makefile工程 VS2017, 新建 project,取名X64dbg_vs。 Visual C > Other > Makefile Project, 注意项目路径为HelloWord程序路径。 随便填写config中的字符串&#xff…

【并发编程】ShenyuAdmin里面数据同步用到的无锁环形队列LMAX Disruptor并发框架

并发,数据同步往往是业务开发中比较重要的部分。 shenyu网关数据同步设计方案图 shenyu官网给出的同步设计方案图如下: 基于事件异步并发框架com.lmax.disruptor 下载下示例代码,跑起来发现,在shenyuAdmin模块里面用到了com.lma…

【2.2】Java微服务:nacos的使用

✅作者简介:大家好,我是 Meteors., 向往着更加简洁高效的代码写法与编程方式,持续分享Java技术内容。 🍎个人主页:Meteors.的博客 💞当前专栏: 深度学习 ✨特色专栏: 知识分享 &…

观测数据建模

观测数据 观测数据 / 样本空间覆盖均匀 psm 观测数据建模 因果模型得到什么样的值 base 0/1 gmv uplift delat 模型可以得到 confounder 的表征,而 NN 可以支持更个性化的结构。在这里给出两种思路: 思路1: 使用树模型生成的 confounder embedd…

React diff 根据相对位置的 diff 算法

文章目录 diff 算法没有 key 时的diff通过 key 的 diff查找需要移动的节点移动节点添加新元素移除不存在的元素缺点 diff 算法 没有 key 时的diff 根据新旧列表的长度进行 diff 公共长度相同的部分直接patch新列表长度>旧列表长度则添加,否则删除 function pa…

Vue3_02 创建Vue3.0工程

1.使用 vue-cli 创建 ## 查看 vue/cli 版本,确保 vue/cli 版本在4.5.0以上 vue -V 或 vue --version## 安装或升级你的 vue/cli npm install -g vue/cli## 创建 vue create vue_test## 启动 cd vue-test npm run serve 2.使用 vite 创建 什么是vite?——新一代…

图像 检测 - DETR: End-to-End Object Detection with Transformers (arXiv 2020)

图像 检测 - DETR: End-to-End Object Detection with Transformers - 端到端目标检测的Transformers(arXiv 2020) 摘要1. 引言2. 相关工作2.1 集预测2.2 Transformers和并行解码2.3 目标检测 3. DETR模型References 声明:此翻译仅为个人学习…

深度学习,计算机视觉任务

目录 计算机视觉任务 1.K近邻算法 2.得分函数 3.损失函数的作用 4.向前传播整体流程 5.反向传播计算方法 计算机视觉任务 机器学习的流程: 数据获取 特征工程 建立模型 评估与应用 计算机视觉: 图像表示:计算机眼中的图像&#…

万界星空科技/免费开源MES系统/免费仓库管理

仓库管理(仓储管理),指对仓库及仓库内部的物资进行收发、结存等有效控制和管理,确保仓储货物的完好无损,保证生产经营活动的正常进行,在此基础上对货物进行分类记录,通过报表分析展示仓库状态、…

开源项目如何贡献代码

以腾讯犀牛鸟开源项目ncnn为例 目录 fork项目仓库 添加远程仓库 同步更新仓库 贡献代码提交新PR PR未merge更新PR fork项目仓库 只需要做一次 到仓库页面点击fork,然后create forkTencent/ncnn: ncnn is a high-performance neural network inference frame…

性能测试浅谈

早期的性能测试更关注后端服务的处理能力。 一个用户去访问一个页面的请求过程,如上图。 数据传输时间 当你从浏览器输入网址,敲下回车,开始... 真实的用户场景请不要忽视数据传输时间,想想你给远方的朋友写信,信件…

龙架构 Arch Linux 发行版发布

导读近日,龙架构 Arch Linux 发行版官方网站宣布结束 beta 状态,正式支持龙架构 (LoongArch)。 Arch Linux 是一种轻量级、可定制、灵活的 Linux 操作系统。作为一款简单、现代、开放的操作系统,Arch Linux 旨在基于 “KISS 原则”&#xff0…

WorkTool企微机器人自动接收图片回传(方案三)

自动接收图片并上传到服务器,仅适用企业微信应用 前言 WorkTool企微机器人可以接收客户群的消息,但接收图片一直是个问题,前面也介绍过两种图片接收方案,但都会影响运行效率,并且不能达到100%的图片接收率&#xff0…

小研究 - Mysql快速全同步复制技术的设计和应用(一)

Mysql半同步复制技术在高性能的数据管理中被广泛采用,但它在可靠性方面却存在不足.本文对半同步复制技术进行优化,提出了一种快速全同步复制技术,通过对半同步数据复制过程中的事务流程设置、线程资源合理应用、批量日志应用等技术手段&#…

[LitCTF 2023]Http pro max plus

打开环境后提示说,只允许在本地访问,本地访问,还是想到了XFF字段 好家伙的,直接被嘲讽,还是了解太少了,都不知道还有没有其他方式可以控制ip地址信息 经过查看wp,得知一种新的方式 Client-IP …