当前位置: 首页 > news >正文

Markdown高级用法——mermaid

Markdown高级用法——mermaid

起初是写文章,其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的,工作中又是腾讯文档,上面也能画图,但假如我笔记软件用语雀之类的又要把一张图反复粘贴,浪费内存,如果统一图床,又会有内外网权限问题,最终我找到了解决办法,谁说markdown只能写文档的,语法熟练以后比直接画图还快。

参考资料

https://zhuanlan.zhihu.com/p/70261692

https://mermaid.js.org/intro/

mermaid图表可视化工具

它是一个基于 JavaScript 的图表绘制工具,可呈现 Markdown 启发的文本定义以动态创建和修改图表。

他功能很强大,想深入了解的同学点上面两个链接进去学习,这里只介绍两种最常用的图表类型,几乎所有支持Markdown语法的编辑器都支持mermaid,比如我最常用的Typro(自带),obsidion(需要安装第三方插件支持),notion(原生支持)。

流程图

方向

该语句声明了流程图的方向。

这声明流程图是从上到下(TDTB)的。

代码:
flowchart TDStart --> Stop
Start
Stop

这声明流程图是从左到右定向的 ( LR)。

代码:
flowchart LRStart --> Stop
Start
Stop

StartStop

可能的流程图方向是:

  • TB——从上到下
  • TD - 自上而下/与自上而下相同
  • BT——从下到上
  • RL——从右到左
  • LR——从左到右

按钮样式

矩形

flowchart LRid1[This is the text in the box]
This is the text in the box

圆角矩形

flowchart LRid1(This is the text in the box)
This is the text in the box

腰圆形

flowchart LRid1([This is the text in the box])
This is the text in the box

箭头样式

实线箭头

flowchart LRA-->B
A
B

直线

flowchart LRA --- B
A
B

线上的文字

flowchart LRA-- This is the text! ---B
This is the text!
A
B

虚线链接

flowchart LRA-.->B;
A
B

带文字的虚线链接

flowchart LRA-. text .-> B
text
A
B

多方向箭头

flowchart LRA o--o BB <--> CC x--x D
A
B
C
D

对于点链接或粗链接,要添加的字符是等号或点,如下表所示:

长度123
普通的------------
正常带箭头-->--->---->
厚的============
粗带箭头==>===>====>
点状-.--..--...-
带有箭头的虚线-.->-..->-...->

闰年例子

闰年的定义是指能够整除4的年份。然而,有一个例外规则,即能够整除100但不能整除400的年份不算是闰年。这是为了修正日历系统中的误差,确保闰年的周期相对稳定。

因此,按照常见的规则:

  • 如果年份能够整除4,但不能整除100,那么它是一个闰年。
  • 如果年份能够整除100,但不能整除400,那么它不是闰年。
  • 如果年份能够整除400,那么它仍然是一个闰年。

举例来说:

  • 2000年是闰年,因为它能够整除4和400。
  • 1900年不是闰年,因为它能够整除4和100,但不能整除400。
  • 2024年是闰年,因为它能够整除4。
flowchart TDA([开始]) -->|Link text| B(Round edge)B[/输入y/] --> C{4能整除y}C ---->|| D[y不是闰年]C -->|| E{100能整除y}E -->|| F{400能整除y}F -->|| DE -->|| GF -->|| G[y是闰年]
Link text
开始
输入y
4能整除y
y不是闰年
100能整除y
400能整除y
y是闰年

时序图

HTTP建立连接

连接过程描述

  1. 客户端向服务器发送SYN(同步)请求。

  2. 服务器收到请求后,回复SYN-ACK(同步-确认)。

  3. 客户端收到服务器的回复后,发送ACK(确认),完成三次握手过程。

sequenceDiagramparticipant Clientparticipant ServerClient->>Server: SYN客户端向服务器发送SYN(同步)请求。Server->>Client: SYN-ACK 服务器收到请求后,回复SYN-ACK(同步-确认)。Client->>Server: ACK 客户端收到服务器的回复后,发送ACK(确认),完成三次握手过程。
Client Server SYN客户端向服务器发送SYN(同步)请求。 SYN-ACK 服务器收到请求后,回复SYN-ACK(同步-确认)。 ACK 客户端收到服务器的回复后,发送ACK(确认),完成三次握手过程。 Client Server

