本文由 莫潇羽@源码七号站 原创撰写，首发于 www.fuyuan7.com，转载请注明出处。
作为一名在技术圈摸爬滚打多年的老司机，我深知写技术文档时的那份纠结——逻辑要清晰、表述要准确、图表要专业。尤其是当我们需要把复杂的系统架构、业务流程或者数据流向可视化呈现出来的时候，Mermaid这个工具简直是程序员的福音。几行代码就能生成流程图、时序图、甘特图，效率确实没得说。
但是，说句掏心窝子的话，每次看到Mermaid默认渲染出来的图表，总觉得哪里不太对劲。那种棱角分明的线条、单调的配色、毫无设计感的排版，活脱脱就是一股"理工直男风"——功能是有了，但要放进PPT里做汇报，或者发到技术博客里分享，总觉得有点拿不出手。
最近我在GitHub上发现了一个特别火的开源项目，三天内Star数就暴涨了好几千，仔细研究之后发现确实是解决了我们这些技术人的一大痛点。今天这篇文章，莫潇羽就带着大家从原理到实践，把这套Mermaid美化方案彻底吃透。不管你是刚入行的小白，还是已经在技术圈混迹多年的老鸟，相信看完之后都会有所收获。
一、为什么我们需要美化Mermaid图表
在正式开始讲解之前，我觉得有必要先和大家聊聊，为什么默认的Mermaid图表会让人觉得不够"高级"，以及美化这件事到底重不重要。
1.1 Mermaid的优势与局限
Mermaid是由Knut Sveidqvist创建的一款基于JavaScript的图表绘制工具，它最大的特点就是用纯文本的方式来定义图表结构。你不需要学习复杂的设计软件，不需要手动拖拽调整每个节点的位置，只需要按照特定的语法写几行代码，图表就自动生成了。
这种"代码即图表"的理念有几个明显的好处：
- 版本可控：图表的源代码可以和项目代码一起进行版本管理，修改记录一目了然
- 协作方便：团队成员可以像review代码一样review图表的变更
- 维护简单：业务流程变了，改几行代码就行，不用重新画图
- 嵌入便捷：Markdown编辑器、各种文档平台普遍支持Mermaid的渲染
正因为这些优势，Mermaid已经成为了技术文档领域的事实标准。在GitHub、GitLab、Notion、语雀等主流平台上，你都可以直接使用Mermaid语法来绘制图表。
但问题也随之而来——Mermaid的默认样式真的很一般。
1.2 默认样式的痛点分析
作为源码七号站的站长，我经常需要写各种技术教程和架构分析文章，Mermaid图表用得不少。在长期使用过程中，我总结出默认样式的几个主要问题：
配色单调：默认的配色方案往往就是几种基础颜色的简单组合，缺乏层次感和视觉吸引力。尤其是在暗色主题的文档里，默认配色往往显得格格不入。
线条生硬：节点之间的连接线缺乏美感，箭头样式也比较呆板。对于需要展示复杂交互关系的时序图来说，这个问题尤其明显。
排版僵化：节点的大小、间距、对齐方式都是固定的，很难根据实际内容进行灵活调整。有时候一个节点的文字多了一点，整个图表的布局就会变得很奇怪。
风格不统一：当我们把Mermaid生成的图表放到精心设计的PPT或者产品文档里时，那种风格上的割裂感会特别明显。就好像一群穿西装的人里面突然混进了一个穿格子衬衫的程序员。
1.3 美化的意义与价值
可能有人会说，技术文档嘛，内容正确最重要，形式不重要。这话有一定道理，但也不完全对。
在我多年的技术写作和分享经验中，莫潇羽深刻体会到，一张设计精良的图表，不仅能让读者更愿意去理解你想表达的内容，还能体现出你对待工作的态度。尤其是在以下场景中，图表的视觉呈现尤为重要：
- 向非技术背景的领导或客户汇报系统架构时
- 在技术博客或公众号发布教程文章时
- 制作对外发布的产品技术文档时
- 准备技术分享会或培训材料时
好的视觉呈现能够降低理解成本，提升专业形象，让你的技术方案更有说服力。这就是为什么我们需要认真对待Mermaid图表的美化问题。
二、beautiful-mermaid项目深度解析
接下来进入正题，让我们来详细了解一下这个能够解决Mermaid美化问题的开源项目——beautiful-mermaid。
2.1 项目背景与设计理念
beautiful-mermaid是由Luki Labs团队开发的一个开源项目，项目地址是 https://github.com/lukilabs/beautiful-mermaid 。从项目的描述来看，这个工具的诞生源于一个很实际的需求：在AI辅助编程时代，越来越多的技术文档是由AI协助生成的，其中包含大量的Mermaid图表。如何让这些图表既正确又美观，成为了一个值得解决的问题。
项目的核心设计理念可以概括为以下几点：
极简主义：只需要两种颜色（背景色和前景色），就能生成一张协调美观的图表。这种设计极大地降低了使用门槛，你不需要是设计师，也能做出好看的图表。
智能推导：基于你指定的两种主色，系统会自动计算出线条颜色、填充色、高亮色等所有其他颜色。这背后用到了CSS的color-mix()函数，后面我会详细讲解其原理。
双输出模式：除了常见的SVG矢量图输出，还支持ASCII字符画输出。这意味着即使在纯文本环境（比如终端、代码注释）中，你也能看到有设计感的图表。
零依赖：整个渲染过程不依赖DOM，纯TypeScript实现，可以在任何JavaScript运行环境中使用。
2.2 技术架构与核心原理
要真正理解beautiful-mermaid的强大之处，我们需要深入了解它的技术实现。作为源码七号站的技术内容创作者，我习惯把复杂的技术拆解成容易理解的部分。
2.2.1 主题系统的设计
beautiful-mermaid的主题系统是整个项目的核心。它采用了一种被称为"Mono Mode"（单色模式）的设计思路——只用两种颜色就能构建出整个图表的视觉体系。
具体来说，你只需要指定：
- bg（background）：图表的背景色
- fg（foreground）：图表的前景色
系统会基于这两种颜色，自动推导出：
- line：连接线的颜色
- accent：箭头、高亮部分的颜色
- muted：次要文字、标签的颜色
- surface：节点填充的颜色
- border：节点边框的颜色
这种设计的精妙之处在于，无论你选择什么样的主色调组合，生成的图表在视觉上都是和谐统一的。这是因为所有派生颜色都是从主色调通过数学计算得出的，它们之间存在内在的色彩关系。
2.2.2 color-mix()函数的魔力
beautiful-mermaid的颜色推导机制依赖于CSS的color-mix()函数。这是一个相对较新的CSS特性，它能够在指定的色彩空间中混合两种颜色，生成一种新的颜色。
color-mix()的基本语法是这样的：
color-mix(in <color-space>, <color1> [<percentage>], <color2> [<percentage>])其中：
<color-space>指定颜色混合所使用的色彩空间，常用的有srgb、lab、lch等<color1>和<color2>是要混合的两种颜色<percentage>可选，指定每种颜色的混合比例，默认各50%
举个例子，如果我们想把红色和蓝色按50:50的比例混合，可以这样写：
background-color: color-mix(in srgb, red, blue);结果会得到一种紫色。
beautiful-mermaid巧妙地利用了这个特性。当你只提供背景色和前景色时，它会通过不同比例的color-mix()来计算其他颜色：
// 伪代码示意
const surface = colorMix(bg, fg, 0.1); // 节点填充色：主要是背景色，混入少量前景色
const border = colorMix(bg, fg, 0.3); // 边框色：背景色和前景色的中间偏浅
const line = colorMix(bg, fg, 0.5); // 连线色：两者的中间色
const muted = colorMix(bg, fg, 0.6); // 次要文字色
const accent = fg; // 强调色：直接使用前景色这样的设计确保了所有颜色都在同一个色彩体系内，视觉上自然和谐。
2.2.3 Mono Mode与Enrichment Mode
beautiful-mermaid提供了两种使用模式：
Mono Mode（单色模式）：只需要提供bg和fg两种颜色，其他颜色全部由系统推导。这是最简单的使用方式，适合快速生成图表。
Enrichment Mode（增强模式）：在Mono Mode的基础上，允许你手动指定部分派生颜色，实现更精细的控制。比如你可能对系统推导出的线条颜色不太满意，可以单独覆盖它。
代码示例：
// Mono Mode - 最简用法
const svg = await renderMermaid(diagram, {
bg: '#1a1b26',
fg: '#a9b1d6',
});
// Enrichment Mode - 精细控制
const svg = await renderMermaid(diagram, {
bg: '#1a1b26',
fg: '#a9b1d6',
line: '#3d59a1', // 自定义线条颜色
accent: '#7aa2f7', // 自定义强调色
muted: '#565f89', // 自定义次要文字色
surface: '#292e42', // 自定义节点填充色
border: '#3d59a1', // 自定义边框色
});2.2.4 ASCII渲染引擎
beautiful-mermaid的另一个亮点是支持ASCII字符画输出。这个功能的实现基于m实现基于mermaid-ascii项目（由Alexander Grooff开发），Luki Labs团队将其从Go语言移植到了TypeScript，并进语言移植到了TypeScript，并进行了扩展。
ASCII渲染的原理是将图表的每个元素（节点、边、箭头等）映射为特定的字符组合。比如：
- 矩形节点用
┌─┐、│ │、└─┘这样的字符组合来绘制 - 连接线用
─、│、├、┤等字符来表示 - 箭头用
>、<、▶、◀等字符来表示
ASCII模式的好处是可以在任何纯文本环境中显示，比如：
- 终端/命令行界面
- 代码注释
- 邮件正文
- 不支持图片的文档格式
对于需要在终端中查看系统架构，或者想在代码注释中添加流程图的开发者来说，这个功能非常实用。
2.3 支持的图表类型
目前beautiful-mermaid支持以下五种图表类型：
Flowchart（流程图）：最常用的图表类型，用于展示流程、步骤、决策等。
State Diagram（状态图）：展示系统或对象在不同状态之间的转换关系。
Sequence Diagram（时序图）：展示多个参与者之间的交互过程和时间顺序。
Class Diagram（类图）：面向对象设计中用于展示类的结构和关系。
ER Diagram（实体关系图）：数据库设计中用于展示实体和实体之间的关系。
这五种图表覆盖了技术文档中最常见的可视化需求。
2.4 内置主题一览
beautiful-mermaid内置了15种精心设计的主题，涵盖了亮色、暗色、中性等多种风格。这些主题的设计灵感来源于一些知名的设计系统，比如Linear、Vercel等现代科技产品的视觉风格。
使用内置主题非常简单：
import { renderMermaid, themes } from 'beautiful-mermaid';
// 使用内置主题
const svg = await renderMermaid(diagram, themes.tokyoNight);如果你熟悉VS Code的主题系统，beautiful-mermaid还支持直接使用Shiki（VS Code语法高亮引擎）的主题。这意味着你可以让图表的配色和代码编辑器的主题保持一致。
三、beautiful-mermaid安装与基础使用
理论知识讲得差不多了，接下来莫潇羽带大家进入实操环节。这部分内容会尽可能详细，确保即使是刚接触这些工具的小白也能顺利上手。
3.1 环境准备
在开始之前，你需要确保开发环境中已经安装了Node.js。如果你还没有安装，可以按照以下步骤操作：
Windows用户：
访问Node.js官网（https://nodejs.org/），下载LTS（长期支持）版本的安装包，双击运行，一路点击"下一步"即可完成安装。
安装完成后，打开命令提示符（按Win+R，输入cmd，回车），输入以下命令验证安装是否成功：
node --version
npm --version如果能看到版本号输出，说明安装成功。
macOS用户：
推荐使用Homebrew进行安装：
brew install node如果没有安装Homebrew，可以先执行：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Linux用户：
以Ubuntu为例：
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs3.2 安装beautiful-mermaid
beautiful-mermaid以npm包的形式发布，安装非常简单。打开终端，进入你的项目目录，执行：
npm install beautiful-mermaid如果你使用的是其他包管理器：
# 使用yarn
yarn add beautiful-mermaid
# 使用pnpm
pnpm add beautiful-mermaid
# 使用bun
bun add beautiful-mermaid安装完成后，你就可以在项目中引入并使用了。
3.3 第一个美化示例
让我们来创建一个简单的示例，感受一下beautiful-mermaid的效果。
首先，创建一个新的JavaScript文件（比如test.mjs）：
import { renderMermaid } from 'beautiful-mermaid';
import fs from 'fs';
// 定义一个简单的流程图
const diagram = `
flowchart TD
A[用户访问网站] --> B{是否登录?}
B -->|是| C[显示个人中心]
B -->|否| D[显示登录页面]
D --> E[输入账号密码]
E --> F{验证通过?}
F -->|是| C
F -->|否| G[显示错误提示]
G --> D
`;
// 使用自定义配色渲染
const svg = await renderMermaid(diagram, {
bg: '#0d1117', // GitHub暗色主题的背景色
fg: '#c9d1d9', // 浅灰色前景色
});
// 保存为SVG文件
fs.writeFileSync('output.svg', svg);
console.log('图表已生成：output.svg');运行这个脚本：
node test.mjs你会在当前目录下看到生成的output.svg文件，用浏览器打开就能看到美化后的流程图了。
3.4 使用内置主题
如果不想自己调配颜色，直接使用内置主题是最方便的选择：
import { renderMermaid, themes } from 'beautiful-mermaid';
import fs from 'fs';
const diagram = `
sequenceDiagram
participant 客户端
participant 网关
participant 认证服务
participant 业务服务
客户端->>网关: 发起请求
网关->>认证服务: 验证Token
认证服务-->>网关: 验证结果
alt Token有效
网关->>业务服务: 转发请求
业务服务-->>网关: 返回数据
网关-->>客户端: 响应结果
else Token无效
网关-->>客户端: 返回401错误
end
`;
// 使用Tokyo Night主题
const svg = await renderMermaid(diagram, themes.tokyoNight);
fs.writeFileSync('sequence.svg', svg);
console.log('时序图已生成：sequence.svg');3.5 生成ASCII字符画
对于需要在终端显示或嵌入代码注释的场景，可以使用ASCII输出模式：
import { renderMermaidAscii } from 'beautiful-mermaid';
const diagram = `
flowchart LR
A[开始] --> B[处理]
B --> C{判断}
C -->|是| D[结束]
C -->|否| B
`;
const ascii = await renderMermaidAscii(diagram);
console.log(ascii);输出的结果会是类似这样的字符画：
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ 开始 │────▶│ 处理 │────▶│ 判断 │────▶│ 结束 │
└──────┘ └──────┘ └──┬───┘ └──────┘
│
│ 否
│
▼
┌──┴───┐
│ │
└──────┘这种输出在代码注释中特别有用，可以让同事在阅读代码时直观地理解流程逻辑。
3.6 在网页中使用
beautiful-mermaid也可以在浏览器环境中使用。下面是一个简单的HTML示例：
<!DOCTYPE html>
<html>
<head>
<title>beautiful-mermaid 网页示例</title>
</head>
<body>
<div id="diagram-container"></div>
<script type="module">
import { renderMermaid, themes } from 'https://esm.sh/beautiful-mermaid';
const diagram = `
graph TD
A[浏览器] --> B[CDN]
B --> C[Web服务器]
C --> D[(数据库)]
C --> E[缓存服务]
`;
const svg = await renderMermaid(diagram, themes.github);
document.getElementById('diagram-container').innerHTML = svg;
</script>
</body>
</html>这个示例使用了esm.sh这个CDN服务来加载beautiful-mermaid模块，无需任何构指南
要充分发挥beautiful-mermaid的威力，首先得熟练掌握Mermaid的语法。这部分莫潇羽@源码七号站会带大家系统地学习Mermaid的核心语法，力求做到即使是零基础的读者也能快速上手。
4.1 流程图（Flowchart）
流程图是最常用的图表类型，用于展示流程、步骤和决策逻辑。
4.1.1 基本语法
流程图以flowchart或graph关键字开头，后面跟着方向指示符：
TB或TD：从上到下（Top to Bottom / Top Down）BT：从下到上（Bottom to Top）LR：从左到右（Left to Right）RL：从右到左（Right to Left）
flowchart LR
A --> B4.1.2 节点形状
Mermaid支持多种节点形状，通过不同的括号来表示：
flowchart TD
A[方形节点]
B(圆角节点)
C([体育场形])
D[[子程序形]]
E[(圆柱形)]
F((圆形))
G>旗帜形]
H{菱形}
I{{六边形}}
J[/平行四边形/]
K[\反向平行四边形\]
L[/梯形\]
M[\反向梯形/]每种形状都有其特定的语义，比如：
- 方形通常表示一般步骤
- 圆角通常表示开始或结束
- 菱形通常表示判断/决策
- 圆柱形通常表示数据库
4.1.3 连接线样式
节点之间的连接也有多种样式：
flowchart LR
A --> B %% 实线箭头
C --- D %% 实线无箭头
E -.-> F %% 虚线箭头
G -.- H %% 虚线无箭头
I ==> J %% 粗实线箭头
K === L %% 粗实线无箭头
M --文字--> N %% 带文字的连线
O -->|文字| P %% 另一种带文字的写法4.1.4 子图
当流程比较复杂时，可以使用子图来组织相关的节点：
flowchart TB
subgraph 前端
A[Vue应用] --> B[Nginx]
end
subgraph 后端
C[API网关] --> D[微服务A]
C --> E[微服务B]
end
subgraph 数据层
F[(MySQL)]
G[(Redis)]
end
B --> C
D --> F
E --> G4.2 时序图（Sequence Diagram）
时序图用于展示多个参与者之间的交互过程，特别适合描述API调用、消息传递等场景。
4.2.1 基本语法
sequenceDiagram
participant A as 客户端
participant B as 服务器
A->>B: 请求
B-->>A: 响应参与者可以用participant关键字显式定义，也可以直接使用。as关键字用于设置别名。
4.2.2 消息类型
sequenceDiagram
A->>B: 实线箭头（同步请求）
B-->>A: 虚线箭头（异步响应）
A-)B: 实线开放箭头
B--)A: 虚线开放箭头
A-xB: 实线带叉（表示丢失/错误）
B--xA: 虚线带叉4.2.3 激示参与者正在处理某个请求：
sequenceDiagram
客户端->>+服务器: 请求数据
服务器->>+数据库: 查询
数据库-->>-服务器: 返回结果
服务器-->>-客户端: 响应数据+表示激活，-表示取消激活。
4.2.4 条件与循环
sequenceDiagram
客户端->>服务器: 登录请求
alt 验证成功
服务器-->>客户端: 返回Token
else 验证失败
服务器-->>客户端: 返回错误
end
loop 每隔5分钟
客户端->>服务器: 心跳请求
服务器-->>客户端: 确认
end4.2.5 注释
sequenceDiagram
A->>B: 请求
Note right of B: 这是一个注释
Note over A,B: 跨越多个参与者的注释
B-->>A: 响应4.3 状态图（State Diagram）
状态图用于描述对象或系统在不同状态之间的转换。
stateDiagram-v2
[*] --> 待机
待机 --> 运行中: 启动
运行中 --> 暂停: 暂停
暂停 --> 运行中: 继续
运行中 --> 待机: 停止
待机 --> [*]: 关闭
state 运行中 {
[*] --> 空闲
空闲 --> 处理中: 收到任务
处理中 --> 空闲: 任务完成
}[*]表示开始状态或结束状态，状态可以嵌套。
4.4 类图（Class Diagram）
类图是面向对象设计的核心工具，用于展示类的结构和关系。
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+String breed
+bark() void
}
class Cat {
+meow() void
}
Animal <|-- Dog
Animal <|-- Cat
Dog "1" --> "*" Bone : eats关系符号说明：
<|--：继承*--：组合o--：聚合-->：关联..>：依赖..|>：实现
4.5 实体关系图（ER Diagram）
ER图用于数据库设计，展示实体和它们之间的关系。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : "is in"
CUSTOMER {
string name
string email
int age
}
ORDER {
int id
date created_at
string status
}关系符号说明：
||：恰好一个o|：零或一个}|：一个或多个}o：零或多个
4.6 甘特图（Gantt Chart）
甘特图用于项目管理，展示任务的时间安排。
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 需求阶段
需求调研 :a1, 2024-01-01, 7d
需求评审 :a2, after a1, 3d
section 开发阶段
前端开发 :b1, after a2, 14d
后端开发 :b2, after a2, 14d
section 测试阶段
集成测试 :c1, after b1, 7d
用户验收 :c2, after c1, 5d4.7 饼图（Pie Chart）
饼图用于展示数据的比例分布。
pie title 浏览器市场份额
"Chrome" : 65.8
"Safari" : 18.7
"Firefox" : 3.4
"Edge" : 4.2
"其他" : 7.9五、pretty-mermaid-skills：让AI自动美化你的图表
学会了Mermaid语法和beautiful-mermaid的使用方法后，你可能会想：每次画图都要手动配置主题参数，还是有点麻烦啊。有没有更省事的方式？
答案是肯定的。接下来莫潇羽要介绍的pretty-mermaid-skills项目，就是为了解决这个问题而生的。
5.1 什么是AI Skill
在正式介绍pretty-mermaid-skills之前，我们需要先理解一个概念：AI Skill（AI技能）。
随着AI辅助编程工具的普及，越来越多的开发者开始使用Claude、ChatGPT、Cursor等AI助手来提高工作效率。这些AI助手虽然能力强大，但它们毕竟是通用模型，对于一些特定领域的任务，可能不知道最佳实践是什么。
AI Skill就是一种给AI助手"赋能"的机制。它本质上是一份结构化的说明文档，告诉AI在遇到特定类型的任务时应该怎么做、使用什么工具、遵循什么规范。
打个比方，如果把AI助手比作一个聪明但没有专业培训的新人，那AI Skill就是针对特定工作的培训手册。
5.2 pretty-mermaid-skills项目介绍
pretty-mermaid-skills是一个专门用于美化Mermaid图表的AI Skill项目，它把beautiful-mermaid的美化能力封装成了AI可以理解和使用的格式。
项目地址：https://github.com/imxv/pretty-mermaid-skills
这个项目的核心思路非常巧妙：与其让开发者自己去学习beautiful-mermaid的各种配置参数，不如让AI来帮忙。只要给AI配置好这套Skill，以后每次需要画图时，只需要用自然语言描述需求，AI就会自动生成带有美化样式的Mermaid代码。
5.3 安装与配置
pretty-mermaid-skills提供了便捷的一键安装方式。
5.3.1 安装到Claude
如果你使用的是Claude（无论是claude.ai网页版还是Claude Code命令行工具），可以通过以下命令安装：
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid这个命令会自动下载Skill文件并配置到你的Claude环境中。
5.3.2 安装到Cursor
Cursor是一款非常流行的AI编程助手，它同样支持Skill机制。安装方法类似：
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid5.3.3 手动安装
如果自动安装不成功，你也可以选择手动安装：
首先，从GitHub下载Skill文件包。
然后，找到你的AI助手的Skill配置目录：
- Claude:
~/.claude/skills/ - Cursor: 打开设置，找到Skills相关配置
最后，将Skill文件放入对应目录，重启AI助手即可。
5.4 使用方法
配置好Skill之后，使用起来就非常简单了。你只需要用自然语言向AI描述你想要的图表，它就会自动调用beautiful-mermaid的能力，生成美化后的代码。
示例对话1：
你：帮我画一个用户登录的流程图，包括验证码验证和密码验证两个分支
AI会自动生成类似这样的响应：
import { renderMermaid, themes } from 'beautiful-mermaid';
const diagram = `
flowchart TD
A[用户访问登录页] --> B[输入账号]
B --> C{选择验证方式}
C -->|验证码| D[发送验证码]
D --> E[输入验证码]
E --> F{验证码正确?}
F -->|是| G[登录成功]
F -->|否| H[提示错误] --> D
C -->|密码| I[输入密码]
I --> J{码错误] --> L{超过3次?}
L -->|是| M[账号锁定]
L -->|否| I
`;
const svg = await renderMermaid(diagram, {
bg: '#1e1e2e',
fg: '#cdd6f4',
accent: '#89b4fa'
});示例对话2：
你：帮我画一个微服务架构的时序图，展示订单创建的完整流程
AI会
