Mermaid使用教程（绘制各种图）

2024-01-20 13:52
文章标签 使用 教程 绘制 mermaid

本文主要是介绍Mermaid使用教程（绘制各种图），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Mermaid使用教程（绘制各种图）

文章目录

    • Mermaid使用教程（绘制各种图）
      • 简介
      • 饼状图
        • 简单的例子
        • 应用案例
      • 序列图
        • 简单案例
        • 应用案例
        • 另一个应用案例
      • 甘特图
        • 简单案例
        • 应用案例
        • 一个更为复杂的应用案例
      • Git图
        • 简单案例
      • 总结

简介

本文将主要介绍使用Mermaid绘制各种各样的常用的图，例如：饼状图、序列图、甘特图等等，当然Mermaid也可以用来绘制流程图，可以参见我的另一篇文章：

https://blog.csdn.net/m0_54218263/article/details/135684176

饼状图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中绘制饼状图，可以使用以下语法：

graph TDA[饼状图] --> B[部分1]A --> C[部分2]A --> D[部分3]B --> E[子部分1]C --> F[子部分2]D --> G[子部分3]

在上面的代码中，A 是整个饼状图的名称，B、C 和 D 是饼状图中的各个部分，E、F 和 G 是各部分下的子部分。使用箭头 (-->) 表示各部分之间的依赖关系。

您可以在代码中添加样式和颜色以自定义饼状图的外观。例如，您可以使用以下语法为每个部分添加不同的颜色：

graph TDA[饼状图] --> B[部分1 : red]A --> C[部分2 : green]A --> D[部分3 : blue]B --> E[子部分1 : red]C --> F[子部分2 : green]D --> G[子部分3 : blue]

在上面的代码中，: red、: green 和 : blue 是用于指定各部分颜色的样式。您可以根据需要自定义颜色和其他样式。

简单的例子

mermaid的代码如下所示：

pietitle Example Pie Chart"First slice": 30"Second slice": 20"Third slice": 50

生成的效果：

30% 20% 50% Example Pie Chart First slice Second slice Third slice
应用案例

mermaid的代码如下所示：

%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showDatatitle Key elements in Product X"Calcium" : 42.96"Potassium" : 50.05"Magnesium" : 10.01"Iron" :  5

生成的效果：

40% 46% 9% 5% Key elements in Product X Calcium [42.96] Potassium [50.05] Magnesium [10.01] Iron [5]

序列图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成序列图，可以使用以下语法：

graph LRA[开始] --> B[步骤1]B --> C[步骤2]C --> D[步骤3]D --> E[结束]

在上面的代码中，A 是序列图的起点，E 是终点，B、C 和 D 是序列图中的各个步骤。使用箭头 (-->) 表示各步骤之间的依赖关系。

您可以在代码中添加样式和注释以自定义序列图的外观和描述。例如，您可以使用以下语法为每个步骤添加样式和注释：

graph LRA[开始] --> B[步骤1 : 这是一个注释]B --> C[步骤2 : 这是另一个注释]C --> D[步骤3]D --> E[结束]

在上面的代码中，: 这是一个注释 和 : 这是另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。

简单案例

mermaid代码：

sequenceDiagramA->>B: Message 1B-->>A: Message 2

效果：

A B Message 1 Message 2 A B
应用案例

代码：

sequenceDiagramparticipant 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
另一个应用案例

代码：

sequenceDiagramparticipant Aliceparticipant Johnrect rgb(191, 223, 255)note right of Alice: Alice calls John.Alice->>+John: Hello John, how are you?rect rgb(200, 150, 255)Alice->>+John: John, can you hear me?John-->>-Alice: Hi Alice, I can hear you!endJohn-->>-Alice: I feel great!endAlice ->>+ John: Did you want to go to the game tonight?John -->>- Alice: Yeah! See you there.

效果：

Alice John Alice calls John. Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I feel great! Did you want to go to the game tonight? Yeah! See you there. Alice John

甘特图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成甘特图，可以使用以下语法：

graph TDA[项目开始] --> B[任务1]B --> C[任务2]C --> D[任务3]D --> E[项目结束]B --> F[任务4]F --> E

