原来使用代码也可以画时序图，用这个Mermaid就行，真香

本文首发于我的个人掘金博客，看到很多人都比较喜欢这篇文章，分享给大家。

个人博客主页：https://www.aijavapro.cn

个人掘金主页：juejin.cn/user/2359988032644541/posts

个人知识星球:  觉醒的新世界程序员

一、背景

 在软件开发和系统设计中，时序图是一种重要的工具，用于描述不同组件或对象之间的交互关系。传统上，绘制时序图需要使用专业的图形工具或绘图软件，但现在有了Mermaid文本语法，我们可以通过简单的文本输入快速生成时序图。效率提升的不是一丁点，是非常一大步，我们只需要用文字的形式，将流程图表达出来接客。本篇博客将介绍如何使用Mermaid相关的说明。

主要分享下：

1、什么是Mermaid

2、Mermaid的优势

3、使用Mermaid绘制基本的时序图，以系统常见的功能为例：

  • 应用程序启动过程
  • 用户登录流程
  • 订单支付履约流程

二、什么是Mermaid

Mermaid是一个开源的图表库，它允许我们使用简单的文本语法来定义和绘制各种类型的图表，包括流程图、时序图、甘特图等。Mermaid支持多种输出格式，包括SVG、PNG和PDF，使得生成和共享图表变得非常方便。

官方地址为：https://mermaid.js.org/

官方的在线编辑效果预览地址为：https://develop.git.mermaid.live/edit

官方的关于时序图的说明文档：http://mermaid.js.org/syntax/sequenceDiagram.html

为了看到一个效果，我们先看下最后的成品效果，假设想要表达一个【应用程序】启动的过程，那么我们用该语法代码，会生成一个如下的图：

看着是不是有一种非常简洁的感觉，其实这就是mermaid这种文本绘图提供的功能，看起来非常不错，如果我们能通过梳理一种语法来表达出我们的一个业务，那么实际上不需要拖动一些UI元素，就可以实现一个统一效果和展示的，非常可以提高我们日常开发工作中的文档编写，业务表达等等的一些效率。那么上面的这个图是如何生成的呢，其实只需要写个如下代码就行了：

sequenceDiagramparticipant Userparticipant Applicationparticipant SpringBootparticipant DataSourceparticipant ServiceUser->>Application: 打开应用程序Application->>SpringBoot: 启动Spring Boot应用SpringBoot->>DataSource: 初始化数据源DataSource-->>SpringBoot: 返回数据源配置SpringBoot->>Service: 注册服务Service-->>SpringBoot: 返回服务注册结果SpringBoot-->>Application: Spring Boot启动成功Application-->>User: 显示应用界面

你是不是想问，这个文本再什么软件里编写呢，针对这个问题，目前大多数支持MD文档的软件都进行了支持，我这里提供几个方法：

2.1、使用官方的在线编辑器：

https://develop.git.mermaid.live/edit

2.2、使用飞书云文档中的代码绘图

如果当前自己的企业用到了飞书，个人是非常建议使用这个的，飞书还未我们提供了一些样式的设置，同样针对这个图，我们可以生成类似的如下效果

2.3、在Typora中使用

2.4、vuepress中使用

在vuepress中我们也可以使用mermaid插件，来实现业务时序图的分享。

针对1.x版本的vuepress中，可以安装mermaidjs的依赖来实现代码绘图，首先在当前项目下的package.json文件中增加上插件的依赖： "vuepress-plugin-mermaidjs": "1.9.1"，然后执行下npm install安装依赖：

"devDependencies": {"dayjs": "^1.9.7","vuepress": "^1.9.7","vuepress-plugin-baidu-tongji": "^1.0.1","vuepress-plugin-dynamic-title": "^1.0.0","vuepress-plugin-mermaidjs": "1.9.1","vuepress-plugin-one-click-copy": "^1.0.6","vuepress-theme-vdoing": "^1.12.8"}

安装完成后，在博客的config.js文件中，引入当前插件的依赖：

plugins: [[ 'mermaidjs', { gantt: { barHeight: 40 }}]]

2.5、在HTML文档

可以在Html文档中或Vue中集成这个JS的地址，也是可以使用的。

三、Mermaid的优势

