Master Mermaid: Build Flowcharts, Sequence & Class Diagrams via Docker

Introduction

Mermaid is a JavaScript diagram tool that renders charts from Markdown syntax, with over 77k stars on GitHub.

Features:

Simple syntax based on Markdown, easy for developers.

Online editor (Mermaid Live Editor) and Docker deployment.

Supports many diagram types: flowchart, sequence, class, state, ER, UML, mindmap, etc.

Five themes: default, neutral, dark, forest, base.

Installation

Use Docker to install Mermaid Live Editor.

<code>docker pull ghcr.io/mermaid-js/mermaid-live-editor</code>

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

Access the editor at http://192.168.3.101:8000 and switch Sample Diagrams to view results.

Usage

Example based on the mall project.

Mall Project

The mall project is a SpringBoot3 + Vue e‑commerce system with microservice architecture, Docker and K8s deployment, covering product, order, cart, permissions, coupons, membership, payment, and other functions.

Boot project: https://github.com/macrozheng/mall

Cloud project: https://github.com/macrozheng/mall-swarm

Video tutorials: https://www.macrozheng.com/video/

Flowchart

Illustrates the order placement process.

<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
</code>

Key syntax:

flowchart

for flowcharts,

TD

for top‑down layout,

-->

for arrows,

[]

for boxes,

()

for rounded boxes,

{{}}

for hexagons,

||

for edge labels.

Sequence Diagram

OAuth2 authorization code flow.

<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: 令牌颁发完成
</code>

Key syntax:

sequenceDiagram

,

autonumber

,

actor

,

participant

,

-->>

for dashed arrows.

Class Diagram

Shows static class structure.

<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()
    }
</code>

Key syntax:

classDiagram

,

class

,

<|--

for inheritance, visibility symbols

#

,

+

,

-

.

Mindmap

Displays project tech stack and core functions.

<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
</code>

Theme Settings

Mermaid supports five themes; modify the config panel's theme property to switch.

Conclusion

Mermaid lets you create diagrams with Markdown syntax elegantly, supporting many chart types; interested users can try it.

Project URL

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