用代码生成流程图,Markdown的使用方法

前言

通常来说我会使用一些流程图使得对于软件、工具或者行事的操作变得有更好的可理解性,说白了就是方便理解。

使用Windows软件的朋友可能会用Word,Vision此类软件,或者ProcessOn这类工具,那么是否有更好更方便的操作,可以有效提高效率?

比如说,输入代码就可以生成,去除了繁琐的点击操作。
在这里插入图片描述

如何操作

使用Markdown就可以实现这种方法,具体就是使用Flowchart流程图

这部分流程图会使用这样格式来声明这部分是一个流程图的开始

【```mermaid】
【flowchat】

末尾以【```】作为结束

然后是各个声明,这些声明会描述一个框是操作(方框)还是判断(菱形)还是开始或者结束(圆角矩形)

常常用的描述符

  1. 开始和结束:start和e
  2. 执行操作:operation
  3. 判断:condition
  4. 其中判断包含yes和no

举个例子

下面这一段代码,就会生成这样的一个常见的网页登录的流程图

st=>start: 开始

op=>operation: 登录系统
cond1=>condition: 密码是否正确?
fun1=>operation: 找回密码
e=>operation:  手机验证
e2=>condition: 验证码是否正确?
fun2=>end: 登录成功 

st->op->cond1
cond1(yes)->e
cond1(no)->op
e->e2
e2(no)->op
e2(yes)->fun2

在Markdown里面是这样
在这里插入图片描述

Created with Raphaël 2.2.0 开始 登录系统 密码是否正确? 手机验证 验证码是否正确? 登录成功 yes no yes no

当然实际上在描述时候一段就可以完成所有,比如这样:

在这里插入图片描述

Created with Raphaël 2.2.0 开始 测试硬盘 顺序读写速度测试 4K随机读写测试 卸载硬盘

玩的愉快:)

  • 1
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
在VS Code中配置Markdown流程图的流程如下: 1. 首先,确保你已经安装了VS Code编辑器和Markdown插件。可以在VS Code的扩展商店中搜索并安装"Markdown All in One"和"Markdown TOC"插件。 2. 接下来,创建一个新的Markdown文件或打开一个已有的Markdown文件。 3. 安装并启用"Markdown Preview Enhanced"插件。这个插件提供了更多的Markdown功能,包括流程图的支持。 4. 在Markdown文件中,使用流程图的语法来描述流程图。常用的流程图语法有"mermaid"和"PlantUML"。你可以在流程图代码块中使用这些语法,然后在预览中查看生成的流程图效果。 5. 配置Markdown Preview Enhanced插件,使其支持流程图的显示。在VS Code的设置中搜索"Markdown Preview Enhanced",找到相关选项,将其设置为正确的流程图语法("mermaid"或"PlantUML")。 6. 最后,保存Markdown文件并在预览中查看生成的流程图。根据你选择的流程图语法,你可能需要在预览中启用相应的渲染模式。 总结一下,配置Markdown流程图的流程包括安装Markdown插件、安装并启用Markdown Preview Enhanced插件、使用流程图语法编写流程图代码块,并配置预览插件支持流程图的语法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vscode配置markdown,安装插件](https://blog.csdn.net/qq_38074673/article/details/106123101)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值