Easily Generate Sequence Diagrams with Mermaid – A Practical Guide for Developers

Background

Sequence diagrams describe interactions between components; Mermaid provides a text‑based syntax that generates these diagrams quickly, improving documentation efficiency.

What is Mermaid

Mermaid is an open‑source charting library that supports flowcharts, sequence diagrams, Gantt charts, and other chart types. It can export diagrams as SVG, PNG, or PDF. Official site: https://mermaid.js.org/.

Advantages for developers

Simple to use – intuitive text syntax requires no graphic tools.

Fast editing – text definitions can be edited and updated instantly.

Version‑control friendly – diagrams live alongside code in VCS.

Embeddable – can be placed in Markdown, HTML, PDF, etc.

Multiple export formats – SVG, PNG, PDF.

Cross‑platform – runs on Windows, macOS, Linux.

Rich chart types – sequence, flow, Gantt, class diagrams, and more.

Easy sharing – export as images or embed via links.

Customizable style – themes and CSS variables allow visual tweaks.

Active community – many examples and community support.

How to use Mermaid

Mermaid can be written in any Markdown‑compatible editor. Common tools include the official online editor (https://develop.git.mermaid.live/edit), Feishu cloud docs, Typora, and VuePress via the vuepress-plugin-mermaidjs plugin.

Application startup sequence diagram

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: 显示应用界面

User login flow

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: 根据结果跳转至相应页面

Order payment and fulfillment flow with theming

---
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 订单服务: 此处需要保障事务
订单服务->>订单服务: 返回更新后的订单状态
订单服务-->>用户: 返回更新后的订单状态

Changing theme to forest switches the diagram to a green theme. Theme documentation: http://mermaid.js.org/config/theming.html.

Integrating Mermaid in VuePress

"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"
}

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

After installing the dependencies, add the plugin configuration to config.js; Mermaid diagrams render automatically in the site.

Summary

Mermaid enables lightweight, code‑centric creation of sequence diagrams and other charts, making documentation faster, version‑control friendly, and easily customizable through themes and integration with tools such as Typora, Feishu, and VuePress.