当我们使用Mermaid来绘制图表时，会带来许多优势，特别是对程序员来说。以下是针对程序员的10个Mermaid优势：

  1. 简单易用：Mermaid使用直观的文本语法，无需复杂的图形工具或编程技能，即可轻松生成各种类型的图表。

  2. 快速编辑和更新：由于Mermaid图表是以文本形式定义的，程序员可以非常快速地编辑、更新和修改图表，节省了大量时间和精力。

  3. 版本控制友好：Mermaid图表可以与代码一起存储在版本控制系统中，使得团队成员可以轻松共享和协作，也方便进行版本比较和合并。

  4. 可嵌入到文档和项目中：Mermaid图表可以嵌入到各种文档格式中，如Markdown、HTML、PDF等，方便与其他文档和项目集成，提高文档的可读性和可视化效果。

  5. 支持多种输出格式：Mermaid支持将图表导出为多种格式，如SVG、PNG和PDF，适应不同的需求和平台。

  6. 跨平台支持：Mermaid可以在各种操作系统和环境下运行，包括Windows、macOS和Linux，为不同平台的程序员提供一致的图表绘制体验。

  7. 丰富的图表类型：除了时序图，Mermaid还支持绘制流程图、甘特图、类图等多种图表类型，满足不同场景下的需求。

  8. 易于分享和展示：Mermaid图表可以通过链接、图片或嵌入代码的方式进行分享和展示，方便与团队成员、客户或其他相关人员交流和沟通。

  9. 可自定义样式：Mermaid提供了一些基本的样式设置，如颜色、边框、字体等，程序员可以根据需要自定义图表的外观和风格，使其更符合项目要求。

  10. 社区支持和活跃度：Mermaid拥有活跃的开源社区，提供大量的文档、示例和工具，程序员可以从中获取帮助、学习和交流，快速掌握和应用Mermaid的技巧和最佳实践。

这些优势可以让Mermaid成为程序员在绘制图表时的首选工具，帮助他们提高效率、简化工作流程，并提升代码和文档的可视化质量。

四、使用Mermaid绘制基本的时序图

刚才我们绘制了一个应用启动的一个简单的流程图，我们接下来在分享2个，每个图都有一些特殊的效果设计和展示，大家可以多多体会和学习。

4.1、用户登录流程

以下是一个典型的语法描述：

sequenceDiagramautonumberactor User as 用户participant Frontend as 前端页面participant Backend as 后端服务器participant Database as 数据库participant AuthProvider as 认证服务提供商User->>+Frontend: 打开登录页面activate FrontendFrontend->>+User: 显示登录表单User->>+Frontend: 输入用户名和密码deactivate FrontendFrontend->>+Backend: 发送登录请求activate BackendBackend->>+AuthProvider: 验证用户身份activate AuthProviderAuthProvider-->>-Backend: 返回用户认证结果deactivate AuthProviderBackend->>-Frontend: 返回认证结果deactivate Backendactivate FrontendFrontend->>+User: 根据结果显示成功或失败消息User->>+Frontend: 点击授权按钮Frontend->>+User: 跳转至认证服务提供商页面deactivate Frontendactivate UserUser->>+AuthProvider: 授权登录activate AuthProviderAuthProvider-->>-User: 返回授权结果deactivate AuthProviderUser->>-Frontend: 返回授权结果deactivate Useractivate FrontendFrontend->>+Backend: 发送授权信息activate BackendBackend->>+Database: 存储用户登录状态activate DatabaseDatabase-->>-Backend: 返回存储结果deactivate DatabaseBackend-->>-Frontend: 返回授权结果deactivate BackendFrontend->>+User: 根据结果跳转至相应页面

显示的效果如下：

以上代码使用Mermaid语言来描述了电商用户登录流程。其中，参与流程的角色有：用户（User）、前端页面（Frontend）、后端服务器（Backend）、数据库（Database）和认证服务提供商（AuthProvider）。演示的流程包括用户打开登录页面、输入用户名和密码、发送登录请求、验证用户身份、返回认证结果、显示成功或失败消息、跳转至认证服务提供商页面、授权登录、返回授权结果、存储用户登录状态等步骤。

其中autonumber指令代表了显示操作序号，actor代表了一个时序图的小人，participant代表了一个个参与的角色。同时->>代表了从左向右的包含箭头的指令，-->>代表了一个包含返回值的指令。activate和deactivate代表了时序图激活的一个区域。

4.2、订单支付履约流程

我们使用mermaid生成了一个这样的图：

使用它的一个mermaid的语法如下：

---
title: 订单支付时序图
config:theme: basethemeVariables:primaryColor: "#ff8c1f"mermaid-container: "#ff8c1f"
---
sequenceDiagram 
autonumber
actor 用户  
participant 订单服务  
participant 支付服务  
participant 银行服务  
participant 履约服务  用户->>订单服务: 创建订单 
Note right of 用户: 此处需要注意库存问题
订单服务->>支付服务: 发送支付请求  
支付服务->>银行服务: 银行扣款  
银行服务-->>支付服务: 返回扣款结果  
支付服务-->>订单服务: 更新订单状态
Note over 订单服务,支付服务: 此处需要注意幂等性 
订单服务->>履约服务: 发货
Note right of 银行服务: 此处需要注意下游履约情况
履约服务-->>用户: 完成发货
用户->>订单服务: 确认收货  
订单服务->>订单服务: 更新订单状态为已收货  
Note right of 订单服务: 此处需要保障事务
订单服务->>订单服务: 返回更新后的订单状态  
订单服务-->>用户: 返回更新后的订单状态

