原来使用代码也可以画时序图，用这个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元素，就可以实现一个统一效果和展示的，非常可以提高我们日常开发工作中的文档编写，业务表达等等的一些效率。那么上面的这个图是如何生成的呢，其实只需要写个如下代码就行了：

sequenceDiagram
    participant User
    participant Application
    participant SpringBoot
    participant DataSource
    participant Service

    User->>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、用户登录流程

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

sequenceDiagram
    autonumber
    actor User as 用户
    participant Frontend as 前端页面
    participant Backend as 后端服务器
    participant Database as 数据库
    participant AuthProvider as 认证服务提供商

    User->>+Frontend: 打开登录页面
    activate Frontend

    Frontend->>+User: 显示登录表单
    User->>+Frontend: 输入用户名和密码
    deactivate Frontend
    Frontend->>+Backend: 发送登录请求
    activate Backend

    Backend->>+AuthProvider: 验证用户身份
    activate AuthProvider
    AuthProvider-->>-Backend: 返回用户认证结果
    deactivate AuthProvider

    Backend->>-Frontend: 返回认证结果
    deactivate Backend
    activate Frontend
    Frontend->>+User: 根据结果显示成功或失败消息

    User->>+Frontend: 点击授权按钮
    Frontend->>+User: 跳转至认证服务提供商页面
    deactivate Frontend
    activate User

    User->>+AuthProvider: 授权登录
    activate AuthProvider
    AuthProvider-->>-User: 返回授权结果
    deactivate AuthProvider

    User->>-Frontend: 返回授权结果
    deactivate User
    activate Frontend
    Frontend->>+Backend: 发送授权信息
    activate Backend

    Backend->>+Database: 存储用户登录状态
    activate Database
    Database-->>-Backend: 返回存储结果
    deactivate Database

    Backend-->>-Frontend: 返回授权结果
    deactivate Backend
    Frontend->>+User: 根据结果跳转至相应页面

显示的效果如下：

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

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

4.2、订单支付履约流程

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

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

---
title: 订单支付时序图
config:
  theme: base
  themeVariables:
    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: base
  themeVariables:
    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.mfbz.cn/a/238113.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构基础介绍

数据结构基础介绍

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

记录一次postgresql临时表丢失问题

项目相关技术栈 springboot hikari连接池pgbouncerpostgresql数据库 背景 为了优化一个任务执行的速度，我将任务的sql中部分语句抽出生成临时表（create temp table tempqw as xxxxxxxxx），再和其他表关联，提高查询速…
阅读更多...
php之jwt使用

php之jwt使用

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

Linux上进行Nacos安装

Nacos安装指南 仅供参考，若有错误，欢迎批评指正！ 后期会继续上传docker安装nacos的过程！ 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面，提供有下载链接，可以下载编译好…
阅读更多...
PyTorch张量：内存布局

PyTorch张量：内存布局

你可能对 torch 上的某些函数感到困惑，它们执行相同的操作但名称不同。 例如： reshape()、view()、permute()、transpose() 等。 这些函数的做法真的不同吗？ 不！ 但为了理解它，我们首先需要了解一下张量在 pytorch 中…
阅读更多...
Http模块

Http模块

Http模块 1.创建http服务 //导入http模块 const http require(http)//创建服务对象 const server http.createServer((request,response)>{response.end(Hello HTTP Server) })// 监听端口，启动服务 server.listen(9000,()>{console.log(服务已启动....);…
阅读更多...
【Jeecg Boot 3 - 第二天】2.1、nginx 部署 JEECGBOOT VUE3

【Jeecg Boot 3 - 第二天】2.1、nginx 部署 JEECGBOOT VUE3

一、场景 二、实战 ▶ 2.1、打包（build 前端） ＞ Stage 1：修改配置文件 .env.production（作用：指向后端接口地址） ＞ Stage 2：点击build（作用&#xff1…
阅读更多...
智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码

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

智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用：基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝙蝠算法4.实验参数设定5.算法结果6.参考文献7.MA…
阅读更多...
HeartBeat监控Redis状态

HeartBeat监控Redis状态

目录 一、概述 二、 安装部署 三、配置 四、启动服务 五、查看数据 一、概述 使用heartbeat可以实现在kibana界面对redis服务存活状态进行观察，如有必要，也可在服务宕机后立即向相关人员发送邮件通知 二、 安装部署 参照文章：HeartBeat监…
阅读更多...
「差生文具多系列」推荐两个好看的 Redis 客户端

