# meta2d.js

**Repository Path**: le5le/meta2d.js

## Basic Information

- **Project Name**: meta2d.js
- **Description**: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://2ds.le5le.com
- **GVP Project**: No

## Statistics

- **Stars**: 377
- **Forks**: 163
- **Created**: 2021-12-24
- **Last Updated**: 2025-06-18

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

[English](./README.md) | 简体中文

# Meta2d.js

Meta2d.js 是一个实时数据响应和交互的 2d 引擎，可用于 Web 组态，物联网，数字孪生等场景。。

<center style="display:flex;justify-content:">
<img style="height:100px;margin: 10px" src="https://cdn.nlark.com/yuque/0/2021/gif/12382170/1623210619545-5fca920c-bb57-4e52-9569-49dd0d9d331f.gif" >

<img style="height:100px;margin: 10px" src="https://2ds.le5le.com/image/topology/thumb_c90bffc8f01747ed.png" >

<img style="height:100px;margin: 10px" src="https://2ds.le5le.com/image/topology/thumb_815f7b82401a97e2.png"> 
</center>

<br>

# 在线使用

[在线使用](http://2ds.le5le.com)

<br>

# 为什么使用

**新引擎**

- 数据+ 算法 + 风格 = 栩栩如生；
- 数据为核心、数据驱动显示；
- 多状态呈现，进度、动效多角度动态展示
- 支持自动算法、业务算法等中间件扩展

**追求卓越性能**

- 支持 1 万+以上节点。全部采用引擎原生节点更可达到 2 万节点
- 支持 1000+动画播放，大数据、高要求场景无压力

**实时动态数据监听**

- 支持 mqtt 动态数据监听
- 支持 websocket 动态数据监听
- 支持 http 自主请求动态更新数据

**丰富的交互事件**

- 画笔全生命周期事件（创建、更新、销毁）
- 鼠标进入、移出、单击、选中等事件
- 移动、缩放、旋转等事件
- 网络消息事件
- 动画、视频播放事件
- 文本输入事件

**自由可扩展**

- 可定制化开发图形库
- 可直接在线绘画图形
- 支持 SVG PATH

**丰富的应用场景支持**

- 架构图、拓扑图、UML 图、脑图等
- 电力能源、水利等
- 物联网、工业互联网等
- 智慧城市、智慧医疗、智慧农业等
- 大屏展示、IT 运维等

<br>

# 亮点

**功能丰富，更具高性能**

- 状态、事件、动效、动态监听、自由扩展，可支持 1 万+以上节点

**动态数据实时监听**

- 支持 mqtt、websocket、或 http 自主请求等多种方式动态监听数据

**钢笔和曲线工具，方便在线定制图形**

- AI 小图标直接在线制作
- 随意涂鸦的自由曲线，让创作随心所欲

**简洁易用的动画**

- 优异的性能，可高达 1000 动画同时播放

**支持 SVG path**

- 不再把 svg 当作静态图片，直接支持 svg path 属性，想要给 svg 变个色，随手就来

**“全民”进度条**

- 任意封闭图形，都可以当进度条：矩形、圆、svg、封闭连线、或其他任意封闭图形

**智能自动算法支持**

- 连线自动锚点，自动识别最近锚点
- 自动吸附。拖拽过程中自动推荐对齐点，支持自定义算法替换
- 其他算法。支持排列布局、自动成图等，定制扩展

# 开发文档

https://doc.le5le.com/document/119359590

# 开始上手

https://github.com/le5le-com/meta2d.js/tree/main/examples/diagram-editor-vue3

# License

MIT © le5le.com