在上面的代码中，A 是项目的起点，E 是终点，B、C、D 和 F 是项目中的各个任务。使用箭头 (-->) 表示任务之间的依赖关系。

您可以在代码中添加样式和注释以自定义甘特图的外观和描述。例如，您可以使用以下语法为每个任务添加样式和注释：

graph TDA[项目开始] --> B[任务1 : 这是一个注释]B --> C[任务2 : 这是另一个注释]C --> D[任务3]D --> E[项目结束]B --> F[任务4 : 还有一个注释]F --> E

在上面的代码中，: 这是一个注释、: 这是另一个注释 和 : 还有一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。

简单案例

代码：

gantttitle Example Gantt ChartdateFormat  YYYY-MM-DDsection Sectiontask 1: 2019-01-01, 30dtask 2: 2019-02-01, 14dtask 3: 2019-03-01, 7d

效果：

2019-01-06 2019-01-13 2019-01-20 2019-01-27 2019-02-03 2019-02-10 2019-02-17 2019-02-24 2019-03-03 task 1 task 2 task 3 Section Example Gantt Chart
应用案例

代码：

gantt
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

效果：

2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid
一个更为复杂的应用案例

代码：

ganttdateFormat  YYYY-MM-DDtitle       Adding GANTT diagram functionality to mermaidexcludes    weekends%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)section A sectionCompleted task            :done,    des1, 2014-01-06,2014-01-08Active task               :active,  des2, 2014-01-09, 3dFuture task               :         des3, after des2, 5dFuture task2              :         des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison          :crit, done, after des1, 2dCreate tests for parser             :crit, active, 3dFuture task in critical line        :crit, 5dCreate tests for renderer           :2dAdd to mermaid                      :1dFunctionality added                 :milestone, 2014-01-25, 0dsection DocumentationDescribe gantt syntax               :active, a1, after des1, 3dAdd gantt diagram to demo page      :after a1  , 20hAdd another diagram to demo page    :doc1, after a1  , 48hsection Last sectionDescribe gantt syntax               :after doc1, 3dAdd gantt diagram to demo page      :20hAdd another diagram to demo page    :48h

效果：

2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 Completed task Completed task in the critical line Implement parser and jison Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid

Git图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成 Git 提交历史图，可以使用以下语法：

graph TDA[提交历史]B[提交1] --> C[提交2]C --> D[提交3]D --> E[提交4]

在上面的代码中，A 是 Git 提交历史的起点，B、C、D 和 E 是各个提交。使用箭头 (-->) 表示提交之间的依赖关系。

您可以在代码中添加样式和注释以自定义 Git 提交历史图的外观和描述。例如，您可以使用以下语法为每个提交添加样式和注释：

graph TDA[提交历史]B[提交1 : 这是一个注释] --> C[提交2 : 这是另一个注释]C --> D[提交3 : 还有另一个注释]D --> E[提交4]

在上面的代码中，: 这是一个注释、: 这是另一个注释 和 : 还有另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。

简单案例

代码：

gitGraphcommitcommitbranch developcommitcommitcommitcheckout maincommitcommitmerge developcommitcommit

效果：
在这里插入图片描述

总结

接下来，做一个小小的总结：

我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。

  1. 流程图：使用 graph 关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。

  2. 序列图：也使用 graph 关键字，但通常指定方向（如 LR 表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。

  3. 甘特图：虽然 Mermaid 本身不直接支持甘特图，但可以通过一些变通的方法（如使用流程图）来模拟甘特图的效果。然而，标准的 Mermaid 语法不包括专门用于甘特图的指令。

  4. Git 提交历史图：关于这一点，上面的回答可能有误导之嫌。实际上，Mermaid 本身不直接支持 Git 提交历史图的生成。Git 提交历史图通常使用其他工具（如 GitGraph.js）来生成。Mermaid 更专注于流程图和序列图等通用图表的绘制。

总结来说，Mermaid 是一个强大的工具，用于在 Markdown 文档中创建各种类型的图表。

然而，需要注意的是，它可能不支持所有类型的图表，特别是像甘特图和 Git 提交历史图这样的专门用途的图表。对于这些特定需求，可能需要寻找其他专门的工具或库。

这篇关于Mermaid使用教程（绘制各种图）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/626227。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2