diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
index eaeb4601d..ba0722e90 100644
--- a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
@@ -414,10 +414,7 @@
 }
 
 .props-box {
-  position: relative;
-  width: 100%;
-  height: calc(100% - 20px);
-  padding-bottom: 20px;
+
 
   .iconfont {
     cursor: pointer;
diff --git a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
new file mode 100644
index 000000000..494055063
--- /dev/null
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -0,0 +1,32 @@
+export default {
+  data () {
+    return {
+      topoData: {},
+      querysArray: {},
+      meta2dType: ''
+    }
+  },
+  mounted () {
+    if (this.meta2dType === 'project') {
+      setTimeout(() => {
+        const res = {
+          topo: {},
+          elements: [],
+          timeType: 4
+        }
+        this.topoData = res.topo
+        this.querysArray = res.elements
+      })
+    } else {
+      setTimeout(() => {
+        const res = {
+          topo: {},
+          elements: [],
+          timeType: 4
+        }
+        this.topoData = res.topo
+        this.querysArray = res.elements
+      })
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
new file mode 100644
index 000000000..3d402bbfd
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
@@ -0,0 +1,177 @@
+import { Meta2d, registerNode } from '@meta2d/core'
+import { flowPens } from '@meta2d/flow-diagram'
+import { activityDiagram } from '@meta2d/activity-diagram'
+import { classPens } from '@meta2d/class-diagram'
+import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram'
+// import { chartsPens } from '@meta2d/le5le-charts'
+import {
+  Tools,
+  canvasRegister,
+  imageTemp,
+  onChangeAnimate,
+  onChangeAnimateLine,
+  myCubec,
+  myCubeAnchors
+} from '../../L5/services/canvas.js'
+import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+export default {
+  data () {
+    return {
+      selectPens: [],
+      editFlag: false,
+      prevFlag: false
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    init () {
+      const meta2dOptions = {}
+      const meta2d = new Meta2d(this.meta2dId, meta2dOptions)
+      meta2d.register(flowPens())
+      meta2d.register(activityDiagram())
+      meta2d.register(classPens())
+      meta2d.register(sequencePens())
+      meta2d.registerCanvasDraw(sequencePensbyCtx())
+      // meta2d.registerCanvasDraw(formPens())
+      // meta2d.registerCanvasDraw(chartsPens())
+      /* 画布绑定事件 */
+      meta2d.beforeAddPens = (pens) => { // 添加画笔前
+        console.log(pens)
+        if (pens.length === 1) {
+          if (!pens[0].type) {
+            this.nodeInit(pens[0])
+          } else {
+            this.lineInit(pens[0])
+          }
+        }
+        return true
+      }
+      // getTopology(this.topoData)).on('translate', this.topTranslate) // 平移·
+      meta2d.on('active', this.pensActive) // 选中·
+      // meta2d.on('scale', this.topoScale) // 缩放·
+      // meta2d.on('translatePens', () => {}) // 移动画笔结束·
+      // meta2d.on('translatingPens', () => {}) // 移动画笔进行中·
+      meta2d.on('enter', this.penEnter) // 移入画笔·
+      meta2d.on('leave', this.penLeave) // 移出画笔·
+      // meta2d.on('add', this.appPen) // 添加新画笔·
+      meta2d.on('click', this.topoClick) // click画笔·
+      setTopology(this.meta2dId, meta2d)
+      console.log(getTopology(this.meta2dId))
+      this.clacTopoData(this.topoData).then((data) => {
+        console.log(data)
+        meta2d.open(data)
+        meta2d.centerView()
+        meta2d.lock(1)
+      })
+    },
+    clacTopoData (data) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
+      return new Promise(resolve => {
+        if (!data.pens) {
+          data.pens = []
+        }
+        resolve(data)
+      })
+    },
+    calcNode (node) { // 处理节点数据
+      node = { ...node, ...node.data.params }
+    },
+    nodeInit (pen) { // 初始化节点参数
+      pen.data = {
+        params: { // 用于编辑时 重置为节点初始状态
+          background: '#22222200',
+          color: '#222222ff',
+          textColor: '#222222ff',
+          image: ''
+        },
+        imageId: '',
+        valueMapping: [],
+        legend: '',
+        statistics: '',
+        enable: {
+          valueMapping: true,
+          tooltip: true
+        },
+        tooltip: {
+          title: '',
+          titleShow: true,
+          chartType: 'line',
+          content: '',
+          legends: [] // {legend: '' , alias}
+        }
+      }
+      pen.background = '#22222200'
+      pen.textAlign = 'center'
+      pen.textBaseline = 'middle'
+      pen.color = '#222222ff'
+      pen.textColor = '#222222ff'
+      pen.image = ''
+      pen.imageId = ''
+      pen.imageRatio = false
+      pen.ratio = false
+      pen.rotate = 0
+      pen.globalAlpha = 1
+      pen.borderType = 0
+      pen.lineWidth = 1
+      pen.lineDash = []
+      pen.borderRadius = 0
+      console.log(pen)
+    },
+    lineInit (pen) { // 初始化连线参数
+      pen.data = {
+        params: {
+          animateColor: '#FA901CFF',
+          borderColor: '#22222200',
+          color: '#222222FF'
+        }
+      }
+      pen.lineAnimateType = 0
+      pen.animateSpan = 1
+      pen.animateReverse = false
+      pen.fromArrow = ''
+      pen.animateColor = '#FA901CFF'
+      pen.borderColor = '#22222200'
+      pen.borderWidth = 0
+      pen.color = '#222222ff'
+      pen.toArrow = ''
+      pen.borderType = 0
+      pen.lineWidth = 1
+      pen.lineDash = []
+    },
+    pensActive (pens, e) { // 选中节点
+      console.log(pens, 'active', e)
+      this.selectPens = pens
+    },
+    topoClick (params, e) { // 点击节点
+      console.log(this.$refs.meta2dProps)
+      if (!params.pen && this.$refs.meta2dProps) {
+        this.$refs.meta2dProps.activeName = 'canvas'
+        this.selectPens = []
+      }
+    },
+    penEnter (pens) { // 移入节点
+      // console.log(pens)
+    },
+    penLeave (pens) { // 移出节点
+      // console.log(pens)
+    },
+    updatePens (pen, key) { // 更新对应的节点
+      console.log(pen, key, 'update')
+      // meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });
+      const obj = { id: pen.id }
+      obj[key] = pen[key]
+      if (key === 'lineName') {
+        getTopology(this.meta2dId).updateLineType(pen, pen[key])
+      }
+      getTopology(this.meta2dId).setValue(obj)
+      if (key === 'lineAnimateType') {
+        console.log('lineAnimateType', 'start')
+        if (!pen[key]) {
+          getTopology(this.meta2dId).stopAnimate(pen.id)
+          return
+        }
+        getTopology(this.meta2dId).startAnimate(pen.id)
+      }
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
new file mode 100644
index 000000000..951cb0591
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
@@ -0,0 +1,14 @@
+import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+export default {
+  methods: {
+    topoResize (id) {
+      getTopology(id).resize()
+    },
+    initEdit (id) {
+      console.log(getTopology(id))
+      getTopology(id).lock(0)
+      getTopology(id).centerView()
+      getTopology(id).stopAnimate(getTopology(id).data.pens)
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
new file mode 100644
index 000000000..0769925d7
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    canvas
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'meta2dCanvas'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
new file mode 100644
index 000000000..e58205c0a
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    data
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'meta2dData'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
new file mode 100644
index 000000000..84c6aec9f
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -0,0 +1,891 @@
+<template>
+  <div class="pens-data">
+    <div v-if="pen.id">
+<!--      <el-input-number v-model="pen.x" @change="change('x')"/>-->
+<!--      node-->
+      <div v-if="!pen.type">
+        <div class="form-row-box">
+          <!--        Position  -->
+          <div class="form-row-title">
+            Position
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('position')"/>
+          </div>
+          <div v-show="elements.position" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                X
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.x"
+                  required
+                  @change="change('x')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Y
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.y"
+                  required
+                  @change="change('y')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Width
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.width"
+                  required
+                  @change="change('width')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Height
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.height"
+                  required
+                  @change="change('height')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Lock aspect Ratio
+              </div>
+              <div class="form-row-value">
+                <el-switch
+                  v-model="pen.ratio"
+                  :active-value="true"
+                  :inactive-value="false"
+                  @change="change('ratio')"
+                ></el-switch>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Rotate
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :min="0"
+                  :max="360"
+                  :step="1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.rotate"
+                  required
+                  @change="change('rotate')"></el-input-number>
+              </div>
+            </div>
+          </div>
+
+          <!--         Border -->
+          <div class="form-row-title">
+            Border
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('border')"/>
+          </div>
+          <div v-show="elements.border" class="form-row-content">
+            <div class="form-row-item ">
+              <div class="form-row-key">
+                Type
+              </div>
+              <div class="form-row-value">
+                <el-select :popper-append-to-body="true" v-model="pen.borderType" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
+                           @change="(val)=>{change('lineDash', val)}">
+                  <div slot="prefix">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
+                          <path
+                            :d="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0)).d"
+                            :stroke-dasharray="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0))['stroke-dasharray']">
+                          </path>
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                  <el-option v-for="(item,index) in penDash" :value="index" :key="index">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="(pen.borderType==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
+                          <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                        </g>
+                      </svg>
+                    </div>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Width
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :min="0"
+                  :precision="0"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.lineWidth"
+                  required
+                  @change="change('lineWidth')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'color',value: pen.color}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Radius
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :min="0"
+                  :precision="0"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.borderRadius"
+                  required
+                  @change="change('borderRadius')"></el-input-number>
+              </div>
+            </div>
+          </div>
+
+          <!--         backGround -->
+          <div class="form-row-title">
+            BackGround
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
+          </div>
+          <div v-show="elements.backGround" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'background',value: pen.background}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                opacity
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :min="0"
+                  :max="1"
+                  :step="0.1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.globalAlpha"
+                  required
+                  @change="change('globalAlpha')"></el-input-number>
+              </div>
+              </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Image
+              </div>
+              <div class="form-row-value">
+                <el-input  v-model="pen.image" size="small" @change="change('image')"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                是否保留长宽比
+              </div>
+              <div class="form-row-value">
+                <el-switch
+                  v-model="pen.imageRatio"
+                  :active-value="true"
+                  :inactive-value="false"
+                  @change="change('imageRatio')"
+                ></el-switch>
+              </div>
+            </div>
+            </div>
+
+          <!--         text -->
+          <div class="form-row-title">
+            text
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('text')"/>
+          </div>
+          <div v-show="elements.text" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'textColor',value: pen.textColor}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                fontSize
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :min="10"
+                  :step="1"
+                  :precision="0"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="fontSize"
+                  v-model.number="pen.fontSize"
+                  required
+                  @change="change('fontSize')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Align text
+              </div>
+              <div class="form-row-value">
+                <el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
+                           class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
+                           size="mini"
+                           v-model="pen.textAlign" value-key="chartType" @change="change('textAlign')">
+                  <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textAlignOptions">
+                    <span class="panel-dropdown-label-txt">{{ item.name }}</span>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Vertical text
+              </div>
+              <div class="form-row-value">
+                <el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
+                           class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
+                           size="mini"
+                           v-model="pen.textBaseline" value-key="chartType" @change="change('textBaseline')">
+                  <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textBaselineOptions">
+                    <span class="panel-dropdown-label-txt">{{ item.name }}</span>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item  form-row-item-full">
+              <div class="form-row-key">
+               Content
+              </div>
+              <div class="form-row-value">
+                <el-input  maxlength="256" show-word-limit v-model="pen.text" size="small" :rows="4" type="textarea" @change="change('text')"/>
+              </div>
+            </div>
+          </div>
+
+          <!--         valueMapping -->
+          <div class="form-row-title">
+            Value mappings
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('valueMapping')"/>
+          </div>
+          <div v-show="elements.valueMapping" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'background',value: pen.background}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+          </div>
+
+          <!--         tooltip -->
+          <div class="form-row-title">
+            tooltip
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
+          </div>
+          <div v-show="elements.tooltip" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'background',value: pen.background}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+<!--      line-->
+      <div v-if="pen.type == 1">
+        <div class="form-row-box">
+          <!--        Line  -->
+          <div class="form-row-title">
+            Line
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('line')"/>
+          </div>
+          <div v-show="elements.line" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                style
+              </div>
+              <div class="form-row-value">
+                <el-select :popper-append-to-body="true" v-model="pen.borderType" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
+                           @change="(val)=>{change('lineDash', val)}">
+                  <div slot="prefix">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
+                          <path
+                            :d="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0)).d"
+                            :stroke-dasharray="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0))['stroke-dasharray']">
+                          </path>
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                  <el-option v-for="(item,index) in penDash" :value="index" :key="index">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="(pen.borderType==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
+                          <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                        </g>
+                      </svg>
+                    </div>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item special-meta2d-select">
+              <div class="form-row-key">
+                Type
+              </div>
+              <div class="form-row-value">
+                <el-select :popper-append-to-body="true" v-model="pen.lineName" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
+                           @change="change('lineName')">
+                  <div slot="prefix">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
+                          <path
+                            :d="penLineType.find((item,i)=>item.name==pen.lineName).d"
+                          >
+                          </path>
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                  <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="(pen.lineName==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
+                          <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                        </g>
+                      </svg>
+                    </div>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item special-meta2d-select">
+              <div class="form-row-key">
+                From
+              </div>
+              <div class="form-row-value">
+                <el-select :popper-append-to-body="true" v-model="pen.fromArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
+                           @change="change('fromArrow')">
+                  <div slot="prefix">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                           :key="index" v-if="pen.fromArrow==item.name">
+                          <path :d="item.d"></path>
+                          <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                                   :strokeWidth="item['stroke-width']"></polygon>
+                          <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                                  :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                  <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="(pen.fromArrow==item.name)?'#ee9d3f':item.strokeColor"
+                           stroke-width="1">
+                          <path :d="item.d"></path>
+                          <polygon
+                            v-if="item.points"
+                            :points="item.points"
+                            :fill="(pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                            :stroke="(pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                            :strokeWidth="item['stroke-width']"
+                          ></polygon>
+                          <circle
+                            v-if="item.cx"
+                            :cx="item.cx"
+                            :cy="item.cy"
+                            :r="item.r"
+                            :fill="(pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                            :stroke="(pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
+                            :strokeWidth="item['stroke-width']"
+                          ></circle>
+                        </g>
+                      </svg>
+                    </div>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item special-meta2d-select">
+              <div class="form-row-key">
+                To
+              </div>
+              <div class="form-row-value">
+                <el-select :popper-append-to-body="true" v-model="pen.toArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
+                           @change="change('toArrow')">
+                  <div slot="prefix">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                           :key="index" v-if="pen.toArrow==item.name">
+                          <path :d="item.d"></path>
+                          <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
+                                   :strokeWidth="item['stroke-width']"></polygon>
+                          <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
+                                  :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
+                        </g>
+                      </svg>
+                    </div>
+                  </div>
+                  <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
+                    <div class="icon-item">
+                      <svg>
+                        <g fill="none" :stroke="(pen.toArrow==item.name)?'#ee9d3f':item.strokeColor"
+                           stroke-width="1">
+                          <path :d="item.d"></path>
+                          <polygon
+                            v-if="item.points"
+                            :points="item.points"
+                            :fill="(pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                            :stroke="(pen.toArrow==item.name)?'#ee9d3f':item.stroke"
+                            :strokeWidth="item['stroke-width']"
+                          ></polygon>
+                          <circle
+                            v-if="item.cx"
+                            :cx="item.cx"
+                            :cy="item.cy"
+                            :r="item.r"
+                            :fill="(pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
+                            :stroke="(pen.toArrow==item.name)?'#ee9d3f':item.stroke"
+                            :strokeWidth="item['stroke-width']"
+                          ></circle>
+                        </g>
+                      </svg>
+                    </div>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'color',value: pen.color}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                width
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :min="1"
+                  :precision="0"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.lineWidth"
+                  required
+                  @change="change('lineWidth')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                border color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'borderColor',value: pen.borderColor}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                borderWidth
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :min="0"
+                  :precision="0"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.borderWidth"
+                  required
+                  @change="change('borderWidth')"></el-input-number>
+              </div>
+            </div>
+          </div>
+
+          <!--        lineAnimate  -->
+          <div class="form-row-title">
+            Animate
+            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('lineAnimate')"/>
+          </div>
+          <div v-show="elements.lineAnimate" class="form-row-content">
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Type
+              </div>
+              <div class="form-row-value">
+                <el-select
+                  v-model="pen.lineAnimateType "
+                  :popper-append-to-body="true"
+                  popper-class="right-box-select-top right-public-box-dropdown-top"
+                  @change="change('lineAnimateType')"
+                  size="small">
+                  <el-option
+                    v-for="(item,index) in lineAnimateOptions"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Speed (0 - 10)
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :min="0"
+                  :max="10"
+                  :precision="0"
+                  controls-position="right"
+                  size="small"
+                  name="animateSpan"
+                  class="input"
+                  v-model.number="pen.animateSpan"
+                  required
+                  @change="change('animateSpan')"></el-input-number>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                color
+              </div>
+              <div class="form-row-value">
+                <nezhaColor
+                  :isTopo="true"
+                  :value-arr="[{name:'animateColor',value: pen.animateColor}]"
+                  @colorChange="colorChange"/>
+              </div>
+            </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                Reverse
+              </div>
+              <div class="form-row-value">
+                <el-switch
+                  v-model="pen.animateReverse"
+                  :active-value="true"
+                  :inactive-value="false"
+                  @change="change('animateReverse')"
+                ></el-switch>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import nezhaColor from '@/components/common/nezhaColor'
+export default {
+  name: 'meta2dElement', // node 和 line 所有组件均是分开创建的 修改相同属性时 需要同时修改
+  components: {
+    nezhaColor
+  },
+  props: {
+    selectPens: {},
+    elements: {}
+  },
+  watch: {
+    selectPens: {
+      immediate: true,
+      handler (n) {
+        console.log(n, 'selectPens')
+        this.pen = n[0]
+        // todo 判断legend 是否还存在
+        // this.$forceUpdate()
+      }
+    }
+  },
+  data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
+    return {
+      theme: theme,
+      pen: {},
+      penDash: [
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '5,5', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
+      ],
+      penLineType: [
+        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+      ],
+      textAlignOptions: [
+        {
+          id: 'left',
+          name: this.$t('overall.left')
+        },
+        {
+          id: 'center',
+          name: this.$t('project.topology.center')
+        },
+        {
+          id: 'right',
+          name: this.$t('dashboard.panel.chartForm.alignList.right')
+        }
+      ],
+      textBaselineOptions: [
+        {
+          id: 'top',
+          name: this.$t('project.topology.topOffsetY')
+        },
+        {
+          id: 'middle',
+          name: this.$t('project.topology.middleOffsetY')
+        },
+        {
+          id: 'bottom',
+          name: this.$t('project.topology.bottomOffsetY')
+        }
+      ],
+      penLineFromTOArrow: [
+        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        {
+          d: 'M5 14 l85 0',
+          points: '5 14,20 9,20 19',
+          fill: '#000000',
+          stroke: '',
+          'stroke-width': '',
+          name: 'triangleSolid',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
+
+        },
+        {
+          d: 'M5 14 l85 0',
+          points: '5 14,20 9,20 19',
+          fill: '#ffffff',
+          stroke: '#000000',
+          'stroke-width': '1',
+          name: 'triangle',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
+        },
+        {
+          d: 'M5 14 l85 0',
+          fill: '#000000',
+          stroke: '',
+          'stroke-width': '',
+          cx: '10',
+          cy: '14',
+          r: '5',
+          name: 'circleSolid',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
+        },
+        {
+          d: 'M5 14 l85 0',
+          fill: '#ffffff',
+          stroke: '#000000',
+          'stroke-width': '1',
+          cx: '10',
+          cy: '14',
+          r: '5',
+          name: 'circle',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
+        },
+      ],
+      lineAnimateOptions: [
+        { id: 3, name: this.$t('project.topology.flow') },
+        { id: 1, name: this.$t('project.topology.beads') },
+        { id: 2, name: this.$t('project.topology.dot') },
+        // { id: 'comet', name: this.$t('project.topology.comet') },
+        { id: 0, name: this.$t('project.topology.none') }
+      ],
+    }
+  },
+  methods: {
+    change (key) {
+      if (key === 'lineDash') {
+        const val = this.pen.borderType
+        this.pen.lineDash = val ? (val == 1 ? [5, 5] : ((val == 2 ? [10, 10] : [10, 10, 2, 10]))) : []
+      }
+      this.$emit('change', key)
+    },
+    colorChange (val, key) {
+      this.pen.data.params[key] = val
+      this.pen[key] = val
+      console.log(key, val)
+      this.change(key)
+    },
+    updateShow (key) {
+      this.elements[key] = !this.elements[key]
+    },
+    inputFocus (e) {
+      e.path[2].children[0].setAttribute('tabindex', '0')
+      e.path[2].children[1].setAttribute('tabindex', '1')
+    },
+    inputBlur (e) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .form-row-item{
+    vertical-align: top;
+    width: calc(50% - 15px);
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 5px;
+    margin-bottom: 10px;
+    .form-row-key{
+      margin-bottom: 5px;
+    }
+  }
+  .special-meta2d-select {
+    /deep/ .el-input.el-input--prefix.el-input--suffix{
+      border: 1px solid #E7EAED;
+      height: 28px;
+    }
+    /deep/ .el-select--small{
+      width: 100%;
+    }
+    /deep/ .el-input__inner{
+      display: none;
+    }
+  }
+  .form-row-item-full{
+    width: 100%;
+  }
+  .form-row-item:nth-of-type(even) {
+    /*margin-left: 10px;*/
+  }
+  .form-row-title{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .form-row-content{
+    margin-bottom: 5px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
new file mode 100644
index 000000000..cd6cb1f31
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="topo-header">
+    <div v-if="!isChart"> {{projectName}} </div>
+    <div class="tools-left">
+      <div class="tools-left-drag">
+        <div
+          class="icon"
+          draggable="true"
+          @dragstart.stop="onDragstart($event)"
+          @click="onTouchstart($event)"
+        >
+          <div>Rectangle</div>
+        </div>
+      </div>
+      <div class="tools-left-draw" @click="setDrawPen()">
+        钢笔
+      </div>
+    </div>
+    <div>
+      <button v-has="'project_edit'" v-if="!isChart" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d" :title="$t('overall.edit')">
+        <i class="nz-icon nz-icon-edit"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
+import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
+import { deepClone } from '@meta2d/core'
+export default {
+  name: 'meta2dHeader',
+  mixins: [topoUtil],
+  props: {
+    meta2dId: {},
+    isChart: {
+      type: Boolean,
+      default: false
+    },
+    projectName: {}
+  },
+  data () {
+    return {
+      topoScreenState: ''
+    }
+  },
+  computed: {
+    topoScreen () {
+      return this.$store.getters.getShowTopoScreen
+    },
+    shrink () {
+      return this.$store.getters.getIsShrink
+    }
+  },
+  methods: {
+    editMeta2d () {
+      console.log()
+      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
+      this.$store.commit('setShowTopoScreen', true)
+      setTimeout(() => {
+        this.topoResize(this.meta2dId)
+        this.initEdit(this.meta2dId)
+        this.$emit('edit')
+        console.log(getTopology(this.meta2dId).data())
+      })
+    },
+    onDragstart (e) {
+      const pen = {
+        name: 'rectangle',
+        text: '矩形',
+        width: 100,
+        height: 100
+      }
+      e.dataTransfer.setData('Text', JSON.stringify(pen))
+    },
+
+    // 支持鼠标单击添加图形
+    onTouchstart  (e) {
+      const pen = {
+        name: 'rectangle',
+        text: '矩形',
+        width: 100,
+        height: 100
+      }
+      getTopology(this.meta2dId).canvas.addCaches = deepClone([pen])
+    },
+    // 开启钢笔状态
+    setDrawPen () {
+      console.log(123123123123)
+      getTopology(this.meta2dId).drawLine('line')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.topo-header {
+  height: 60px;
+  box-sizing: border-box;
+  padding: 14px 20px 14px 10px;
+  display: flex;
+  .tools-left{
+    display: flex;
+  }
+}
+</style>
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
new file mode 100644
index 000000000..037cb74a7
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="meta2d-box">
+    <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :projectName="projectName" @edit="editFlag = true"/>
+    <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'">
+      <div :id="meta2dId" style="height: 100%;width: 100%"></div>
+    </div>
+    <meta2dProps ref="meta2dProps" :selectPens.sync="selectPens" :querysArray="querysArray" @updatePens="updatePens" v-if="editFlag"/>
+  </div>
+</template>
+
+<script>
+import meta2dHeader from '@/components/common/project/meta2d/meta2dHeader'
+import meta2dProps from '@/components/common/project/meta2d/meta2dProps'
+import meta2dMain from '@/components/common/project/meta2d/js/meta2dMain'
+export default {
+  name: 'meta2dMain',
+  mixins: [meta2dMain],
+  props: {
+    meta2dId: {}, // 唯一id 不可重复
+    topoData: {}, // topo图数据
+    isChart: {
+      type: Boolean,
+      default: false
+    },
+    querysArray: {},
+    projectName: {}
+  },
+  components: {
+    meta2dHeader,
+    meta2dProps
+  },
+  watch: {
+    topoData: {
+      immediate: true,
+      handler () {
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+  .meta2d-box{
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+  .meta2d-main{
+    width: 100%;
+    height: 100%;
+  }
+  .meta2d-chart{
+
+  }
+  .meta2d-project{
+    height: calc(100% - 78px);
+    border: 1px solid;
+    border-color: #999999;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
new file mode 100644
index 000000000..ad5dfcebe
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="props-box props">
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="elements" name="elements" v-if="selectPens.length === 1">
+        <meta2dElement :selectPens.sync="selectPens" @change="change" :elements="elements"/>
+      </el-tab-pane>
+      <el-tab-pane label="canvas" name="canvas">
+        <meta2dCanvas />
+      </el-tab-pane>
+      <el-tab-pane label="data" name="data">
+        <meta2dData :querysArray="querysArray"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import meta2dElement from '@/components/common/project/meta2d/meta2dElement'
+import meta2dCanvas from '@/components/common/project/meta2d/meta2dCanvas'
+import meta2dData from '@/components/common/project/meta2d/meta2dData'
+export default {
+  name: 'meta2dProps',
+  props: {
+    selectPens: {},
+    querysArray: {}
+  },
+  components: {
+    meta2dElement,
+    meta2dCanvas,
+    meta2dData
+  },
+  watch: {
+    selectPens (n) {
+      console.log(n)
+      if (n.length === 1) {
+        this.activeName = 'elements'
+      }
+    }
+  },
+  data () {
+    return {
+      activeName: 'canvas',
+      elements: {
+        backGround: true,
+        border: true,
+        position: true,
+        text: true,
+        valueMapping: true,
+        tooltip: true,
+        line: true,
+        lineAnimate: true
+      }
+    }
+  },
+  methods: {
+    change (key) {
+      this.$emit('updatePens', this.selectPens[0], key)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .props-box {
+    width: 500px;
+    position: absolute;
+    height: calc(100% - 78px);
+    top: 61px;
+    padding: 0 !important;
+    box-sizing: border-box;
+    right: 0;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/monitor/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
index 2bf9bc5b4..d2a61c39a 100644
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="project">
-    <topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>
-
+<!--    <topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>-->
+    <meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :projectName="currentProject.name"/>
     <transition name="el-zoom-in-bottom">
       <bottom-box
         v-if="bottomBox.showSubList"
@@ -44,14 +44,19 @@
 <script>
 import bus from '@/libs/bus'
 import topologyL5 from '@/components/common/project/topologyL5'
+import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
+import beforeMeta2d from "@/components/common/mixin/beforeMeta2d";
 
 export default {
   name: 'project2',
+  mixins: [beforeMeta2d],
   components: {
-    topologyL5
+    topologyL5,
+    meta2dMain
   },
   data () {
     return {
+      meta2dType: 'project',
       rightBox: {
         module: { show: false },
         addEndpoint: { show: false },