里面用到了Note Over/Right这种语法，增加了一些黄色的标签，体验感觉又上了一层楼。其中通过如下指定了一个主题和颜色为橙色:

 theme: basethemeVariables:primaryColor: "#ff8c1f"mermaid-container: "#ff8c1f"

我们也可以更改为其他主题，比如绿色的主题：

看到这个绿色主题的就更加体验好了。

关于主题的说明，官方文档的连接如下：

http://mermaid.js.org/config/theming.html

这些指令在mermaid的官方教程文档中都有，想深入了解的可以去学习一下：

http://mermaid.js.org/syntax/sequenceDiagram.html

五、总结

Mermaid是一个基于文本的流程图和时序图生成工具，对于程序员来说具有很高的价值。它可以帮助程序员更好地理解和设计程序的结构和流程，同时可以方便地与团队成员共享和协作。使用Mermaid，程序员可以快速生成流程图和时序图，从而更好地表达自己的想法和设计思路，提高开发效率和代码质量。此外，Mermaid还支持自定义样式和主题，可以让程序员自由地定制图表的颜色、字体等样式，使图表更加美观和易于理解。总之，Mermaid可以帮助程序员更好地沟通和协作，提高开发效率和质量，是一款非常实用的工具。

好了，看到这里，赶紧去尝试吧，如果你安装过typora，可以使用它。如果你有飞书云文档，可以用它。

如果本篇文章对你有用，可以分享，点赞，收藏，关注哦。

感兴趣的可以加入我的个人知识星球：觉醒的新世界程序员。

目前星球人数超过1200，最近我在星球内分享开源设计相关的系列分享。想学一点开源设计的可以一起来哦

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/215716.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

spring数据校验

spring数据校验

我是南城余！阿里云开发者平台专家博士证书获得者！ 欢迎关注我的博客！一同成长！ 一名从事运维开发的worker，记录分享学习。 专注于AI，运维开发，windows Linux 系统领域的分享！ 本…
阅读更多...
数据库（一）| 数据库概述、基本概念、关系型数据库特点、超键候选码等

数据库（一）| 数据库概述、基本概念、关系型数据库特点、超键候选码等

文章目录 1 数据库的一些基础概念1.1 数据库和数据库管理系统1.2 关系模式和关系实例1.3 数据库模式和数据库实例 2 数据库组织形式2.1 数据采用文件的缺点2.2 使用数据库管理系统的 优点 3 关系型数据库特点4 三个层次的数据抽象Data Abstraction5 超键、候选码、主码、外码 1…
阅读更多...
php之jwt使用

php之jwt使用

PHP JWT（JSON Web Token）是一种用于身份验证和授权的开放标准。JWT是一个包含有关用户或实体身份信息的安全令牌，它由三部分组成：头部（Header）、载荷（Payload）和签名（Sig…
阅读更多...
计算机网络编程

计算机网络编程

网络编程 Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机， Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. 计算机网络基础 2. So…
阅读更多...
数据结构基础介绍

数据结构基础介绍

一.起源及重要性 1968 年，美国的高德纳 Donakl E . Kn uth 教授在其所写的《 计算机程序艺术》第一卷《基本算法 》 中，较系统地阐述了数据的逻辑结构和存储结构及其操作， 开创了数据结构的课程体系 ，数据结构作为一门独立的…
阅读更多...
B029-JDBC增强

B029-JDBC增强

目录 PreparedStatement 查询1.sql注入2.Statement分析 (面试题)3.PreparedStatement (面试题) 登录功能的完善事务链接池概念实现DBCP连接池实现第一种配置方式第二种配置方式 返回主键BaseDao的抽取 PreparedStatement 查询 1.sql注入 就是在sql的字符串拼接的时候&#xf…
阅读更多...
基于单片机的定时插座在智能家居中的应用

基于单片机的定时插座在智能家居中的应用

近年来，随着科学技术的发展迅速，人们对智能化的要求越来越高。越来越多的智能化产品进入千家万户，如电脑电视、扫地机器人、智能空气净化器等。这些家居电器和电子产品大都需要连接电源，为满足多种用电器的正常使用，延…
阅读更多...
DevEco Studio 生成HPK文件

