如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图三

2024-02-02 02:44

本文主要是介绍如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图三,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Mermaid 系列

  • 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一
  • 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图二
    在这里插入图片描述

1.如何创建甘特图 Gantt

甘特图以条形图的形式用作可视化表示。它有效地展示了项目的时间表,揭示了各个项目组件完成所需的持续时间。

您可以使用以下示例在 Mermaid 中渲染甘特图:
在这里插入图片描述

01/01 02/01 03/01 04/01 05/01 06/01 Define Project Research Define Requirements Design Implementation Unit Testing Integration Testing Deploy User Training Ongoing Support Planning Development Testing Deployment Maintenance Project Schedule

语法细分:

  • gantt 指定要在mermaind中呈现甘特图。
  • title表示项目标题。
  • dateFormat YYYY-MM-DD 是图表的输入日期格式。
  • axisFormat %m/%d 表示 x 轴中显示的日期格式,即输出日期。
  • section 用于分隔项目的不同部分。

x 轴表示时间,y 轴记录不同的任务及其完成顺序。

2. 如何创建饼图 Pie

饼图,也称为圆图,是用于显示统计数据的圆形视觉表示形式。它被划分为多个段或切片,以直观地传达不同类别或值的数字比例。

下面是在mermaid中创建饼图的示例:
在这里插入图片描述

60% 15% 10% 15% Distribution of Expenses Food Rent Entertainment Savings

语法细分:

  • pie 表示我们正在创建一个饼图。
  • title 设置饼图的标题。
  • 双引号中的项目代表类别(例如,“Food,” “Rent,” “Entertainment,” “Savings”)。
  • 冒号后面的数字表示每个类别的比例或百分比。在这种情况下,“食物”占据了图表的 60%,“租金”占 15%,“娱乐”占 10%,“储蓄”占 15%。

3. 总结

在本文中,我们只是触及了 Mermaid 中渲染图的表面。这些图表是高度可定制的,还允许您创建非常复杂的图表。

Mermaid 支持本教程中未提及的更多类型的图表。要了解有关Mermaid的更多信息,请查看他们的官方文档。
在这里插入图片描述

动手玩 Live demo

在这里插入图片描述

代码

https://github.com/zgpeace/pets-name-langchain/tree/develop

参考

https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/

这篇关于如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图三的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/669255

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

Tomcat版本与Java版本的关系及说明

《Tomcat版本与Java版本的关系及说明》:本文主要介绍Tomcat版本与Java版本的关系及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat版本与Java版本的关系Tomcat历史版本对应的Java版本Tomcat支持哪些版本的pythonJ

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s