狂揽77k star！GitHub官方支持的画图神器，用起来够优雅！

程序员在工作中经常会有画流程图、时序图这类需求，尤其是在写文档的时候。如果有一款好用的画图工具，会极大地提高我们的效率。今天给大家分享一款Github官方支持的画图工具Mermaid，能让你像使用Markdown一样画流程图，希望对你有所帮助！

简介

Mermaid是一款基于JS的画图工具，能通过解析Markdown语法来实现图表的动态渲染，目的在于让文档的更新跟得上开发进度，目前在Github上已有77k+star。

Mermaid具有如下特性：

• 语法简单易上手：基于Markdown语法实现实时图表渲染，对程序员来说简单易于上手。
• 支持在线编辑：提供了在线的Mermaid Live Editor编辑器，既可以使用在线版本也可以用Docker自行部署。
• 支持多种图表：包括流程图、时序图、类图、状态图、实体关系图、UML图、思维导图等。
• 支持多种主题：涵盖default、neutral、dark、forest、base这5种主题。

下面是Mermaid使用过程中的效果图，还是挺炫酷的！

安装

使用Docker来安装Mermaid Live Editor还是非常方便的，我们将采用此种方式来安装。

• 首先通过如下命令下载Mermaid Live Editor的Docker镜像；

docker pull ghcr.io/mermaid-js/mermaid-live-editor

• 再通过如下命令运行对应的容器；

docker run -p 8000:8080 --name mermaid-live-editor \
-d ghcr.io/mermaid-js/mermaid-live-editor

• 接下来就可以访问Mermaid Live Editor的页面了，我们可以通过切换Sample Diagrams来查看生成图表的效果，访问地址：http://192.168.3.101:8000

使用

接下来我们就以《mall学习教程》中的图表为例，来讲解下Mermaid的使用。

mall项目

这里简单介绍下mall项目，mall项目是一套基于SpringBoot3 + Vue 的电商系统（Github标星60K），后端支持多模块和2024最新微服务架构 ，采用Docker和K8S部署。包括前台商城项目和后台管理系统，能支持完整的订单流程！涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能！

• Boot项目：https://github.com/macrozheng/mall
• Cloud项目：https://github.com/macrozheng/mall-swarm
• 教程网站：https://www.macrozheng.com

项目演示：

流程图

流程图（Flowchart）是用的比较多的图表，对于复杂的业务流程，使用流程图能让人比较好理解。这里以mall项目的下单流程为例，来讲解下Mermaid的使用。

• 首先我们在Mermaid Live Editor的code中添加如下代码；

--
title: 生成确认单流程
---
flowchart TD
    A[获取购物车信息并计算好优惠] --> B(从ums_member_receive_address表中获取会员收货地址列表)
    B --> C(获取该会员所有优惠券信息)
    C --> D{{根据use_type判断每个优惠券是否可用}}
    D -->|0| E(全场通用)
    E --> H{{判断所有商品总金额是否满足使用起点金额}}
    H -->|否| I[得到用户不可用优惠券列表]
    H -->|是| J(得到用户可用优惠券列表)
    J --> K(获取用户积分)
    K --> L(获取积分使用规则)
    L --> M[计算总金额，活动优惠，应付金额]
    D -->|-1| F(指定分类)
    F --> N{{判断指定分类商品总金额是否满足使用起点金额}}
    N -->|否| I
    N -->|是| J
    D -->|2| G(指定商品)
    G --> O{{判断指定分类商品总金额是否满足使用起点金额}}
    O -->|否| I
    O -->|是| J

• 之后Mermaid Live Editor就会为我们生成对应的流程图了；

• Mermaid流程图的语法关键说明如下；

  • flowchart代表流程图；
  • TD代表从上往下的结构；
  • -->代表流程的箭头；
  • []代表方框；
  • ()代表圆角方框；
  • {{}}代表六边形；
  • ||代表连线上的文字；

时序图

