diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 5eff6e7d0..e5d8371b8 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -1723,6 +1723,43 @@
       "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
       "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
     },
+    "@meta2d/activity-diagram": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@meta2d/activity-diagram/-/activity-diagram-1.0.0.tgz",
+      "integrity": "sha512-Pcsa2XW2mJb54HZJ9Jc9nknQp5w/4n51RSerH8osXYr1oC9ys0uFPrE+glq+8cSQJSJH2oHQKtayvYmm8xnYpg=="
+    },
+    "@meta2d/chart-diagram": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@meta2d/chart-diagram/-/chart-diagram-1.0.0.tgz",
+      "integrity": "sha512-lhEHtgBiJeyyJ/AYJZBaNuObjg8RImvLo1RxiEEpZ6UGasT8836L09h/k6Ad4NBfk1nv3F+tUBzCRiZD7/9ftw==",
+      "requires": {
+        "@types/echarts": "^4.9.15"
+      }
+    },
+    "@meta2d/class-diagram": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@meta2d/class-diagram/-/class-diagram-1.0.0.tgz",
+      "integrity": "sha512-0VoTMXNIdyHzdzgAMw4pQk8hMuXxtt2LAw7Urt0rmCpAFGcNrsbMWIB6rn5Avu8xyYEPcprKJh2tVpUDeWUVhA=="
+    },
+    "@meta2d/core": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@meta2d/core/-/core-1.0.0.tgz",
+      "integrity": "sha512-urCDDZd6226L0vjaOy5yByXMSCus4wbDsvwm4F0e7PdxC+++gVqJruXVhUxUG65nSQxxENx4VzOPz+kbTIe0BQ==",
+      "requires": {
+        "mitt": "^2.1.0",
+        "mqtt": "^4.2.6"
+      }
+    },
+    "@meta2d/flow-diagram": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@meta2d/flow-diagram/-/flow-diagram-1.0.0.tgz",
+      "integrity": "sha512-Cf8L9JZqFVyo6Z9Hj9/+ukeVOTessjYKsgbn1IUVpjQiGREr4HYRcKBSmCmD8AgKggVGvoi9d3Lp6vfB4F95jQ=="
+    },
+    "@meta2d/sequence-diagram": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@meta2d/sequence-diagram/-/sequence-diagram-1.0.0.tgz",
+      "integrity": "sha512-VK+aoex0IXhgaDAHaJKQQUpEofAQVNip7tpD0jhZecELrBfwYSFq1EvvuRakhg8qncfl6W9gyL6JWoekebZOnQ=="
+    },
     "@npmcli/fs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
@@ -1892,6 +1929,14 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/echarts": {
+      "version": "4.9.16",
+      "resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.9.16.tgz",
+      "integrity": "sha512-bfiagfPw3dWauAIJ9fgoJQoL4hLWlGcltqwbE6LGye0NIY5xnbZau+mDmadCzGojic3MWuFDCUiO25kl4sRGeA==",
+      "requires": {
+        "@types/zrender": "*"
+      }
+    },
     "@types/geojson": {
       "version": "7946.0.10",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
@@ -2088,6 +2133,11 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
       "dev": true
     },