「差生文具多系列」推荐两个好看的 Redis 客户端

📢 声明： 🍄 大家好，我是风筝 🌍 作者主页：【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正，不胜感激。 直达博主：「…
阅读更多...
前端 三种解决跨域问题 jsonp 、CORS、代理服务器 解决跨域全家桶

前端 三种解决跨域问题 jsonp 、CORS、代理服务器 解决跨域全家桶

我的报错情况是 后端接口是3000 前端本地接口是8080，最后出现跨域 1.什么是跨域？ 首先跨域是一种安全机制，是在开发上线前考虑到的安全问题并且需要采取合适的手段去避免这个问题带来的程序错误,接口跨域可以后端处理,也可以前端处理&#x…
阅读更多...
Appium微信小程序自动化环境准备

Appium微信小程序自动化环境准备

一、前置说明 微信从8.0.19开始内核从x5换成xweb之后，原先的开启webview调试的原方案已经会报503错误。 点击下面的链接，都会报503错误： http://debugmm.qq.com/?forcex5ture http://debugx5.qq.com 微信内核升级为xweb之后，需要…
阅读更多...
LeetCode力扣每日一题（Java）：58、最后一个单词的长度

LeetCode力扣每日一题（Java）：58、最后一个单词的长度

一、题目 二、解题思路 1、我的思路 先将字符串转换成字符数组 由于我们需要获取最后一个单词的长度，所以我们从后往前遍历字符数组 我们还需判断所遍历的字符是不是字母，即判断每个字符对应的ASCII值即可，用计数器count来储存单词长度 …
阅读更多...
小型洗衣机哪个牌子质量好？迷你洗衣机排名前十名

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

随着内衣洗衣机的流行，很多小伙伴在纠结该不该入手一款内衣洗衣机，专门来洗一些贴身衣物，答案是非常有必要的，因为我们现在市面上的大型洗衣机只能做清洁，无法对我们的贴身衣物进行一个高强度的清洁，而小小…
阅读更多...
Unity优化——加速物理引擎1

Unity优化——加速物理引擎1

大家好，这里是七七，今天开始更新物理引擎相关的优化部分了，本文介绍的是物理引擎内部工作情况。 Unity技术有两种不同的物理引擎：用于3D物理的Nvidia的PhysX和用于2D物理的开源项目Box2D。然而，Unity对它们的实现是高…
阅读更多...
和鲸科技携手深圳数据交易所，“数据+数据开发者生态”赋能人工智能产业发展

和鲸科技携手深圳数据交易所，“数据+数据开发者生态”赋能人工智能产业发展

信息化时代，数据驱动决策的重要性日益凸显。通过利用数据可以深入了解市场需求、客户行为、竞争态势等关键信息，从而制定更为有效的战略和决策。围绕推动数据要素产业发展，近日，深圳数据交易所（以下简称“深数所”&…
阅读更多...
MySQL InnoDB Replication部署方案与实践

MySQL InnoDB Replication部署方案与实践

1. 概述 MySQL Innodb ReplicaSet 是 MySQL 团队在 2020 年推出的一款产品，用来帮助用户快速部署和管理主从复制，在数据库层仍然使用的是主从复制技术。 ReplicaSet 主要包含三个组件：MySQL Router、MySQL Server 以及 MySQL Shell 高级客户…
阅读更多...
在线课堂知识付费小程序源码系统 开发组合PHP+MySQL：用手机随时随地地学习，讲师亲自在线授业解惑 带安装部署教程

在线课堂知识付费小程序源码系统 开发组合PHP+MySQL：用手机随时随地地学习，讲师亲自在线授业解惑 带安装部署教程

近年来，人们对于学习的需求也日益增加。传统的课堂教学已经无法满足人们的学习需求，而在线课堂则能够让人们随时随地地进行学习。同时，随着知识付费的兴起，越来越多的讲师也愿意将自己的知识和经验分享给更多的人。因此&#xff0…
阅读更多...
温湿度传感器DHT11的简单应用

温湿度传感器DHT11的简单应用

文章目录 一、DHT11是什么？二、使用步骤1.硬件1.硬件连接2.工作原理1.串行单总线2.温湿度数据采集原理 2.软件1.DHT11初始化如下（示例）：2.DHT11复位如下（示例）：3.等待DHT11的回应如下&#xff0…
阅读更多...
@Transactional失效问题

@Transactional失效问题

作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO 联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬 关于Transactional 日…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站