时序图（Sequence Diagram），它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。我们在学习Oauth2的时候，第一步就是要搞懂Oauth2的流程，这时候有个时序图帮助可就大了。下面我们使用Mermaid来绘制Oauth2中使用授权码模式颁发令牌的时序图。

• 首先我们在Mermaid Live Editor的code中添加如下代码；

---
title: Oauth2令牌颁发之授权码模式
---
sequenceDiagram
    autonumber
    actor user as User
    participant userAgent as User Agent
    participant client as Client
    participant login as Auth Login
    participant server as Auth Server
    user->>userAgent: 访问客户端
    userAgent->>login:重定向到授权页面+clientId+redirectUrl
    login->>server:用户名+密码+clientId+redirectUrl
    server-->>login:返回授权码
    login-->>userAgent:重定向到redirectUrl+授权码code
    userAgent->>client:使用授权码code换取令牌
    client->>server:授权码code+clientId+clientSecret
    server-->>client:颁发访问令牌accessToken+refreshToken
    client-->>userAgent:返回访问和刷新令牌
    userAgent-->>user:令牌颁发完成

• 之后Mermaid Live Editor就会为我们生成对应的时序图了；

• Mermaid时序图的语法关键说明如下；

  • sequenceDiagram代表时序图；
  • autonumber代表给箭头自动添加序号；
  • actor代表人形参与者；
  • participant代表普通参与者；
  • ->>代表实现箭头；
  • -->>代表虚线箭头。

类图

类图(Class Diagram)可以表示类的静态结构，比如类中包含的属性和方法，还有类的继承结构。下面我们用Mermaid来画个类图。

• 首先我们在Mermaid Live Editor的code中添加如下代码；

classDiagram
    Person <|-- Student
    Person <|-- Teacher
    class Person {
        # String name
        # Integer age
        + void move()
        + void say()
    }
    class Student {
        - String studentNo
        + void study()
    }
    class Teacher {
        - String teacherNo
        + void teach()
    }

• 之后Mermaid Live Editor就会为我们生成对应的类图了；

• Mermaid类图的语法关键说明如下；

  • classDiagram代表类图；
  • class代表类；
  • <|--代表继承结构；
  • #代表protect，+代表public，-代表private。

思维导图

思维导图（Mindmap），是表达发散性思维的有效图形工具，它简单却又很有效，是一种实用性的思维工具。这里以mall项目的技术栈、核心功能、部署上线为例来讲解下Mermaid的使用。

• 首先我们在Mermaid Live Editor的code中添加如下代码；

mindmap
  root[电商实战项目]
    mall[mall项目]
        stack1[技术栈]
            Spring Boot
            MyBatis
            MySQL
            Redis
            Elasticsearch
            MongoDB
            RabbitMQ
            MinIO
        business1[核心功能]
            商品模块
            订单模块
            营销模块
            权限模块
        deploy1[部署上线]
            Linux
            Docker
            Jenkins
    mall-swarm[mall-swarm微服务项目]
        stack2[技术栈]
            Spring Cloud核心组件
            Spring Cloud Alibaba核心组件
            Sa-Token
        business2[核心功能]
            从购物车到下单到支付的完整订单流程
            一套通用的微服务项目脚手架
        deploy2[部署上线]
            Kubernetes
            KubeSphere

• 之后Mermaid Live Editor就会为我们生成对应的思维导图了；

• Mermaid思维导图的语法关键说明如下；

  • mindmap代表思维导图
  • []代表方框

主题设置

之前我们使用的是Mermaid的默认主题，其实Mermaid一个支持5种主题：default、neutral、dark、forest、base。

• 我们打开config面板，修改下theme属性就能切换主题了；

• 除此之外，还支持手绘风格。

总结

Mermaid能让我们用Markdown来画流程图，使用起来确实很优雅，而且支持的图表种类也很多，感兴趣的小伙伴可以尝试下！

项目地址

https://github.com/mermaid-js/mermaid