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将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(