Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆

       介绍mermaid下,Flowchat流程图语法。

目录

    • 一.欢迎来到我的酒馆
    • 二.什么是mermiad工具
    • 三.在vs code中使用mermaid
    • 四.基本语法

二.什么是mermiad工具

       2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表工具。

mermaid代码:

	```mermaidflowchart LR A[长方形] -- 链接 --> B(()) A --> C(圆角矩形)B --> D{菱形}C --> D```
链接
长方形
圆角矩形
菱形

2.2提示:flowchart还可以写成graph,例如:

	```mermaidgraph LR ```

LR表示flowchart的对齐方式为从左到右,L表示left,R表示right。
TB表示flowchart的对齐方式为从上到下,T表示top,B表示bottom。
BT表示flowchart的对齐方式为从下到上,B表是bottom,T表示top。

2.3 flowchart也可以像编程语言一样,先声明一个组件,然后在使用。
例如:

	```mermaidflowchart LR %% []表示一个矩形,字母A表示这个矩形的变量名%%A[长方形] B(())C(圆角矩形)D{菱形}%%-->表示通过id名称连接两个组件%%A-- 链接 --> BA --> C```
链接
长方形
圆角矩形

2.4 mermaid注释
如上文看到的,mermaid使用%%%%作为注释。

三.在vs code中使用mermaid

3.1vscode中需要安装一个mermaid插件:Markdown Preview Mermaid Support。
在设置里找到extions,
然后搜索mermaid,选择第一个进行安装即可。
在这里插入图片描述
3.2 新建一个Markdown文件,将文件的后缀名写为.md,即Markdown文件。

在这里插入图片描述

四.基本语法

4.1Flowchart由节点(几何图形)和箭头或线段组成。mermaid代码定义了几何图形和箭头线段的排列方式,并适应不同的箭头类型、多向箭头以及子图之间的任何连接。
提示:在Flowchart流程图中,使用单词 “end” 会破会流程图的结构。你可以将"end"单词大写来解决这个问题。
4.2

	```mermaid---title: Node with text---%%---title表示流程图的标题 %%flowchart LRid1[id1]```

在这里插入图片描述
id1[id1] 声明一个矩形,并给这个矩形命名为id1,矩形里面填充的内容也是id1

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

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

相关文章

小研究 - MySQL 分区分表的设计及实(一)

随着信息技术的快速发展,数据量越来越大,海量的表查询操作需要消耗大量的时间,成为影响数据库访问性能提高的主要因素。为了提升数据库操作的查询效率和用户体验,在关系型数据库管理系统(MySQL)中通过 range 分区和 Merge 存储&am…

百模大战,谁是赢家?文心3.5稳坐国内第一,综合评分超ChatGPT!

近日,清华大学新闻与传播学院沈阳团队发布《大语言模型综合性能评估报告》(下文简称“报告”),报告显示百度文心一言在三大维度20项指标中综合评分国内第一,超越ChatGPT,其中中文语义理解排名第一&#xff…

在收到满意的大厂offer之前,面试也是至关重要的,那么该如何做好IT类的面试呢?

方向一:分享你面试IT公司的小技巧 沉着冷静应对刁难:应试场上,考官往往会针对求职者的薄弱点提出一些带有挑战性的问题。面对这样的考题,你一定要心平气和,较为委婉地加以反驳和申诉,绝不可情绪激动&#x…

通用Mapper的四个常见注解

四个常见注解 1、Table 作用:建立实体类和数据库表之间的对应关系。 默认规则:实体类类名首字母小写作为表名,如 Employee -> employee 表 用法:在 Table 注解的 name 属性中指定目标数据库的表名; 案例&#…

uC-OS2 V2.93 STM32L476 移植:串口打印篇

前言 前几篇已经 通过 STM32CubeMX 搭建了 NUCLEO-L476RG 的 STM32L476RG 的 裸机工程,下载了 uC-OS2 V2.93 的源码,并把 uC-OS2 的源文件加入 Keil MDK5 工程,通过适配 Systick 系统定时器与 PendSV 实现任务调度,初步让 uC-OS2 …

GSS3 - Can you answer these queries III

GSS3 - Can you answer these queries III 题面翻译 n n n 个数&#xff0c; q q q 次操作 操作0 x y把 A x A_x Ax​ 修改为 y y y 操作1 l r询问区间 [ l , r ] [l, r] [l,r] 的最大子段和 感谢 Edgration 提供的翻译 题目描述 You are given a sequence A of N (N <…

laravel语言包问题

1、更新vendor composer require "overtrue/laravel-lang:3.0" 2、修正配置文件 config/app.php 3、 php artisan config:clear 更新缓存 4、设定新的语言包 在这个resources\lang目录下加即可

dubbo之基础知识

