推荐开源项目：diagram-js - 网络图绘制和编辑的利器

Diagram-JS 是一个用于创建网络图和编辑器的开源库。它是BPMN和DMN的核心库，由bpmn.io项目开发和维护。以下是如何使用Diagram-JS创建简单的网络图的示例代码：

import { createElement } from 'diagram-js/lib/core/Create';
import { updatePosition } from 'diagram-js/lib/core/Update';
import { addCanvasEntry } from 'diagram-js/lib/core/Canvas';
import {
  addSnapLines,
  addMoveSnapping,
} from 'diagram-js/lib/features/snapping';
 
// 创建绘图
const draw = {
  create: 'element:new',
  updatePosition: 'element.move',
  canvas: {
    add: 'element.add',
  },
  snap: {
    lines: 'snap.toggle',
    move: 'snap.move',
  },
};
 
// 初始化绘图
function initDraw(eventBus) {
  // 创建元素
  function createElement(position) {
    // 创建元素代码
    // 返回创建的元素
  }
 
  // 更新元素位置
  function updateElementPosition(element, newPosition) {
    // 更新元素位置代码
  }
 
  // 添加元素到画布
  function addCanvasEntry(element) {
    // 添加元素到画布代码
  }
 
  // 添加对齐线
  function addSnapLines(context) {
    // 添加对齐线代码
  }
 
  // 添加移动对齐
  function addMoveSnapping(eventType, context) {
    // 添加移动对齐代码
  }
 
  // 订阅事件
  eventBus.on(draw.create, createElement);
  eventBus.on(draw.updatePosition, updateElementPosition);
  eventBus.on(draw.canvas.add, addCanvasEntry);
  eventBus.on(draw.snap.lines, addSnapLines);
  eventBus.on(draw.snap.move, addMoveSnapping);
}
 
// 使用示例
const eventBus = {
  on: function(event, handler) {
    // 事件订阅逻辑
  },
};
 
initDraw(eventBus);

这段代码演示了如何使用Diagram-JS创建和初始化一个简单的绘图应用程序。它包括创建元素、更新元素位置、将元素添加到画布以及添加对齐线和移动对齐功能。这是一个基本的框架，开发者可以根据自己的需求扩展和定制这些功能。