+    "@types/zrender": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.3.tgz",
+      "integrity": "sha512-EPI269lkHNsObwILJ1k1z7znLjKyePuWRy/XKK0shSGpBb9cIX307arcwJV4+2NeZj5wEjN06r4D8yFv7sI06g=="
+    },
     "@vue/compiler-sfc": {
       "version": "2.7.13",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.13.tgz",
@@ -18325,7 +18375,7 @@
     "tmp": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
-      "integrity": "sha1-8lEl/w3Z2jzLDC3Tce4SiLuRKMA=",
+      "integrity": "sha512-89PTqMWGDva+GqClOqBV9s3SMh7MA3Mq0pJUdAoHuF65YoE7O0LermaZkVfT5/Ngfo18H4eYiyG7zKOtnEbxsw==",
       "dev": true,
       "requires": {
         "os-tmpdir": "~1.0.1"
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index e5716cd1b..243390cb5 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -22,6 +22,12 @@
     "@codemirror/state": "^0.19.9",
     "@codemirror/view": "^0.19.48",
     "@johmun/vue-tags-input": "^2.1.0",
+    "@meta2d/activity-diagram": "^1.0.0",
+    "@meta2d/chart-diagram": "^1.0.0",
+    "@meta2d/class-diagram": "^1.0.0",
+    "@meta2d/core": "^1.0.0",
+    "@meta2d/flow-diagram": "^1.0.0",
+    "@meta2d/sequence-diagram": "^1.0.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "@svgdotjs/svg.js": "^3.0.16",
     "@svgdotjs/svg.panzoom.js": "^2.1.1",
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 1ae5a7363..50a751175 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -42,6 +42,9 @@ li {
 .margin-r-10 {
   margin-right: 10px !important;
 }
+.margin-r-15 {
+  margin-right: 15px !important;
+}
 .margin-t-10 {
   margin-top: 10px !important;
 }
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 2a5a05ac7..d2d11c69a 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -170,7 +170,15 @@ export default {
         const now = new Date(bus.computeTimezone(new Date().getTime()))
         const origin = new Date(bus.timeFormate(bus.formateTimeToTime(this.timeRange[1]), 'YYYY-MM-DD HH:mm:ss'))
         const numInterval = now.getTime() - origin.getTime()
-        if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+        let nowTimeType = this.$route.query.nowTimeType
+        if (!nowTimeType) {
+          nowTimeType = {
+            value: 1
+          }
+        } else {
+          nowTimeType = JSON.parse(nowTimeType)
+        }
+        if (numInterval >= 6 && nowTimeType.value !== -1) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
           startTime = bus.getNewTime(bus.formateTimeToTime(this.timeRange[0]), numInterval, 'YYYY-MM-DD HH:mm:ss')
           endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
         } else {
diff --git a/nezha-fronted/src/components/cli/fileDirectory.vue b/nezha-fronted/src/components/cli/fileDirectory.vue
index 8d5d506a4..e5827c03b 100644
--- a/nezha-fronted/src/components/cli/fileDirectory.vue
+++ b/nezha-fronted/src/components/cli/fileDirectory.vue
@@ -3,7 +3,7 @@
     <div class="file-directory-header">
         {{$t('terminal.sftp')}}
         <span class="header-option">
-          <i class="nz-icon nz-icon-upload" @click="uploadFile"></i>
+<!--          <i class="nz-icon nz-icon-upload" @click="uploadFile"></i>-->
           <i class="nz-icon nz-icon-close" @click="$emit('close')"></i>
         </span>
     </div>
@@ -22,7 +22,7 @@
           </span>
         </el-input>
       </span>
-      <div class="path-option">
+      <div class="path-option margin-r-15">
         <span style="margin-right: 5px">{{$t('terminal.showFile')}}: </span>
         <el-switch  v-model="showHideFile"/>
         <i class="nz-icon nz-icon-a-newfolder" @click="newFolderBoxShow = true"></i>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 321afec36..227c7ec10 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -53,7 +53,7 @@
         <!-- endpoint -->
         <div v-else-if="from === fromRoute.endpoint" style="display: flex">
           <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
-          <button id="endpoint-create-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
+          <button id="endpoint-create-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChartBefore">
             <i class="nz-icon nz-icon-create-square"></i>
           </button>
           <top-tool-more-options
@@ -98,7 +98,7 @@
         </div>
         <!-- dashboardTemp -->
         <div v-else-if="from === fromRoute.dashboardTemp">
-          <button v-has="'main_add'" id="endpoint-create-chart" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
+          <button v-has="'main_add'" id="endpoint-create-chart" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChartBefore">
             <i class="nz-icon nz-icon-create-square"></i>
           </button>
           <button v-has="'main_edit'" id="panel-lock" :title='panelLock ? $t("overall.unlocked") : $t("overall.locked")'  class="top-tool-btn margin-r-10" @click="panelLockChange(!panelLock)" type="button">
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index b5e9230dc..5d9c83c23 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -106,7 +106,7 @@
             <div class="date-range-title">{{$t('timepicker.relatime')}}</div>
             <ul class="date-range-item">
               <li
-                v-for="(item, key) in timeData"
+                v-for="(item, key) in timeShowData"
                 @click="timeChange(item)"
                 :class="showTime.id === item.id ? 'activeLi' : ''"
                 :key="key"
@@ -182,11 +182,11 @@ export default {
         text: this.$t('dashboard.panel.lastOneHour')
       },
       timeData: [
-        // {
-        //   id: 0,
-        //   text: this.$t("dashboard.panel.customTimeRange"),
-        //   value: -1,
-        // },
+        {
+          id: 0,
+          text: this.$t('dashboard.panel.customTimeRange'),
+          value: -1
+        },
         {
           id: 12,
           text: this.$t('dashboard.panel.noDate'),
@@ -259,6 +259,7 @@ export default {
           value: 30
         }
       ],
+      timeShowData: [],
       nowTimeType: {
         id: 4,
         text: this.$t('dashboard.panel.lastOneHour'),
@@ -273,6 +274,8 @@ export default {
     }
   },
   mounted () {
+    this.timeShowData = JSON.parse(JSON.stringify(this.timeData))
+    this.timeShowData.shift()
     this.getItem()
     this.getUtcStr()
     this.getRangeHistoryArr()
@@ -419,10 +422,14 @@ export default {
       this.oldSearchTimeError[1] = false
     },
     setCustomTime (timeGroup, timeRange) {
+      console.log(timeGroup)
       if (timeGroup) {
         this.showTime = this.nowTimeType = this.timeData.find(
           (item) => item.id == timeGroup.id
         )
+        if (timeGroup.value == -1) {
+          this.isCustom = true
+        }
         if (this.showTime) {
           this.showTime = Object.assign({}, this.showTime)
           this.$set(this.searchTime, 0, timeGroup.start_time)