Dubbo 官网地址&#xff1a;Apache Dubbo Dubbo 是一款易用、高性能的 WEB 和 RPC 框架&#xff0c;同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践 作用 1.远程方法调用 2.容错和负载均衡 3.提供服务的自动注册与发现 为什么需要…

MyBatis 查询数据库之二(增、删、改、查操作)

目录 1. 配置打印 MyBatis 执行的SQL 2. 查询操作 2.1 通过用户 ID 查询用户信息、查询所有用户信息 (1) Mapper 接口 (2)UserMapper.xml 查询所有用户的具体实现 SQL (3)进行单元测试 3. 增加操作 3.1 在 mapper&#xff08;interface&#xff09;里面添加增加方法的声…

YOLOv5项目调试与实战

拥有青春的时候 你就要感受它 不要浪费你的黄金时代 把宝贵的内在生命活出来 什么都别错过 一、项目介绍与环境配置 github地址 选择5.0版本的tag&#xff0c;并下载源码 使用Pycharm打开代码 选择解释器&#xff0c;我选择的是之前conda创建的pytorch环境 安装项目所需要用到…

go-zero超强工具goctl的常用命令api,rpc,model及其构建的服务解析

goctl api 详情移步&#xff1a; go-zero的路由机制解析 基于go-zero的api服务刨析并对比与gin的区别 goctl rpc goctl支持多种rpc&#xff0c;较为流行的是google开源的grpc&#xff0c;这里主要介绍goctl rpc protoc的代码生成与使用。 protoc是grpc的命令&#xff0c;作用…

Flowise AI:用于构建LLM流的拖放UI

推荐&#xff1a;使用NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 什么是Flowise AI&#xff1f; Flowise AI是一个开源的UI可视化工具&#xff0c;用于帮助开发LangChain应用程序。在我们详细介绍 Flowise AI 之前&#xff0c;让我们快速定义 LangChain。LangChain是…

powershell几句话设置环境变量

设置环境变量比较繁琐&#xff0c;现在用这段话&#xff0c;在powershell中就可以轻松完成。 $existingPath [Environment]::GetEnvironmentVariable("Path", "Machine") $newPath "C:\Your\Path\Here"if ($existingPath -split ";"…

MySQL(1)

MySQL创建数据库和创建数据表 创建数据库 1. 连接 MySQL mysql -u root -p 2. 查看当前的数据库 show databases; 3. 创建数据库 create database 数据库名; 创建数据库 4. 创建数据库时设置字符编码 create database 数据库名 character set utf8; 5. 查看和显示…

Doris(四)-Rollup 使用

1&#xff0c;基本语法 1.1 新增 alter table user_landing_record_newadd rollup succ_login_count_index(user_id,day_succ_login_count); 1.2删除 alter table user_landing_record_newdrop rollup succ_login_count_index; 1.3其他操作&#xff0c;参考官网 传送门 …

【新】通达OA前台反序列化漏洞分析

0x01 前言 注&#xff1a;本文仅以安全研究为目的&#xff0c;分享对该漏洞的挖掘过程&#xff0c;文中涉及的所有漏洞均已报送给国家单位&#xff0c;请勿用做非法用途。 通达OA作为历史上出现漏洞较多的OA&#xff0c;在经过多轮的迭代之后已经很少前台的RCE漏洞了。一般来说…

RabbitMQ的安装

RabbitMQ的安装 1、Windows环境下的RabbitMQ安装步骤 使用的版本&#xff1a;otp_win64_23.2 rabbitmq-server-3.8.16 版本说明&#xff1a;https://www.rabbitmq.com/which-erlang.html#compatibility-matrix 1.1 下载并安装erlang RabbitMQ 服务端代码是使用并发式语言…

探讨|使用或不使用机器学习

动动发财的小手&#xff0c;点个赞吧&#xff01; 机器学习擅长解决某些复杂问题&#xff0c;通常涉及特征和结果之间的困难关系&#xff0c;这些关系不能轻易地硬编码为启发式或 if-else 语句。然而&#xff0c;在决定 ML 是否是当前给定问题的良好解决方案时&#xff0c;有一…

按轨迹运行

文章目录 import math import timeimport numpy as np import matplotlib.pyplot as pltdef plot_arrow(x, y, yaw, length=5, width=1):dx = length * math.cos(yaw)dy = length * math.sin(yaw)plt.arrow(x, y, dx, dy, head_length=width, head_width=width)plt.plot([x, x …

Spring Boot、Spring Cloud、Spring Alibaba 版本对照关系及稳定兼容版本

Spring Boot、Spring Cloud、Spring Alibaba 版本对照关系及稳定兼容版本 引言 在 Java 生态系统中&#xff0c;Spring Boot、Spring Cloud 和 Spring Alibaba 是非常流行的框架&#xff0c;它们提供了丰富的功能和优雅的解决方案。然而&#xff0c;随着不断的发展和更新&…