写代码生成流程图

我们在写文档,博客的时候,一般都会使用markdown语法,最常见的就是一些github开源项目的README。有时候会去画一些流程图,例如使用process.on或者xmind等第三方网站,然后截图插入到文档中。

今天我们介绍一种使用代码直接生成的方式,那就是mermaid,官网[1]。

相比于截图的方式,这种方式避免了变动的时候要重新去截图上传。试了一下在掘金写文章可以直接使用这种方式。

图片

并且还可以直接在vscode等编辑器中写代码随时预览,不过要装个mermaid的vscode扩展插件。

图片

话不多说,以下使用typora牛刀小试一把。

流程图

graph TBA(第一步) --> B[第二步]B[第二步] --> C{条件判断}C{条件判断} -- 是 --> d[处理逻辑]C{条件判断} -- 否 --> e[结束]d[处理业务逻辑] --> e(结束)

图片

流程图

时序图

sequenceDiagramparticipant A as 张三participant B as 李四A ->> B: How are you?Note left of A: 注释B -->> A: I'm Fine, Thank you.Note right of B: 注释A -x B: bye.

图片

时序图

甘特图

gantttitle 工作计划dateFormat  YYYY-MM-DDsection 第一个项目第一个需求     :2023-01-01, 10d第二个需求     :20dsection 第二个项目第一个需求     :2023-01-08, 12d第二个需求     :20d

图片

甘特图

饼图

pietitle 这是标题"哈哈" : 30"呵呵" : 40"哼哼" : 20"嘿嘿" : 10

图片

饼图

好了,就介绍这么几个,都是简单用法,还可以实现更复杂的图,但是用法也更复杂,有兴趣自己去官网摸索吧~~

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

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

相关文章

分布式搜索引擎Elasticsearch

一、Elasticsearch介绍 1.Elasticsearch产生背景 大数据量的检索NoSql: not only sql,泛指非关系型的数据库Nginx的7层负载均衡和4层负载均衡2.Elasticsearch是什么 一个基于Lucene的分布式搜索和分析引擎,一个开源的高扩展的分布式全文检索引擎 Elasticsearch使用Java开发…

一次ES检索的性能优化经验记录

优化功能: 统一检索能力,为各服务所调用。 该接口并发压力大,压测效果不理想。 初步2k线程两台压测机预发环境压测结果两pod下为400qps左右,单pod 平均qps200,响应时间在五分钟之后达到了峰值,平响达到几十秒开外。 压…

跨境电商引流之Reddit营销,入门保姆级攻略

在当今竞争激烈的在线市场中,企业不断寻求新的方法来加强其数字营销工作。Reddit 是最受欢迎的社交媒体平台之一,为企业提供了巨大的潜力,可以通过引人入胜且相关的内容来接触目标受众。然而,将 Reddit 用于营销目的需要仔细考虑某…

企业专线成本高?贝锐蒲公英轻松实现财务系统远程访问

在办公及信息系统领域,许多企业纷纷采用金蝶等财务管理软件来提升运营效率。以某食品制造企业为例,该企业总部位于广州,并拥有湖北仙桃工厂、广州从化工厂和湖南平江工厂三大生产基地。为提高管理效率,该企业在广州总部局域网内部…

游戏社区-搭建的目的和意义是什么

在游戏社区中,用户的活跃度指标是至关重要的,因此在必要时,我们会进行指标转化,以丰富的内容形式来促进用户的活跃度;作为一个垂直社区,我们可以通过聚合和培养一批游戏KOL,建立用户之间的紧密联…

成都瀚网科技:抖音上线地方方言自动翻译功能

为了让很多方言的地域历史、文化、习俗能够以短视频的形式生产、传播和保存,解决方言难以被更多用户阅读和理解的问题,平台正式上线推出当地方言自动翻译功能。创作者可以利用该功能,将多个方言视频“一键”转换为普通话字幕供大众观看。 具体…

leetcode 23. 合并 K 个升序链表

