概要

可视化编辑器已成为前端发展趋势，相关产品层出不穷，但是用户很难根据自身需求完整实现一个可用的可视化编辑器，我将采用乐吾乐开源的meta2d.js可视化库来实现一个简单的流程图编辑器，通过这个案例来介绍meta2d的相关功能，并向读者展示如何用meta2d从零出发搭建一个较为完整的项目，让我们在实际项目中来体验meta2d的强大之处吧。

什么是乐吾乐meta2d.js

meta2d是乐吾乐开源的2D图元组成的可视化引擎，集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0 代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。

乐吾乐 meta2d开源项目地址：github.com/le5le-com/m...

乐吾乐 meta2d官方文档：doc.le5le.com/document/11...

可视化流程图编辑器项目地址：github.com/Grnetsky/me...

1. 环境搭建

技术栈

在技术选型中结合个人喜好和项目实际需求，作者选择vue3+vite+ElementUIplus技术栈

由于在未来相关库会进行更新迭代，作者无法保证此教程在未来依然有效，为了保证此教程的可用性，建议读者版本与我保持一致，本项目相关依赖库的版本如下所示：

perl 复制代码

{
  "name": "meta2d_vue",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "author": {
    "name": "DrieckyCay",
    "email": "1101767893@qq.com"
  },
  "postinstall": "node ./src/test.js",
  "dependencies": {
    "@meta2d/activity-diagram": "^1.0.0",
    "@meta2d/chart-diagram": "^1.0.3",
    "@meta2d/class-diagram": "^1.0.1",
    "@meta2d/core": "^1.0.20",
    "@meta2d/flow-diagram": "^1.0.0",
    "@meta2d/form-diagram": "^1.0.4",
    "@meta2d/sequence-diagram": "^1.0.0",
    "@meta2d/svg": "^1.0.2",
    "axios": "^1.4.0",
    "element-plus": "^2.3.7",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.0"
  }
}