Mermaid 图例
Mermaid 官方网站： https://mermaid.js.org/， Mermaid 其实是很复杂的图表库，日常使用，一般主要是先记住有哪些图例类型，然后现用现查。这里的图例不是支持的全部类型，有些新类型可能没有列出来，具体的可以去官网查看。
流程图
flowchart TD
A[用户下单] --> B{库存检查}
B --> |库存充足| C[生成订单并锁定库存]
C --> D[支付处理]
D --> E{支付成功}
E --> |是| F[订单发货]
F --> G[物流配送]
G --> H[用户确认收货]
H --> I[订单完成，释放库存锁定]
E --> |否| J[取消订单，释放库存锁定]
B --> |库存不足| K[通知供应商补货]
K --> L{供应商是否有货}
L --> |是| M[等待供应商补货，重新检查库存]
M --> B
L --> |否| N[通知用户无货，取消订单]
N --> J
时序图
sequenceDiagram
autonumber
participant Customer as 顾客
participant Website as 购物网站
participant Payment as 支付系统
participant Warehouse as 仓库
participant Delivery as 物流系统
Customer->>Website: 浏览商品
Website-->>Customer: 展示商品列表
Customer->>Website: 选择商品加入购物车
Website-->>Customer: 确认商品已加入购物车
Customer->>Website: 结算购物车
Website->>Payment: 请求支付授权
Payment-->>Website: 返回支付授权结果
alt 支付成功
Website->>Warehouse: 生成订单，通知备货
Warehouse-->>Website: 确认备货
Website-->>Customer: 订单已确认，等待发货
Warehouse->>Delivery: 发货，传递物流信息
Delivery-->>Warehouse: 确认接收货物
Delivery->>Customer: 配送中，发送物流更新
Customer->>Delivery: 确认收货
Delivery-->>Website: 反馈收货信息
Website-->>Customer: 订单完成，感谢购买
else 支付失败
Website-->>Customer: 支付失败，请重试
end
状态图
stateDiagram
[*] --> Ordered: 用户下单，订单生成
Ordered --> PaymentPending: 等待用户支付
PaymentPending --> Paid: 用户完成支付
PaymentPending --> Cancelled: 用户取消订单
Paid --> [*]: 商家确认订单，开始处理
state PaymentPending {
[*] --> WaitingForPayment: 等待支付操作
WaitingForPayment --> PaymentProcessing: 用户开始支付，处理中
PaymentProcessing --> Paid: 支付成功
PaymentProcessing --> PaymentFailed: 支付失败
PaymentFailed --> WaitingForPayment: 用户重新支付
}
类图
classDiagram
class User {
-id: int
-name: string
-email: string
-password: string
-address: string
+register()
+login()
+updateProfile()
+deleteAccount()
}
class Product {
-id: int
-name: string
-price: float
-description: string
-category: string
-brand: string
-stock: int
+getDetails()
+updateStock()
+getReviews()
}
class Cart {
-id: int
-userId: int
-items: Product[]
+addItem()
+removeItem()
+updateQuantity()
+getTotalPrice()
}
class Order {
-id: int
-userId: int
-items: Product[]
-totalPrice: float
-status: string
-paymentMethod: string
-shippingAddress: string
+placeOrder()
+cancelOrder()
+trackOrder()
+updateStatus()
}
class Review {
-id: int
-userId: int
-productId: int
-rating: int
-comment: string
+submitReview()
+editReview()
+deleteReview()
}
class Payment {
-id: int
-orderId: int
-amount: float
-status: string
+processPayment()
+refundPayment()
}
User "1" -- "*" Cart : has
User "1" -- "*" Order : has
User "1" -- "*" Review : writes
Cart "1" -- "*" Product : contains
Order "1" -- "*" Product : contains
Review "1" -- "1" Product : about
Order "1" -- "1" Payment : has
甘特图
gantt
title 电商项目开发与运营甘特图
dateFormat YYYY-MM-DD
axisFormat %Y-%m-%d
section 项目筹备
市场调研 :a1, 2025-04-10, 7d
竞品分析 :a2, after a1, 7d
确定需求与规划 :a3, after a2, 7d
section 系统开发
前端开发 :b1, 2025-04-28, 14d
后端开发 :b2, 2025-04-28, 14d
数据库搭建 :b3, 2025-04-28, 7d
前后端联调 :b4, after b1, 7d
section 测试与上线
功能测试 :c1, after b4, 7d
性能测试 :c2, after c1, 7d
修复漏洞 :c3, after c2, 7d
正式上线 :c4, after c3, 1d
section 运营与推广
制定营销方案 :d1, 2025-05-22, 7d
社交媒体推广 :d2, after d1, 14d
数据分析与优化 :d3, after c4, 30d
实体关系图
erDiagram
CUSTOMER ||--o{ ORDER : "places"
ORDER ||--|{ ORDER_ITEM : "contains"
ORDER_ITEM ||--o{ PRODUCT : "refers to"
ORDER ||--o{ PAYMENT : "has"
CUSTOMER {
string customer_id
string name
string email
string phone
}
ORDER {
string order_id
string order_date
string customer_id
string shipping_address
decimal total_amount
}
ORDER_ITEM {
string order_item_id
string order_id
string product_id
int quantity
decimal unit_price
}
PRODUCT {
string product_id
string product_name
string description
decimal price
int stock_quantity
}
PAYMENT {
string payment_id
string order_id
string payment_method
decimal payment_amount
string payment_status
}
用户地图
journey
title 电商购物流程
section 用户端
浏览商品: 用户打开电商平台，浏览各类商品
加入购物车: 用户选择心仪商品，点击加入购物车
结算下单: 用户确认购物车商品，填写收货信息，选择支付方式后下单
支付成功: 用户完成支付操作，收到支付成功通知
section 商家端
接收订单: 商家收到用户的订单信息
商品备货: 商家检查库存，准备商品
安排发货: 商家将商品交给物流配送商
section 物流端
揽收包裹: 物流人员上门揽收商家发出的包裹
运输途中: 包裹在运输途中，经过不同的转运中心
派件通知: 包裹到达目的地，快递员通知用户准备收件
确认收货: 用户收到包裹，确认商品无误后在平台上确认收货
饼图
pie
title 某电商平台Q2季度各品类商品销售额占比
"电子产品" : 300
"服装" : 200
"家居用品" : 180
"美妆护肤" : 120
"食品" : 100
Git 图
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
思维导图
mindmap
root((电商业务场景))
顾客端
商品浏览
搜索商品
浏览推荐商品
分类筛选
下单购买
加入购物车
填写收货信息
选择支付方式
售后服务
退换货申请
评价商品
咨询客服
商家端
商品管理
上架商品
编辑商品信息
下架商品
订单处理
确认订单
安排发货
处理退款
营销推广
制定促销活动
广告投放
会员管理
平台运营
技术维护
服务器管理
系统更新
数据安全
规则制定
商家入驻规则
交易规则
评价规则
数据分析
用户行为分析
销售数据分析
市场趋势分析
时间线
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter