syncfusion-vue-diagram

使用 Syncfusion Vue 实现图表

Syncfusion Vue Diagram 组件可帮助你创建交互式、可自定义的图表，用于可视化复杂流程、组织层级、工作流和数据关系。从简单的流程图到高级 BPMN 图表和 UML 表示，Diagram 组件提供了全面的可视化沟通工具。

何时使用此技能

• 流程图和流程图表 — 可视化工作流、决策树或程序流程
• 组织结构图 — 使用自动布局表示层级结构
• BPMN 工作流 — 使用活动、网关和事件设计业务流程模型
• UML 图表 — 创建类图、时序图和结构化关系
• 思维导图和径向树 — 以层级方式组织想法和概念
• 泳道图 — 展示多个参与者或部门之间的流程
• 自定义形状和连接线 — 构建带有样式化节点和标记连接的定制图表
• 交互式可视化 — 支持拖放、选择、平移/缩放和用户交互

导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 npm 包（Vue 2/3/Next.js/Preact）
• 使用 Vite/CRA 设置项目
• CSS 导入和主题配置
• DiagramComponent 基本用法
• 模块注入基础知识

核心元素：节点

📄 阅读： references/nodes.md

• 创建节点并将其添加到图表中
• 节点定位（offsetX/Y、width/height）
• 节点形状类型（Flow、Basic、Path）
• 节点样式（填充、描边、不透明度、阴影）
• 节点自定义和模板
• 展开/折叠功能
• 节点事件和回调

核心元素：连接线

📄 阅读： references/connectors.md

• 连接线类型（Straight、Orthogonal、Bezier）
• 线段配置和路由
• 通过 sourceID/targetID 连接节点
• 高级线段和贝塞尔曲线
• 连接线自定义和样式设置
• 连接线事件和交互

注释：标签和文本

📄 阅读： references/labels-and-annotations.md

• 为节点和连接线添加标签
• 标签样式（字体、颜色、对齐、旋转）
• 标签交互（编辑、拖动、调整大小）
• 标签定位和偏移
• 标签事件

连接点：端口

📄 阅读： references/ports.md

• 节点上的端口类型和连接点
• 端口定位和可见性
• 端口外观和样式
• 将连接线连接到特定端口
• 端口交互和事件

形状和视觉样式

📄 阅读： references/shapes-and-styles.md

• 内置形状类型（Flow、Basic、Path、Image、HTML）
• 流程图形状参考
• 样式属性（填充、描边、虚线、阴影）
• CSS 类自定义
• 主题集成

BPMN 图表

📄 阅读： references/bpmn-diagrams.md

• BPMN 模块注入和设置
• BPMN 形状概览和类型
• 活动（任务、子流程、展开的子流程）
• 事件（开始、结束、中间）
• 网关（排他、并行、包容）
• 流（顺序、消息、关联）
• 数据对象和数据源
• 组和文本注释

UML 图表

📄 阅读： references/uml-diagrams.md

• UML 类图
• 分类器形状（类、接口、枚举）
• UML 关系和关联
• UML 时序图元素和参与者
• 参与者构造型（Actor、Boundary、Control、Entity、Database、Default）
• 消息类型（Synchronous、Asynchronous、Reply、Create、Delete、Self）
• 激活框和生命线
• 完整的工作流示例

实体关系图

📄 阅读： references/implementing-entity-relationship-diagrams.md

• 实体关系（ER）图概念和模型
• ER 形状配置，包括字段和属性
• 字段约束（NotNull、Unique、Primary Key、Foreign Key）
• 关系类型和多重性（One、OneAndOnlyOne、Many、ZeroOrOne、OneOrMany、ZeroOrMany）
• ER 连接器和关系配置
• 运行时字段管理和操作

自动布局

📄 阅读： references/layouts.md

• 层次树布局
• 组织结构图布局
• 思维导图布局
• 径向树布局
• 流程图布局
• 复杂层次结构配置
• 布局自定义和间距
• 布局事件和回调

泳道和阶段

📄 阅读： references/swimlanes.md

• 泳道结构概述
• 创建泳道和阶段
• 泳道子项和标题配置
• 泳道调色板
• 泳道交互

分组和容器

📄 阅读： references/groups-and-containers.md

• 将节点组合在一起
• 分组操作（添加/移除子项）
• 容器节点和嵌套
• 容器内的内边距和布局

符号调色板

📄 阅读： references/symbol-palette.md

• SymbolPaletteComponent 设置
• 定义调色板符号
• 拖放到图表中
• 调色板自定义（图标、搜索、大小）
• 调色板事件和交互

数据绑定

📄 阅读： references/data-binding.md

• DataManager 和 dataSourceSettings
• 层次结构的 id/parentId 映射
• 从 JSON 数据渲染组织结构图
• 通过 DataManager 获取远程数据（OData/Web API/REST）
• 使用 setNodeTemplate 进行数据驱动渲染

交互和工具

📄 阅读： references/interaction-and-tools.md

• 选择、拖动和调整大小交互
• 工具模式（指针、绘制、平移）
• 约束（节点、连接器、图表）
• 命令和键盘快捷键
• 撤销/重做功能
• 上下文菜单
• 用户句柄

序列化和导出

📄 阅读： references/serialization-and-export.md

• 将图表保存/加载为 JSON
• 导出为图像（PNG、SVG、JPG）——使用 exportDiagram（注入 PrintAndExport）
• 打印功能
• Visio 文件导入/导出（实验性；注入 ImportAndExportVisio）
• 支持 Mermaid 语法，使用 saveDiagramAsMermaid() 和 loadDiagramFromMermaid()
• 使用 isModified 属性检测更改，以跟踪未保存的更改
• EJ1 迁移序列化

图表设置和配置

📄 阅读： references/diagram-settings.md

• 图层（添加、锁定、可见性、选择）
• 虚拟化（性能优化）
• 网格线（吸附、点/线）
• 标尺（水平/垂直）
• 滚动设置
• 页面设置（大小、方向、边距）
• 工具提示配置
• 概览面板
• 本地化和无障碍功能

快速入门

<template>
  <div id="app">
    <ejs-diagram 
      id="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
      :connectors="connectors"
      :snapSettings="snapSettings"
    ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent,SnapConstraints } from '@syncfusion/ej2-vue-diagrams';
export default {
  name: "App",
  components: {
      "ejs-diagram": DiagramComponent
  },
  data() {
      return {
          width: "100%",
          height: "590px",
          nodes: [
            {
              id: 'node1',
              width: 100,
              height: 100,
              offsetX: 250,
              offsetY: 250,
              style: { fill: '#6BA3D5' },
              annotations: [{ content: 'Node 1' }]
            },
            {
              id: 'node2',
              width: 100,
              height: 100,
              offsetX: 450,
              offsetY: 250,
              style: { fill: '#6BA3D5' },
              annotations: [{ content: 'Node 2' }]
            }
          ],
          connectors: [
            {
              id: 'connector1',
              sourceID: 'node1',
              targetID: 'node2',
              type: 'Orthogonal'
            }
          ],
          snapSettings: {
            constraints: SnapConstraints.None
          }
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Vue 2 与 Vue 3 选择指南

⚠️ 重要： Syncfusion Diagram 同时支持 Vue 2 和 Vue 3，但两者的模式差异显著。

快速决策树

┌─ Do you have an existing Vue project?
│
├─ YES, it's Vue 3 (Vite, create-vue, etc.)
│  └─ Use: Composition API with <script setup>
│     ✅ Modern, performant, recommended
│     📄 Read: getting-started.md (Vue 3 Composition API section)
│
├─ YES, it's Vue 2 (Vue CLI, legacy projects)
│  └─ Use: Options API with export default
│     ✅ Compatible, but consider migrating
│     📄 Read: getting-started.md (Vue 2 section)
│
└─ NO, starting fresh
   └─ Recommended: Vue 3 with Vite
      ✅ Fastest, most modern
      📄 Read: getting-started.md (Vite + Vue 3 setup)

版本特征

Vue 3 Composition API（推荐）：

import { ref } from 'vue';
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

const nodes = ref([...]);  // ← Use ref()

Vue 2 Options API：

import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

export default {
  data() {
    return {
      nodes: [...]  // ← Use data()
    }
  }
}

⚡ 专业提示： 如果不确定，默认使用 Vue 3 Composition API——它是新建 Syncfusion 项目的行业标准。

常见模式

模式 1：使用自动布局创建流程图

// Use hierarchical layout with nodes and connectors
const layout = {
  type: 'HierarchicalTree',
  orientation: 'TopToBottom',
  horizontalSpacing: 50,
  verticalSpacing: 50,
  getLayoutInfo: (node, options) => {
    // Customize layout per node
  }
};
diagram.layout = layout;
diagram.doLayout();

模式 2：数据驱动的组织结构图

// Render org chart from JSON data with DataManager
const dataSettings = {
  id: 'id',
  parentId: 'manager',
  dataSource: new DataManager(employeeData)
};
diagram.dataSourceSettings = dataSettings;

模式 3：交互式节点选择

// Handle node selection events
diagram.selectionChange = (args) => {
  console.log('Selected:', args.newItems);
};

// In Vue: bind the selectionChange event and read newValue/oldValue
// <ejs-Diagram :selectionChange="onSelectionChange" ... />
const onSelectionChange = (args) => {
  console.log('Selected:', args.newItems);
};

模式 4：导出和持久化（高级）

// Save state and export
const jsonData = diagram.saveDiagram();
localStorage.setItem('diagram', jsonData);

// Later: Load from storage
const saved = localStorage.getItem('diagram');
diagram.loadDiagram(saved);

// Export as PNG
diagram.export({ format: 'PNG', fileName: 'diagram' });

关键属性

属性	类型	用途
nodes	Array	图表节点集合
connectors	Array	连接各节点的连接器集合
layout	Object	自动布局配置
dataSourceSettings	Object	数据绑定和数据源配置
snapSettings	Object	对齐约束和参考线
pageSettings	Object	页面大小、方向和边距
scrollSettings	Object	平移和滚动行为
constraints	Object	图表级交互约束
contextMenuSettings	Object	右键菜单配置
undoRedoSettings	Object	撤销/重做行为

相关技能

• 使用 Syncfusion 工作流进行 BPMN 流程建模
• 数据可视化布局和层次结构
• 交互式流程图设计