HTTP断开连接

sequenceDiagramparticipant Clientparticipant ServerClient->>Server: FIN (Step 1)客户端向服务器发送FIN(终止)请求。Note over Server: 服务器收到请求后,回复ACK(确认)表示已接收到FIN。Server->>Client: ACK (Step 2)Note over Client: 服务器向客户端发送FIN(终止)请求。Server->>Client: FIN (Step 3)Note over Client: 客户端收到请求后,回复ACK(确认),完成四次挥手过程。Client->>Server: ACK (Step 4)Note over Client,Server: Connection Closed
Client Server FIN (Step 1)客户端向服务器发送FIN(终止)请求。 服务器收到请求后,回复ACK(确认)表示已接收到FIN。 ACK (Step 2) 服务器向客户端发送FIN(终止)请求。 FIN (Step 3) 客户端收到请求后,回复ACK(确认),完成四次挥手过程。 ACK (Step 4) Connection Closed Client Server

微信小程序调用

sequenceDiagram小程序 ->> 小程序 : wx.login()获取code小程序 ->> + 服务器 : wx.request()发送code服务器 ->> + 微信服务器 : code+appid+secret微信服务器 -->> - 服务器 : openid服务器 ->> 服务器 : 根据openid确定用户并生成token服务器 -->> - 小程序 : token
小程序 服务器 微信服务器 wx.login()获取code wx.request()发送code code+appid+secret openid 根据openid确定用户并生成token token 小程序 服务器 微信服务器

相关文章:

Markdown高级用法——mermaid

Markdown高级用法——mermaid 起初是写文章&#xff0c;其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的&#xff0c;工作中又是腾讯文档&#xff0c;上面也能画图&#xff0c;但假如我笔记软件用语雀之类的又要把一张图反复粘贴&#xff0c;浪费内存&#xff…...

cf919Div2C题题目总结

Problem - C - Codeforces 这道题其实是一道数学题。 先看第一个变量&#xff0c;也就是我们要求的答案k的数量&#xff0c;但看k是很好确定它的限制条件的&#xff0c;要想均匀分成k份&#xff0c;n%k必须为0&#xff0c;有了k&#xff0c;我们再来看m&#xff0c;对于a(1)和…...

Pandas实战100例 | 案例 4: 数据选择和索引 - 选择特定的列和行

案例 4: 数据选择和索引 - 选择特定的列和行 知识点讲解 在 Pandas 中&#xff0c;选择数据是一个非常常见的操作。你可以选择特定的列或行&#xff0c;或者基于某些条件筛选数据。 示例代码 选择特定的列 # 选择单列 selected_column df[ColumnName]# 选择多列 selected…...

Netty-Netty实现自己的通信框架

通信框架功能设计 功能描述 通信框架承载了业务内部各模块之间的消息交互和服务调用&#xff0c;它的主要功能如下&#xff1a; 基于 Netty 的 NIO 通信框架&#xff0c;提供高性能的异步通信能力&#xff1b; 提供消息的编解码框架&#xff0c;可以实现 POJO 的序列化和反…...

【算法刷题】总结规律 算法题目第2讲 [234] 回文链表,因为深浅拷贝引出的bug

配合b站视频讲解食用更佳:https://www.bilibili.com/video/BV1vW4y1P7V7 核心提示&#xff1a;好几道题是处理有序数组的&#xff01; 适合人群&#xff1a;考研/复试/面试 解决痛点&#xff1a;1. 刷了就忘 2.换一道相似的题就不会 学完后会输出&#xff1a;对每类题目的框架…...

RabbitMQ如何保证消息不丢失?

RabbitMQ如何保证消息不丢失&#xff1f; 消息丢失的情况 生产者发送消息未到达交换机生产者发送消息未到达队列MQ宕机&#xff0c;消息丢失消费者服务宕机&#xff0c;消息丢失 生产者确认机制 解决的问题&#xff1a;publisher confirm机制来避免消息发送到MQ过程中消失。…...

Random的使用

作用&#xff1a;生成伪随机数 1.导包&#xff1a;import java.util.Random 2.得到随机数对象&#xff1a;Random r new Random(); 3.调用随机数的功能获取随机数&#xff1a; 这里随机生成一个0-9的整数&#xff1a; int number r.nextInt(10); 实现指定区间的随机数&a…...