DevEco Studio 生成HPK文件

DevEco Studio 生成HPK文件 一、安装环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、生成HPK文件 生成的HPK文件存放在entry文件夹下。下图是未生成HPK的样式。 生成HPK：菜单Build->Build Hap(s)/APP(s)->Build Hap(s)…
阅读更多...
启动jar包命令

启动jar包命令

一、Windows环境 找到jar包的位置； 按shift键，点击鼠标右键，选中在此处打开PowerShell窗口； 此时进入命令行工具 输入java -jar .\java_web-0.0.1-SNAPSHOT.jar（注意空格）。 二、Linux环境 2.1 方式一 …
阅读更多...
039.Python面向对象_三大特性综合案例2

039.Python面向对象_三大特性综合案例2

我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 ：👉&…
阅读更多...
一、微前端目标、前端架构的前生今世、微前端架构优势和劣势、软件设计原则与分层

一、微前端目标、前端架构的前生今世、微前端架构优势和劣势、软件设计原则与分层

1、目标 2、前端架构的前世今生 ① 初始：无架构，前端代码内嵌到后端应用中 ② 后端 MVC 架构：将视图层、数据层、控制层做分离 缺点：重度依赖开发环境，代码混淆严重（在调试时，需要启动后端所有…
阅读更多...
小型洗衣机哪个牌子质量好？迷你洗衣机排名前十名

小型洗衣机哪个牌子质量好？迷你洗衣机排名前十名

随着内衣洗衣机的流行，很多小伙伴在纠结该不该入手一款内衣洗衣机，专门来洗一些贴身衣物，答案是非常有必要的，因为我们现在市面上的大型洗衣机只能做清洁，无法对我们的贴身衣物进行一个高强度的清洁，而小小…
阅读更多...
【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 NLP 部分

【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 NLP 部分

【CCF BDCI 2023】多模态多方对话场景下的发言人识别 Baseline 0.71 NLP 部分 概述NLP 简介文本处理词嵌入上下文理解 文本数据加载to_device 函数构造数据加载样本数量 len获取样本 getitem 分词构造函数调用函数轮次嵌入 RobertaRoberta 创新点NSP (Next Sentence Prediction…
阅读更多...
23种设计模式之装饰者模式(被装饰者，接口层，装饰抽象层，具体装饰者)

23种设计模式之装饰者模式(被装饰者，接口层，装饰抽象层，具体装饰者)

23种设计模式之装饰者模式 文章目录 23种设计模式之装饰者模式设计思想装饰者模式的优点装饰者模式的缺点装饰者模式的优化方法UML 解析预设场景 代码释义总结 设计思想 原文:装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能&#xff0…
阅读更多...
应用在LED灯光控制触摸屏中的触摸芯片

应用在LED灯光控制触摸屏中的触摸芯片

LED灯光控制触摸屏方法，包括：建立触摸屏的触摸轨迹信息与LED灯光驱动程序的映射关系；检测用户施加在触摸屏上的触摸轨迹，生成触摸轨迹信息；根据生成的触摸轨迹信息，调用对应的LED灯光驱动程序，控…
阅读更多...
HJ14 字符串排序

HJ14 字符串排序

一、题目 描述 给定 n 个字符串，请对 n 个字符串按照字典序排列。数据范围： 1 \le n \le 1000 \1≤n≤1000 ，字符串长度满足 1 \le len \le 100 \1≤len≤100 输入描述： 输入第一行为一个正整数n(1≤n≤1000),下面n行为n个字符…
阅读更多...
智能优化算法应用：基于头脑风暴算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于头脑风暴算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于头脑风暴算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用：基于头脑风暴算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.头脑风暴算法4.实验参数设定5.算法结果6.…
阅读更多...
说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？

说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？

虚拟 DOM（Virtual DOM）是 React 中的一种机制，通过在内存中构建一棵轻量级的虚拟 DOM 树来代替操作浏览器 DOM，从而提高组件的渲染性能和用户体验。 在 React 中，当组件的 Props 或 State 发生变化时，Reac…
阅读更多...
智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝙蝠算法4.实验参数设定5.算法结果6.参考文献7.MA…
阅读更多...
酷开科技多维度赋能营销，实力斩获三项大奖

酷开科技多维度赋能营销，实力斩获三项大奖

在数智化新阶段、广告新生态、传播新业态的背景下，“第30届中国国际广告节广告主盛典暨网易传媒态度营销峰会”于11月18日在厦门国际会展中心盛大举行。来自全国的品牌方、战略决策者、媒体平台和品牌服务机构等汇聚一堂。在50000＋现场观众和数千万线上观…
阅读更多...
最新文章

Copyright @ 2022~2023