markdown使用下使用mermaid做图

2024-08-22 12:38
文章标签 使用 markdown 做图 mermaid

本文主要是介绍markdown使用下使用mermaid做图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

之前好像做过相关的笔记,但是一时不知道放到哪儿去了,这里再来快速的学习一下
在这里插入图片描述

mermaid主页的展示图
  • 程序流程图
graph TD;   //TD表示上下结构,很好理解, T->top, D->down  / B->bottom. 当然类似的还要, R->right, L->left .//所以组合有从上倒下,从下到上。 从左到右,从右到左。A-->B;A-->C;B-->D;C-->D;
A
B
C
D

看到上面默认的形状都是方形,其实不然,还有圆角矩形啥的,链接的线的类型可是可以设定为不带箭头的虚线啥的,画得图看起来也很丰富。

graph TDid[带文本的矩形]id4(带文本的圆角矩形)id3>带文本的不对称的矩形]id1{带文本的菱形}id2((带文本的圆形))
带文本的矩形
带文本的圆角矩形
带文本的不对称的矩形
带文本的菱形
带文本的圆形
graph TBA[A] --> B[B] A1[A] --- B1[B] A4[A] -.- B4[B] A5[A] -.-> B5[B] A7[A] ==> B7[B] A2[A] -- 描述 --- B2[B] A3[A] -- 描述 --> B3[B] A6[A] -. 描述 .-> B6[B] A8[A] == 描述 ==> B8[B]
描述
描述
描述
描述
A
B
A
B
A
B
A
B
A
B
A
B
A
B
A
B
A
B
  • 序列图,当然不止流程图
sequenceDiagram   // 看到前面 graph关键字是流程图,这里sequenceDiagram就是序列图了,官方还给了其他的。// 比如甘特图 - gantt , 类图 - classDiagram, git的分支图 - gitGraph ,我在官方copy过来的例子participant Aliceparticipant BobAlice->>John: Hello John, how are you?loop HealthcheckJohn->>John: Fight against hypochondriaendNote right of John: Rational thoughts <br/>prevail!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!
Alice Bob John Hello John, how are you? Fight against hypochondria loop [ Healthcheck ] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John
  • 甘特图
gantt  //这个目前csdn的markdown还没有支持, 可以在官网看效果
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
  • 类图
classDiagram //这个目前csdn的markdown还没有支持, 可以在官网看效果
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
  • git的分支图
    源码就不粘了,粘过来也没得反应得,直接去官网看下效果吧。

本身这个项目是为js编写的,至于下面几种,csdn的markdown不支持(其实大多数markdown编辑器都还不支持,比如最新版本的vs code),可以在支持的浏览器上做,然后截图过来,我重点看的是流程图。

如果真的找不到,又特别迷离这个画图方式,可以搭建一个node.js环境,来完成最新版本的支持,祝你好运。

欢迎交流!!!

参考

  • 如何在Markdown中画流程图
  • 官网

这篇关于markdown使用下使用mermaid做图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin