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 を注入）
• saveDiagramAsMermaid() と loadDiagramFromMermaid() による Mermaid 構文のサポート
• 未保存の変更を追跡する 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 プロセスモデリング
• データ可視化のレイアウトと階層構造
• インタラクティブなフローチャートの設計