diff --git a/docs/en/animation/overview.mdx b/docs/en/animation/overview.mdx
index 375c01ca4..2fe9b8b77 100644
--- a/docs/en/animation/overview.mdx
+++ b/docs/en/animation/overview.mdx
@@ -22,7 +22,7 @@ The overall workflow for creating interactive projects using the editor:
 
 ```mermaid
 flowchart LR
- Add AnimationClip --> Create AnimatorController and Import AnimationClip --> Add Animator Component to Play Animation
+ A[Add AnimationClip] --> B[Create AnimatorController and Import AnimationClip] --> C[Add Animator Component to Play Animation]
 ```
 
 ### 1. Add AnimationClip
diff --git a/docs/en/xr/quickStart/develop.mdx b/docs/en/xr/quickStart/develop.mdx
index d67565da3..023c37304 100644
--- a/docs/en/xr/quickStart/develop.mdx
+++ b/docs/en/xr/quickStart/develop.mdx
@@ -13,7 +13,7 @@ The workflow for developing XR interactions in the editor is as follows:
 
 ```mermaid
 flowchart LR
-   Create Project --> Add XR Node --> Add XR Capabilities --> Preview --> Export
+   A[Create Project] --> B[Add XR Node] --> C[Add XR Capabilities] --> D[Preview] --> E[Export]
 ```  
 
 ### Create Project  
diff --git a/docs/zh/animation/overview.mdx b/docs/zh/animation/overview.mdx
index 23994c1ab..096a5efb3 100644
--- a/docs/zh/animation/overview.mdx
+++ b/docs/zh/animation/overview.mdx
@@ -20,7 +20,7 @@ Galacean 的动画系统具有以下功能：
 
 ```mermaid
 flowchart LR
- 添加动画片段 --> 创建动画控制器并导入动画片段 --> 添加动画控制组件播放动画
+ A[添加动画片段] --> B[创建动画控制器并导入动画片段] --> C[添加动画控制组件播放动画]
 ```
 
 ### 1. 添加动画片段
diff --git a/docs/zh/assets/overall.mdx b/docs/zh/assets/overall.mdx
index aa04aeb69..a279000b7 100644
--- a/docs/zh/assets/overall.mdx
+++ b/docs/zh/assets/overall.mdx
@@ -13,7 +13,7 @@ label: Resource
 
 ```mermaid
 flowchart LR
-   导入资产 --> 编辑资产 --> 构建导出 --> 分发 --> 加载
+   A[导入资产] --> B[编辑资产] --> C[构建导出] --> D[分发] --> E[加载]
 ```
 
 本章节将主要讲述：
diff --git a/docs/zh/basics/overview.mdx b/docs/zh/basics/overview.mdx
index b7cf0e00b..e9770de51 100644
--- a/docs/zh/basics/overview.mdx
+++ b/docs/zh/basics/overview.mdx
@@ -17,7 +17,7 @@ label: Basics
 
 ```mermaid
 flowchart LR
-   创建项目 --> 创建资产 --> 搭建场景 --> 编写脚本 --> 导出
+   A[创建项目] --> B[创建资产] --> C[搭建场景] --> D[编写脚本] --> E[导出]
 ```
 
 通过编辑器可以让技术与美术同学更好地进行协作，你可以在[编辑器首页](https://galacean.antgroup.com/editor)通过业务模板快速开始第一个项目的开发。
diff --git a/docs/zh/graphics/model/model.mdx b/docs/zh/graphics/model/model.mdx
index b3f532cb5..a55c1f390 100644
--- a/docs/zh/graphics/model/model.mdx
+++ b/docs/zh/graphics/model/model.mdx
@@ -10,7 +10,7 @@ label: Graphics/Model
 
 ```mermaid
 	flowchart LR
-	建模软件导出模型 --> 导入模型到Galacean编辑器 --> 调整模型
+	A[建模软件导出模型] --> B[导入模型到Galacean编辑器] --> C[调整模型]
 ```
 
 本章主要解答如下开发者可能遇到的问题：
diff --git a/docs/zh/input/pointer.mdx b/docs/zh/input/pointer.mdx
index a0a320934..952fff4e5 100644
--- a/docs/zh/input/pointer.mdx
+++ b/docs/zh/input/pointer.mdx
@@ -79,7 +79,7 @@ timeline
 
 ```mermaid
 flowchart LR
-   添加碰撞体组件 --> 获取触控点 --> 通过画布坐标获取射线 --> 射线检测
+   A[添加碰撞体组件] --> B[获取触控点] --> C[通过画布坐标获取射线] --> D[射线检测]
 ```
 
 添加碰撞体组件可参考[碰撞体组件](/docs/physics/collider/)，实现检测部分的代码逻辑如下：
diff --git a/docs/zh/xr/quickStart/develop.mdx b/docs/zh/xr/quickStart/develop.mdx
index 7aafea868..e294a0f0c 100644
--- a/docs/zh/xr/quickStart/develop.mdx
+++ b/docs/zh/xr/quickStart/develop.mdx
@@ -13,7 +13,7 @@ label: XR
 
 ```mermaid
 flowchart LR
-   创建项目 --> 添加XR节点 --> 添加XR能力 --> 预览 --> 导出
+   A[创建项目] --> B[添加XR节点] --> C[添加XR能力] --> D[预览] --> E[导出]
 ```
 
 ### 创建项目