dashboard: add description about visual execution plans (pingcap#9821)

dashboard/dashboard-slow-query.md

@@ -20,42 +20,65 @@ You can use one of the following two methods to access the slow query page:
 
 * After logging into TiDB Dashboard, click **Slow Queries** on the left navigation menu:
 
-![Access slow query page](/media/dashboard/dashboard-slow-queries-access.png)
+![Access slow query page](/media/dashboard/dashboard-slow-queries-access-v620.png)
 
 * Visit <http://127.0.0.1:2379/dashboard/#/slow_query> in your browser. Replace `127.0.0.1:2379` with the actual PD address and port.
 
 All data displayed on the slow query page comes from TiDB slow query system tables and slow query logs. See [slow query logs](/identify-slow-queries.md) for details.
 
-### Change Filters
+### Change filters
 
 You can filter slow queries based on the time range, the related database, SQL keywords, SQL types, the number of slow queries to be displayed. In the image below, 100 slow queries over the recent 30 minutes are displayed by default.
 
-![Modify list filters](/media/dashboard/dashboard-slow-queries-list1.png)
+![Modify list filters](/media/dashboard/dashboard-slow-queries-list1-v620.png)
 
-### Display More Columns
+### Display more columns
 
 Click **Columns** on the page and you can choose to see more columns. You can move your mouse to the **(i)** icon at the right side of a column name to view the description of this column:
 
-![Show more columns](/media/dashboard/dashboard-slow-queries-list2.png)
+![Show more columns](/media/dashboard/dashboard-slow-queries-list2-v620.png)
 
-### Sort by Column
+### Sort by column
 
 By default, the list is sorted by **Finish Time** in the descending order. Click column headings to sort by the column or switch the sorting order:
 
-![Modify sorting basis](/media/dashboard/dashboard-slow-queries-list3.png)
+![Modify sorting basis](/media/dashboard/dashboard-slow-queries-list3-v620.png)
 
 ## View execution details
 
 Click any item in the list to display detailed execution information of the slow query, including:
 
-- Query: The text of the SQL statement (see area 1 in the image below);
-- Plan: The execution plan of the slow query. See [Understand the Query Execution Plan](/explain-overview.md) to learn how to read the execution plan (see area 2 in the image below);
-- Other sorted SQL execution information (see area 3 in the image below).
+- Query: The text of the SQL statement (area 1 in the following figure)
+- Plan: The execution plan of the slow query (area 2 in the following figure)
+- Other sorted SQL execution information (area 3 in the following figure)
 
-![View execution details](/media/dashboard/dashboard-slow-queries-detail1.png)
+![View execution details](/media/dashboard/dashboard-slow-queries-detail1-v620.png)
 
-Click the **Expand** link to show the detailed information of an item. Click the **Copy** link to copy the detailed information to the clipboard.
+### SQL
 
-Click the corresponding tab titles to switch information of different sorted SQL executions.
+Click the **Expand** button to view the detailed information of an item. Click the **Copy** button to copy the detailed information to the clipboard.
 
-![Show different sorted execution information](/media/dashboard/dashboard-slow-queries-detail2.png)
+### Execution plans
+
+On TiDB Dashboard, you can view execution plans in two ways: Graph and text. Visual execution plans allow you to learn each operator of a statement and detailed information more intuitively. See [Understand the Query Execution Plan](/explain-overview.md) to learn how to read a execution plan.
+
+#### Visual execution plans
+
+The following figure shows a visual execution plan.
+
+![Visual execution plan](/media/dashboard/dashboard-visual-plan-2.png)
+
+- The graph shows the execution from left to right, and from top to bottom.
+- Upper nodes are parent operators and lower nodes are child operators.
+- The color of the title bar indicates the component where the operator is executed: yellow stands for TiDB, blue stands for TiKV, and pink stands for TiFlash.
+- The title bar shows the operator name and the text shown below is the basic information of the operator. 
+
+Click the node area, and the detailed operator information is displayed on the right sidebar.
+
+![Visual execution plan - sidebar](/media/dashboard/dashboard-visual-plan-popup.png)
+
+### SQL execution details
+
+Click the corresponding tab titles to switch information of SQL executions.
+
+![Show different execution information](/media/dashboard/dashboard-slow-queries-detail2-v620.png)

dashboard/dashboard-statement-details.md

@@ -8,18 +8,18 @@ aliases: ['/docs/dev/dashboard/dashboard-statement-details/']
 
 Click any item in the list to enter the detail page of the SQL statement to view more detailed information. This information includes the following parts:
 
-- The overview of SQL statements, which includes the SQL template, the SQL template ID, the current time range of displayed SQL executions, the number of execution plans and the database in which the SQL statement is executed (see area 1 in the image below).
-- The execution plan list: If the SQL statement has multiple execution plans, this list is displayed. You can select different execution plans, and the details of the selected plans are displayed below the list. If there is only one execution plan, the list is not displayed (see area 2 below).
-- Execution detail of plans, which displays the detailed information of the selected execution plans. See [Execution plan in details](#execution-details-of-plans) (area 3 in the image below).
+- The overview of SQL statements, which includes the SQL template, the SQL template ID, the current time range of displayed SQL executions, the number of execution plans and the database in which the SQL statement is executed (area 1 in the following figure).
+- The execution plan list: If a SQL statement has multiple execution plans, this list is displayed. Besides text information of execution plans, TiDB v6.2.0 introduces visual execution plans, through which you can learn each operator of a statement and detailed information more intuitively. You can select different execution plans, and the details of the selected plans are displayed below the list (area 2 in the following figure).
+- Execution detail of plans, which displays the detailed information of the selected execution plans. See [Execution plan in details](#execution-details-of-plans) (area 3 in the following figure).
 
-![Details](/media/dashboard/dashboard-statement-detail.png)
+![Details](/media/dashboard/dashboard-statement-detail-v620.png)
 
 ## Execution details of plans
 
 The execution detail of plans includes the following information:
 
 - SQL sample: The text of a certain SQL statement that is actually executed corresponding to the plan. Any SQL statement that has been executed within the time range might be used as a SQL sample.
-- Execution plan: For details of the execution plan, see [Understand the Query Execution Plan](/explain-overview.md). If multiple execution plans are selected, only (any) one of them is displayed.
+- Execution plan: Complete information about execution plans, displayed in graph and text. For details of the execution plan, see [Understand the Query Execution Plan](/explain-overview.md). If multiple execution plans are selected, only (any) one of them is displayed.
 - For basic information, execution time, Coprocessor read, transaction, and slow query of the SQL statement, you can click the corresponding tab titles to switch among different information.
 
 ![Execution details of plans](/media/dashboard/dashboard-statement-plans-detail.png)