🎨
灵活的渲染引擎
基于 SVG 的图形渲染，支持自定义形状、连接线和交互行为
diagram-js图表工具箱
用于在 Web 上显示和修改图表的强大工具库
Skip to content
快速安装
bash
npm install diagram-js简单示例
javascript
import Diagram from "diagram-js";
// 创建一个图表实例
const diagram = new Diagram({
canvas: { container: "#canvas" },
});
// 获取画布服务
const canvas = diagram.get("canvas");
// 创建根元素
const root = canvas.setRootElement({
id: "root",
});核心概念
diagram-js 采用模块化架构，核心概念包括：
- Model: 图表元素的数据模型（Shape、Connection、Label 等）
- Canvas: 画布服务，负责 SVG 渲染和层级管理
- EventBus: 事件总线，所有交互和变更都通过事件传递
- CommandStack: 命令栈，实现撤销/重做功能
- Features: 功能模块，如拖拽、对齐、吸附等