Mermaid绘制UML图教程

2024-02-15 23:04
文章标签 教程 绘制 uml mermaid

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

Mermaid 是一种轻量级的图形描述语言,用于绘制流程图、时序图、甘特图等各种图表。它采用简单的文本语法,使得用户能够快速绘制各种复杂图表,而无需深入学习图形绘制工具。


一、安装Mermaid

Mermaid 可以在浏览器中直接使用,也可以通过 Node.js 进行安装。在浏览器中使用只需要引入 Mermaid 的脚本文件:

<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';mermaid.initialize({ startOnLoad: true });
</script>

如果选择使用 Node.js,在命令行中执行以下命令安装 Mermaid:

npm install mermaid

二、绘制流程图

使用 Mermaid 绘制流程图非常简单,只需要通过 graph 关键字来创建。

例如:

graph TD; A-->B; A-->C; B-->D; C-->D;

这是一个简单的流程图,节点 A 分别指向节点 B 和节点 C,而节点 B 和 C 同时指向节点 D。

成品图: 

举个复杂点的例子,下面绘制一张分布式系统的架构图:  

graph TDsubgraph 用户用户操作 --> A[前端应用]endsubgraph 服务端A --> B[负载均衡]B -->|请求| C[服务1]B -->|请求| D[服务2]B -->|请求| E[服务3]endsubgraph 数据存储C -->|读写| F[数据库1]D -->|读写| G[数据库2]E -->|读写| H[数据库3]endsubgraph 消息队列C -->|异步通信| I[消息队列1]D -->|异步通信| IE -->|异步通信| Iend

成品图: 


三、绘制时序图

时序图也是 Mermaid 的一种常见应用场景,通过 sequenceDiagram 关键字来创建。

以下是一个简单的时序图的Mermaid语法示例:

sequenceDiagramparticipant Aliceparticipant BobAlice->>Bob: Hello Bob, how are you?Bob-->>Alice: Hi Alice! I'm good, thank you!

成品图: 

再举个复杂的例子,下面绘制一张嵌入式系统的架构图:  

sequenceDiagramparticipant A as 用户participant B as Harmony设备participant C as 云服务器participant D as 云数据库participant E as 嵌入式上层应用participant F as 开发板participant G as SQLiteactivate A #greynote over A: 用户查看操作A->>B: 查询事件deactivate Aactivate B #lightblueB->>C: 请求数据deactivate Bactivate C #orangeC->>D: 查询deactivate Cactivate D #blueD-->>C: 返回数据deactivate Dactivate C #orangeC-->>B: 返回数据deactivate Cactivate B #lightblueB-->>A: 显示内容deactivate Bactivate A #greynote over A: 用户更改操作A->>B: 更新事件deactivate Aactivate B #lightblueB->>C: 请求更新deactivate Bactivate C #orangeC->>F: 请求更新deactivate Cactivate F #lightgreenF->>G: 请求更新deactivate Factivate G #greenG-->>F: 返回结果deactivate Gactivate F #lightgreenF->>C: 发送修改请求deactivate Factivate C #orangeC->>D: 更新数据deactivate Cactivate D #blueD-->>C: 返回结果deactivate Dactivate C #orangeC-->>B: 返回结果deactivate Cactivate B #lightblueB-->>A: 返回结果deactivate Bactivate A #greyA->>A: 提示结果note over A: 操作成功deactivate A

成品图:


四、绘制甘特图

使用 Mermaid 还可以绘制甘特图,通过 gantt 关键字来创建。

举个例子,下面绘制一张简单的甘特图:  

gantttitle 甘特图示例section SectionA task           :a1, 2022-03-02, 1dAnother task     :after a1, 1dsection AnotherTask in sec      :2022-03-04, 1d

成品图:


五、绘制饼图

使用 Mermaid 还可以绘制饼图,通过 pie 关键字来创建。

例如:

pietitle Pie Chart"Category A" : 40"Category B" : 25"Category C" : 20"Category D" : 15

成品图: 


六、绘制状态图

状态图用于展示对象的状态和状态间的转移过程。在mermaid中,状态图的语法也是非常简单的。状态图可以用于展示对象的生命周期、状态转移等,通过 stateDiagram 关键字来创建。

例如:

stateDiagram
[*] --> 暂停暂停 --> 播放暂停 --> 停止播放 --> 暂停播放 --> 停止停止 --> [*] 

成品图:


七、绘制类图

使用 Mermaid 还可以绘制类图,通过 classDiagram 关键字来创建。

例如:

classDiagramclass User {+username: string+password: string+login(): void+logout(): void}class Employee {+employeeId: string+position: string+work(): void}class Customer {+customerId: string+membershipLevel: string+purchase(): void}User <|-- EmployeeUser <|-- Customer

成品图:

=


八、导出图表

在浏览器中使用 Mermaid 绘制图表后,你可以通过右键保存为图片或将代码导出为 SVG 文件。如果使用 Node.js,在命令行中执行以下命令将 Mermaid 代码转换为图片:

npx mmdc -i input.mmd -o output.png

九、Mermaid绘图总结

Mermaid 不仅是一款简单而强大的图形描述语言,更是在文本层面实现图形可视化的理想工具。通过其简单的文本语法,用户能够轻松绘制各种类型的图表,包括流程图、时序图、甘特图等。这种轻量级而直观的设计使得 Mermaid 成为与团队成员、同行和客户分享和理解图形设计的理想选择。

Mermaid 的优势不仅在于其易用性,还体现在其广泛的应用场景上。在项目管理中,可以使用 Mermaid 绘制清晰的甘特图,直观展示任务的时间安排与进度。在系统设计中,Mermaid 提供了简单而强大的时序图绘制功能,有助于理清事件之间的关系和顺序。此外,Mermaid 还支持流程图、类图等多种图形类型,使得用户能够在不同领域应用中得心应手。

使用 Mermaid 不仅意味着更轻松地表达和分享图形设计,还提供了易于维护和更新的优势。文本化的图形描述使得团队成员能够更加方便地协作,通过简单的文本编辑即可完成图形的修改与更新,而无需繁琐的图形工具。

总体而言,Mermaid 的简便性、灵活性和可扩展性使其成为一款备受欢迎的图形绘制工具,为用户提供了在各种场景中清晰、直观地呈现信息的便捷途径。

这篇关于Mermaid绘制UML图教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

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

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

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.

Elasticsearch 在 Java 中的使用教程

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