通过反射修改MultipartFile类文件名

1、背景 项目上有这样一个需求&#xff0c;前端传文件过来&#xff0c;后端接收后按照特定格式对文件进行重命名。(修改文件名需求其实也可以在前端处理的) //接口类似于下面这个样子 PosMapping("/uploadFile") public R uploadFile(List<MultipartFile> fil…...

Macos下修改Python版本

MacOS下修改Python版本 安装 查看本机已安装的Python版本&#xff1a;where python3 ~ where python3 /usr/bin/python3 /usr/local/bin/python3 /Library/Frameworks/Python.framework/Versions/3.12/bin/python3如果没有你想要的版本&#xff0c;去python官网下载安装包。…...

多种采购方式下,数智化招标采购系统建设解决方案

广发证券成立于1991年&#xff0c;是国内首批综合类证券公司&#xff0c;先后于2010年和2015年在深圳证券交易所及香港联合交易所主板上市。 多年来&#xff0c;广发证券在竞争激烈、复杂多变的行业环境中努力开拓、锐意进取&#xff0c;以卓越的经营业绩、持续完善的全面风险…...

Java选择排序

选择排序是一种简单直观的排序算法&#xff0c;其基本思想是每一轮从待排序的元素中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其与当前位置的元素交换。选择排序的实现步骤可以简要概括为&#xff1a; 初始化&#xff1a; 遍历整个数组&#xff0c;将当前位…...

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-1 坐标系与概念基准

本文仅供学习使用&#xff0c;总结很多本现有讲述运动学或动力学书籍后的总结&#xff0c;从矢量的角度进行分析&#xff0c;方法比较传统&#xff0c;但更易理解&#xff0c;并且现有的看似抽象方法&#xff0c;两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…...

【金猿人物展】DataPipelineCEO陈诚:赋能数据应用,发挥未来生产力

‍ 陈诚 本文由DataPipelineCEO陈诚撰写并投递参与“数据猿年度金猿策划活动——2023大数据产业年度趋势人物榜单及奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 我们处在一个“见证奇迹”的时代。在过去的20年间&#xff0c;我们见证了大数据技术快速发展所带…...

4D 毫米波雷达:智驾普及的新路径(二)

4 4D 毫米波的技术路线探讨 4.1 前端收发模块 MMIC&#xff1a;级联、CMOS、AiP 4.1.1 设计&#xff1a;级联、单芯片、虚拟孔径 4D 毫米波雷达的技术路线主要分为三种&#xff0c;分别是多级联、级联 虚拟孔径成像技术、以及 集成芯片。&#xff08; 1 &#xff09;多级…...

element plus自定义组件表单校验

方式一&#xff1a; import { formContextKey, formItemContextKey } from "element-plus";// 获取 el-form 组件上下文 const formContext inject(formContextKey, void 0); // 获取 el-form-item 组件上下文 const formItemContext inject(formItemContextKey, …...

C //练习 4-13 编写一个递归版本的reverse(s)函数,以将字符串s倒置。

C程序设计语言 &#xff08;第二版&#xff09; 练习 4-13 练习 4-13 编写一个递归版本的reverse(s)函数&#xff0c;以将字符串s倒置。 注意&#xff1a;代码在win32控制台运行&#xff0c;在不同的IDE环境下&#xff0c;有部分可能需要变更。 IDE工具&#xff1a;Visual S…...

DNS解析和主从复制

一、DNS名称解析协议 二、DNS正向解析 三、DNS主从复制 主服务器 从服务器...

光猫(无限路由器)插入可移动硬盘搭建简易版的NAS

1.场景分析 最近查询到了许多有关NAS的资料&#xff0c;用来替代百度云盘等确实有很多优势&#xff0c;尤其是具有不限速&#xff08;速度看自己配置&#xff09;、私密性好、一次投入后续只需要电费即可等优势。鉴于手上没有可以用的资源-cpu、机箱、内存等&#xff0c;查询到…...

SpringIOC之support模块GenericGroovyApplicationContext

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…...

Awesome 3D Gaussian Splatting Resources

GitHub - MrNeRF/awesome-3D-gaussian-splatting: Curated list of papers and resources focused on 3D Gaussian Splatting, intended to keep pace with the anticipated surge of research in the coming months. 3D Gaussian Splatting简明教程 - 知乎...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...