2023.9.25 本题要合并k个有序链表,最朴素的方法可以联想到之前做的合并两个有序链表。 用一个for循环遍历lists数组,利用合并两个有序链表的代码,不断合并lists中的链表,最后返回头节点即可。 代码如下: /*** Definit…

vue-cli创建项目、vue项目目录结(运行vue项目)、ES6导入导出语法、vue项目编写规范

vue-cli创建项目、vue项目目录结构、 ES6导入导出语法、vue项目编写规范 1 vue-cli创建项目 1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建 2 vue项目目录结构 2.1 运行vue项目 2.2 vue项目的目录结构 3 es6导入导出语法 4 vue项目编写规范 4.1 修改项目 4.2 以后…

VC++判断程序是否已经运行;仅运行一次

VC判断程序是否已经运行;仅运行一次 BOOL CClientApp::InitInstance() {...//判断程序是否已经运行;仅运行一次CreateMutex(NULL,true,_T("xxxxx")); //xxxxx:为程序标识码if(GetLastError()ERROR_ALREADY_EXISTS) { AfxMess…

C#求100-999之间的水仙花数,你知道多少个?让我们一起来探索!

目录 背景: 扩展: 水仙花数例子: 效果展示:​ 总结: 背景: 水仙花数(Narcissistic number)也被称为超完全数字不变数(pluperfect digital invariant, PPDI)、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数(Armstrong…

博主老程序员长期个人接单

主要技术栈 : 后端: .net winform webapi 前端:vue2 vue3 微信小程序 数据库: sqlserver mysql 小程序案例:快猪小寓微信小程序客户端 后台管理系统 联系微信 或 QQ 35568701

网络编程day04(网络属性函数、广播、组播、TCP并发)

今日任务 对于newfd的话,最好是另存然后传入给分支线程,避免父子线程操作同一个文件描述符 ------------在tcp多线程服务端---------- 如果使用全局变量,或者指针方式间接访问,会导致所有线程共用一份newfd和cin,那么…

冲刺十五届蓝桥杯P0001阶乘求和

文章目录 题目描述思路分析代码解析 题目描述 思路分析 阶乘是蓝桥杯中常考的知识。 首先我们需要知道 int 和long的最大值是多少。 我们可以知道19的阶乘就已经超过了long的最大值,所以让我们直接计算202320232023!的阶乘是不现实的。 所以我们需要…

基于Linux socket聊天室-多线程服务器模型(01)

​前言 socket在实际系统程序开发当中,应用非常广泛,也非常重要。实际应用中服务器经常需要支持多个客户端连接,实现高并发服务器模型显得尤为重要。高并发服务器从简单的循环服务器模型处理少量网络并发请求,演进到解决C10K&…

什么是推挽电路?

推挽电路原理: 可以简单理解为推和拉; 此电路总共用到两个元器件,对应图中的Q1----NPN三极管,Q2----PNP三极管,两个电阻R1和R2起到限流的作用;两个三极管的中间对应信号的输出。 下面就举例说明是如何工作的…

基于JAVA,SpringBoot和Vue的前后端分离的求职招聘系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍: 这个系统的研发背景是…

时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-BiLSTM鹈鹕算…

使用SPY++查看窗口信息去排查客户端UI软件问题

目录 1、使用SPY查看窗口的信息 2、使用SPY查看某些软件UI窗口用什么UI组件实现的 2.1、查看海康视频监控客户端安装包程序 2.2、查看华为协同办公软件WeLink 2.3、查看字节协同办公软件飞书 2.4、查看最新版本的Chrome浏览器 2.5、查看小鱼易连视频会议客户端软件 2.6…

第十四届蓝桥杯大赛软件赛决赛 C/C++ 大学 B 组 试题 A: 子 2023

[蓝桥杯 2023 国 B] 子 2023 试题 A: 子 2023 【问题描述】 小蓝在黑板上连续写下从 1 1 1 到 2023 2023 2023 之间所有的整数,得到了一个数字序列: S 12345678910111213 ⋯ 20222023 S 12345678910111213\cdots 20222023 S12345678910111213⋯2…