syncfusion-angular-diagram

Syncfusion Angular Diagram の実装

このスキルを使用するタイミング

以下が必要な場合に、このスキルを使用してください。

• 視覚的な図を作成する（フローチャート、組織図、BPMN、UML）
• ノードとコネクタを使ってインタラクティブな図を構築する
• レイアウトを適用する（階層型、組織図、マインドマップ、放射状、フローチャート）
• ビジネスプロセス向けのBPMN または UML 図を設計する
• 操作機能を追加する（ドラッグ、サイズ変更、選択、元に戻す／やり直す）
• 図を JSON／画像にエクスポートまたはシリアライズする

重要：API の検証が必要です

API の検証が必要です：コード例を作成する前に、必ずリファレンスファイル（references/*.md）を読んで、API のクラス名、プロパティ、シグネチャを確認してください。クラス名を推測したり、推論したりしないでください。 ⚠️ コードを書く前に、既知の無効な API やプロパティを避けるため、すぐ下の よくある間違い のセクションを確認してください。

コンポーネントの概要

Syncfusion Angular Diagram コンポーネントは、図を作成および編集するための視覚的なキャンバスを提供します。

基本概念

1. ノード - 長方形、円、フローチャート図形、カスタム図形
2. コネクタ - ノードをつなぐ線（直線、直交、ベジェ）
3. ラベル - ノードとコネクタ上のテキスト注釈
4. ポート - ノード境界上の接続点
5. スイムレーン - プロセス図用の水平／垂直レーン
6. レイアウト - 自動配置（階層型、組織図、マインドマップなど）
7. BPMN 図形 - ビジネスプロセス図の標準図形
8. UML 図 - クラス図とシーケンス図の表記法
9. シンボルパレット - ドラッグ可能なシンボルライブラリ
10. データバインディング - JSON データから図を描画

主な機能

• インタラクティブな編集： ノードやコネクタのドラッグ、サイズ変更、回転
• 自動レイアウト： 階層型、組織図、マインドマップ、放射状、フローチャートのレイアウト
• BPMN と UML： 標準的な図向けの組み込み図形ライブラリ
• シリアライズ： 図を JSON として保存／読み込み
• エクスポート： PNG、SVG、PDF への画像エクスポートと印刷
• 元に戻す／やり直す： 完全な履歴サポート
• 仮想化： 大規模な図を効率的に描画
• アクセシビリティ： キーボード操作による WCAG 2.1 準拠

ドキュメントとナビゲーションガイド

まず Getting Started を確認し、その後、必要な機能に進んでください。

図の基本構築

📄 参照： references/getting-started.md

• インストールと依存関係
• テーマの設定（material、bootstrap、fabric）
• CSS／SCSS のインポート
• DiagramComponent の基本的な使用方法
• モジュールのインジェクションパターン
• スタンドアロンコンポーネントの設定

📄 参照： references/nodes.md

• ノードの作成と図への追加
• オフセットと配置（offsetX、offsetY）
• ノードの寸法（width、height）
• 組み込み図形（Flow、Basic、Path）
• カスタムスタイル（fill、stroke、opacity）
• ノードのテンプレートと外観
• ノードグループの展開／折りたたみ
• ノードイベント（クリック、選択、ドラッグ）
• スタイルの既定値を設定する getNodeDefaults パターン

📄 参照： references/connectors.md

• 3 種類のコネクタ：直線、直交、ベジェ
• セグメントの設定と経路探索
• ノードをリンクする sourceID と targetID
• コネクタ内の複数セグメント
• ベジェの制御点と向き
• コネクタのカスタマイズ（stroke、fill、破線）
• コネクタのイベントと操作
• スタイルの既定値を設定する getConnectorDefaults パターン

ラベル、ポート、スタイル

📄 参照： references/labels-and-annotations.md

• ノードとコネクタへの注釈の追加
• ラベルの外観（フォント、色、太字、斜体、配置）
• コネクタ上のラベルの位置指定（開始位置、終了位置、中央）
• ノードラベルとコネクタラベル
• ラベルの操作（編集モード、ドラッグ、サイズ変更）
• ラベルイベント（編集、フォーカス、フォーカス解除）
• Markdown または HTML による書式設定

📄 参照： references/ports.md

• ノード上のポートの種類と位置指定
• 外観のカスタマイズ（形状、塗りつぶし、サイズ）
• コネクタを特定のポートに接続
• 接続の表示と制約
• ポートの操作と表示設定
• getPortDefaults パターン

📄 参照： references/shapes-and-styles.md

• 組み込みの形状タイプ：Flow、Basic、Path、Image、HTML、Native SVG
• フローチャートの形状（プロセス、判断、開始、終了など）
• スタイルプロパティ（塗りつぶし、ストローク、strokeWidth、dashArray、影）
• CSS クラスとテーマのカスタマイズ
• グラデーションとパターンによる塗りつぶし

高度なダイアグラム

📄 参照： references/entity-relationship-diagrams.md

• エンティティリレーションシップ図の設計とデータベーススキーマの可視化
• ErShapeModel の設定を使用した ER エンティティノード
• エンティティのヘッダー、フィールド、制約（主キー、外部キー、一意、NULL 不可）
• 実行時のフィールド管理（追加、削除、変更）
• エンティティのスタイル設定と交互の行の色
• カラスの足記法による多重度を使用した ER リレーションシップとコネクタ
• データベーススキーマの完全な例（顧客・注文・商品）

📄 参照： references/bpmn-diagrams.md

• BPMN モジュールのインジェクションとセットアップ
• BPMN の形状の概要と標準記法
• アクティビティ（タスク、サブプロセス、展開されたサブプロセス、ループ）
• イベント（開始、終了、中間キャッチ／スロー）
• ゲートウェイ（排他、並列、包含、複合）
• フロー（シーケンスフロー、メッセージフロー、関連）
• データオブジェクトとデータソース
• グループとテキスト注釈
• BPMN 固有のスタイル設定とラベル

📄 参照： references/uml-diagrams.md

• UML クラス図の形状
• 分類子の形状（クラス、インターフェース、列挙型、パッケージ、コンポーネント）
• クラスの属性、メソッド、可視性修飾子
• UML リレーションシップ（関連、汎化、集約、コンポジション）
• 参加者、メッセージ、実行仕様を含む UML シーケンス図
• 6 種類のステレオタイプを持つシーケンス図の参加者（Actor、Boundary、Control、Entity、Database、Default）
• 6 種類のメッセージを持つシーケンス図のメッセージ（同期、非同期、応答、生成、削除、自己）
• 実行仕様と破棄マーカー
• 参加者の終了を示す破棄マーカー
• ログインフローとインタラクションシーケンスの完全な例

レイアウトと構造

📄 参照： references/layouts.md

• 上から下、下から上、左から右、右から左に配置する階層ツリーレイアウト
• 組織図のレイアウト
• マインドマップのレイアウト（サブツリー、枝）
• 放射状ツリーレイアウト
• スイムレーンを使用したフローチャートレイアウト
• 拡張ノードを含む複雑な階層ツリー
• 自動レイアウトの設定
• レイアウトのカスタマイズ（方向、間隔、マージン）
• レイアウトイベントと完了

📄 参照： references/swimlanes.md

• スイムレーンの構造の概要（ヘッダー、子要素、フェーズ）
• スイムレーン内でのレーンとフェーズの作成
• スイムレーンの子要素の位置指定と制約
• スイムレーンのヘッダーとラベル
• スイムレーンパレットとの連携
• スイムレーンの操作（サイズ変更、移動、子要素の追加／削除）

📄 参照： references/groups-and-containers.md

• ノードのグループ化
• グループ操作（子要素の追加／削除、展開／折りたたみ）
• パディングとレイアウトを備えたコンテナノード
• コンテナ内での子要素の位置指定
• コンテナの制約

インタラクションとツール

📄 読む： references/symbol-palette.md

• SymbolPaletteComponent の設定と統合
• パレットのシンボルとカテゴリの定義
• シンボルを図にドラッグ＆ドロップ
• パレットのカスタマイズ（アイコン、検索、カテゴリ、サイズ）
• シンボルパレットのイベント
• カスタムシンボルライブラリの作成

📄 読む： references/data-binding.md

• DataManager と dataSourceSettings の設定
• データのノードへのマッピング（id、parentId、nodeTemplate）
• JSON データから組織図をレンダリング
• PostgreSQL データソースの統合
• データ駆動型のノードスタイル設定に setNodeTemplate を使用
• 動的なデータの更新とリフレッシュ

📄 読む： references/interaction-and-tools.md

• ノードの選択、ドラッグ、サイズ変更のインタラクション
• ツールモード（ポインター、描画、パン、範囲選択）
• 制約（ノードの制約、コネクタの制約、図の制約）
• コマンド（キーボードショートカット、カスタムコマンド）
• 元に戻す／やり直し機能
• コンテキストメニュー（右クリックメニュー）
• ユーザーハンドル（カスタム接続ハンドル）

シリアライズとエクスポート

📄 読む： references/serialization-and-export.md

• saveDiagram と loadDiagram（JSON シリアライズ）
• Mermaid 構文のサポート（saveDiagramAsMermaid、loadDiagramFromMermaid）
• isModified プロパティで未保存の変更を検出
• 画像形式へのエクスポート（PNG、SVG、PDF）
• 図の印刷機能
• Visio ファイルのインポート（.vsdx）
• EJ1 API 移行時のシリアライズ
• カスタムシリアライズ処理

設定

📄 読む： references/diagram-settings.md

• レイヤー（追加、ロック、表示／非表示、順序）
• 仮想化（大規模な図のパフォーマンス最適化）
• グリッド線（スナップ、ドット／線、ステップサイズ）
• ルーラー（横方向および縦方向の測定ルーラー）
• スクロール設定（自動スクロール、パン）
• ページ設定（サイズ、向き、余白、ページに合わせる）
• ツールチップの設定
• ナビゲーション用の概要パネル
• ローカライズと言語のサポート
• アクセシビリティ（WCAG、ARIA ラベル、キーボード操作）

---

クイックスタートの例

開始するための最小限の図を示します。

import { Component, Inject } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';

@Component({
  selector: 'app-diagram',
  template: `
    <ejs-diagram #diagram 
      width="100%" 
      height="600px"
      [nodes]="nodes"
      [connectors]="connectors">
    </ejs-diagram>
  `,
  standalone: true,
  imports: [DiagramModule]
})
export class DiagramComponent {
  nodes = [
    {
      id: 'start',
      width: 80,
      height: 80,
      offsetX: 150,
      offsetY: 150,
      shape: { type: 'Flow', shape: 'Terminator' },
      annotations: [{ content: 'START' }]
    },
    {
      id: 'process',
      width: 100,
      height: 80,
      offsetX: 350,
      offsetY: 150,
      shape: { type: 'Flow', shape: 'Process' },
      annotations: [{ content: 'Process' }]
    },
    {
      id: 'end',
      width: 80,
      height: 80,
      offsetX: 550,
      offsetY: 150,
      shape: { type: 'Flow', shape: 'Terminator' },
      annotations: [{ content: 'END' }]
    }
  ];

  connectors = [
    { id: 'connector1', sourceID: 'start', targetID: 'process' },
    { id: 'connector2', sourceID: 'process', targetID: 'end' }
  ];
}

詳しい設定については、はじめにをお読みください。

---

モジュールのインジェクションパターン

Syncfusion Diagram では、機能の登録に Inject ディレクティブを使用します。

import { Component, Inject } from '@angular/core';
import { BpmnDiagrams, Swimlane, SymbolPalette } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(BpmnDiagrams, SymbolPalette)

使用する機能は必ずインジェクトしてください。 これにより、バンドルサイズを小さく保ち、依存関係を明示できます。

---

よく使うパターン

1. ノード／コネクタのデフォルト値を取得する

getNodeDefaults(node: NodeModel): NodeModel {
  return {
    shape: { type: 'Flow', shape: 'Process' },
    style: { fill: '#90EE90', stroke: '#228B22' }
  };
}

2. ノードにデータをバインドする

dataSourceSettings: {
  id: 'id',
  parentId: 'parentId',
  dataSource: yourDataArray
}

3. 選択を処理する

diagram.selectionChange((args) => {
  console.log('Selected:', args.newItems);
});

4. 図をエクスポートする

diagram.exportDiagram({format: 'PNG', fileName: 'diagram'});

5. 図をシリアライズする

const diagramData = diagram.saveDiagram();
localStorage.setItem('diagram', JSON.stringify(diagramData));

---

よくある間違い

❌ 図形タイプのエラー

間違い：

// ❌ WRONG - Shape type should be 'Flow', not 'FlowShape'
shape: { type: 'FlowShape', shape: 'Process' }

正しい例：

// ✅ CORRECT - Use 'Flow' for flowchart shapes
shape: { type: 'Flow', shape: 'Process' }

// ✅ CORRECT - Use 'Bpmn' for BPMN shapes
shape: { type: 'Bpmn', shape: 'Task' }

// ✅ CORRECT - Use 'Basic' for basic geometries
shape: { type: 'Basic', shape: 'Rectangle' }

リファレンス： references/shapes-and-styles.md

❌ Diagram.Inject() 内の無効なモジュール

誤り：

// ❌ Swimlane is NOT an injectable module
Diagram.Inject(BpmnDiagrams, Swimlane);

正しい例：

// ✅ Only inject verified documented modules
Diagram.Inject(BpmnDiagrams);

📄 インジェクション可能なモジュールを確認してください： references/bpmn-diagrams.md、 references/swimlanes.md

---

❌ アノテーションスタイルに whiteSpace が存在しない

誤り：

// ❌ whiteSpace is NOT a valid TextStyleModel property
annotations: [{
  content: 'Multi\nLine',
  style: { fontSize: 11, whiteSpace: 'pre-wrap' }  // ❌
}]

正しい例：

// ✅ Use \n in content — valid style props:
// fontSize, color, bold, italic, fontFamily,
// opacity, strokeColor, strokeWidth, fill
annotations: [{
  content: 'Multi\nLine',
  style: { fontSize: 11, color: '#000', bold: true }
}]

📄 アノテーションスタイルのプロパティを確認してください： references/labels-and-annotations.md

---

❌ DiagramComponent に updateNode() が存在しない

誤り：

// ❌ updateNode() does not exist in EJ2 Diagram API
this.diagram.updateNode('nodeId', { style: { fill: '#ff0000' } });

正しい例：

// ✅ getObject() → mutate property → dataBind()
const node = this.diagram.getObject('nodeId') as NodeModel;
if (node) {
  node.style!.fill = '#ff0000';
  this.diagram.dataBind(); // ← always required after mutation
}

📄 実行時 API を確認してください：references/nodes.md

❌ データバインディングの設定

間違い：

// ❌ WRONG - Missing proper data source setup
nodes = this.employeeData; // Direct array assignment

正しい例：

// ✅ CORRECT - Use dataSourceSettings with proper mapping
dataSourceSettings: {
  id: 'EmployeeID',
  parentId: 'ReportingManagerID',
  dataSource: this.employeeData
}

// Then configure setNodeTemplate for rendering:
setNodeTemplate(obj: NodeModel): void {
  // obj contains the data row
  obj.width = 100;
  obj.height = 60;
  obj.annotations = [{
    content: obj.data.EmployeeName
  }];
}

リファレンス： references/data-binding.md

❌ スタンドアロンコンポーネントの設定

間違い：

// ❌ WRONG - Using traditional decorator without standalone
@Component({
  selector: 'app-diagram',
  templateUrl: './component.html',
  imports: [DiagramModule]
  // Missing: standalone: true
})

正しい例：

// ✅ CORRECT - Mark as standalone component
@Component({
  selector: 'app-diagram',
  templateUrl: './component.html',
  standalone: true,     // ← Add this
  imports: [CommonModule, DiagramModule], 
})

リファレンス： references/getting-started.md

⚠️ パフォーマンスのヒント

• 仮想化： ノードが1000個以上ある図では、references/diagram-settings.mdで仮想化を有効にしてください
• レイアウトのパフォーマンス： 複雑な階層構造では、位置を事前に計算してください
• コネクタの更新： コネクタを作り直す代わりに、connectorChangesを使用してください
• 大規模な図のエクスポート： 50MBを超えるPDFには、段階的な方法を使用してください

---

次のステップ

• 図の種類（フローチャート、BPMN、UML、組織図など）を選択してください
• 上記の関連するリファレンスファイルをお読みください
• APIの詳細については、Syncfusion Diagram Docsをご確認ください
• サンプルリポジトリの例をご覧ください