syncfusion-react-diagram

Syncfusion React Diagram

Syncfusion React Diagram コンポーネントを使用すると、フローチャート、組織図、BPMN プロセスフロー、UML 図、マインドマップ、ネットワーク図など、豊富でインタラクティブな図を作成できます。SVG で描画され、ノード、コネクタ、ポート、注釈、レイアウト、データバインディングによる幅広いカスタマイズに対応しています。

目次

• このスキルを使用する場面
• コンポーネントの概要
• ドキュメントとナビゲーションガイド
  • はじめに
  • ノード
  • コネクタ
  • ラベルと注釈
  • ポート
  • 図形とスタイル
  • BPMN 図
  • UML 図
  • ER 図
  • レイアウト
  • スイムレーン
  • グループとコンテナー
  • シンボルパレット
  • データバインディング
  • 操作とツール
  • シリアル化とエクスポート
  • 図の設定
• クイックスタートの例
• 一般的なパターン
• モジュールのインジェクションに関するリファレンス
• 主な Props

このスキルを使用する場面

次のようなニーズがある場合に、このスキルを使用してください。

• プロセス、決定木、ワークフローを表すフローチャートを作成する
• 階層データまたはフラットなデータソースから組織図を作成する
• アクティビティ、イベント、ゲートウェイ、フローを含む BPMN 図をモデル化する
• クラス図やシーケンス図などの UML 図を描画する
• データからマインドマップや放射状レイアウトを視覚化する
• ノードと関係コネクタを使ったネットワーク図／エンティティ図を設計する
• レーンとフェーズを含むスイムレーン図を実装する
• シンボルパレットからキャンバスに図形をドラッグ＆ドロップする
• データをバインドして図の構造を自動生成する
• 図の状態を JSON としてシリアル化し、復元する
• 図の内容を画像／SVG としてエクスポートまたは印刷する

重要：API の確認が必要です

API の確認が必要です：コード例を生成する前に、必ずリファレンスファイル（references/*.md）を読んで API のクラス名、プロパティ、シグネチャを確認してください。クラス名を推測したり、類推したりしないでください。

コンポーネントの概要

Diagram コンポーネントは、次の要素を中心に構成されています。

• ノード — キャンバスに配置するグラフィカルな図形（長方形、円、フロー図形、カスタム図形）
• コネクタ — ノードまたは独立した点をつなぐ線／矢印
• 注釈 — ノードまたはコネクタに付加するテキストラベル
• ポート — コネクタを正確に固定するためにノードに設ける名前付き接続点
• レイアウト — 自動配置アルゴリズム（階層、組織図、マインドマップ、放射状、フローチャート）
• シンボルパレット — ドラッグ可能な図形シンボルを並べたサイドバー
• モジュールシステム — バンドルサイズを抑えるための、必要に応じて有効化する機能モジュール（Inject ディレクティブ）

すべての図の要素は SVG で描画されるため、解像度に依存しない鮮明なグラフィックを表示できます。

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

はじめに

📄 参照先： references/getting-started.md

参照するタイミング：

• Diagram コンポーネントを初めてセットアップするとき
• パッケージのインストール、CSS のインポート、テーマの設定を行うとき
• 最小構成の DiagramComponent を作成するとき
• Inject モジュールシステムを理解するとき
• Next.js または Preact と連携するとき

内容：

• npm のインストールと依存関係
• Vite／CRA プロジェクトのセットアップ
• CSS テーマのインポートパス
• nodes と connectors を使った基本的な DiagramComponent
• <Inject services={[...]} /> によるモジュールのインジェクション
• Next.js および Preact の使用上の注意

---

ノード

📄 参照： references/nodes.md

読むタイミング：

• ノードの追加、配置、サイズ変更
• ノードの外観（塗りつぶし、線、影）のカスタマイズ
• ノードの形状（Flow、Basic、Path、Image、HTML）の操作
• ノードイベント（クリック、ドラッグ、サイズ変更）の処理
• 実行時のノードの展開／折りたたみ
• getNodeDefaults によるノードのデフォルトプロパティの設定

対象内容：

• nodes コレクションによるノードの作成
• offsetX／offsetY、width／height による配置
• 実行時のノードの追加／削除（diagram.add、diagram.remove）
• スタイルプロパティ（fill、strokeColor、opacity、gradient）
• 一貫したスタイル設定のための getNodeDefaults パターン
• expandIcon／collapseIcon によるノードの展開／折りたたみ
• ノードのインタラクションイベント

---

コネクタ

📄 参照： references/connectors.md

読むタイミング：

• ノード間または独立した点の間に線／矢印を描画する
• コネクタの種類（Straight、Orthogonal、Bezier）を選択する
• コネクタのセグメントとルーティングを設定する
• デコレーター（矢印）の形状をカスタマイズする
• ノードを接続するための sourceID／targetID を設定する
• 一貫したスタイル設定のために getConnectorDefaults を設定する

対象内容：

• コネクタの種類：Straight、Orthogonal、Bezier
• 独立したコネクタの sourcePoint／targetPoint
• ノード間接続の sourceID／targetID
• 複数セグメントの設定
• ベジェ曲線の制御点とセグメント編集の向き
• 矢印／デコレーターのカスタマイズ
• コネクタのイベントとインタラクション
• getConnectorDefaults パターン

---

ラベルと注釈

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

読むタイミング：

• ノードやコネクタにテキストラベルを追加する
• 注釈テキスト（フォント、色、太字、配置）をスタイル設定する
• ラベルをドラッグ可能または編集可能にする
• ノード／コネクタを基準にラベルを配置する
• ラベル固有のイベントを処理する

対象内容：

• ノードとコネクタの annotations 配列
• ラベルの content、style、offset、alignment
• ノードラベルとコネクタラベル
• ラベルのインタラクション（ダブルクリックで編集、ドラッグ）
• ラベルの外観（背景、枠線、パディング）
• ラベルイベント

---

ポート

📄 参照： references/ports.md

読むタイミング：

• ノード上に名前付きの接続点を作成する
• コネクタをノードのどこに接続するか制御する
• ポートのスタイルと配置を設定する
• コネクタの接続先を特定のポートに制限する
• ポートのインタラクションイベントを処理する

対象内容：

• ポートの種類とノード上の ports 配列
• ポートの配置（offset、alignment）
• ポートの外観（形状、塗りつぶし、線）
• sourcePortID／targetPortID によるコネクタの特定ポートへの接続
• ポートのインタラクションと表示オプション
• ポートイベント

---

形状とスタイル

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

読むタイミング：

• 適切な形状の種類（Flow、Basic、Path、Image、HTML、Native SVG）を選択する
• 塗りつぶしの色、グラデーション、線のスタイルを適用する
• CSS またはテーマを使ってノードの外観をカスタマイズする
• 形状プロパティの構造を理解する

対象内容：

• shape.type のオプション：Flow、Basic、Path、Image、HTML、Native
• フローチャートの形状の値（Terminator、Process、Decision など）
• 基本形状の値（Rectangle、Ellipse、Diamond など）
• スタイルプロパティ：fill、strokeColor、strokeWidth、strokeDashArray、opacity
• 線形および放射状グラデーション
• 影の効果
• CSS クラスベースのスタイル設定

---

BPMN 図

📄 参照: references/bpmn-diagrams.md

参照する場面:

• BPMN 表記法を使用してビジネスプロセスフローをモデル化する
• BPMN 固有の図形（アクティビティ、イベント、ゲートウェイ）を使用する
• シーケンスフロー、メッセージフロー、関連を描画する
• データオブジェクト、データソース、テキスト注釈、グループを追加する

内容:

• BpmnDiagrams モジュールのインジェクション
• BPMN 図形タイプ：shape.type = 'Bpmn'
• アクティビティ：タスクの種類、サブプロセス、展開されたサブプロセス
• イベント：開始イベント、終了イベント、中間イベントとそのトリガー
• ゲートウェイ：排他、並列、包含、複合
• フロー：シーケンス、メッセージ、関連
• データオブジェクトとデータソース
• BPMN グループとテキスト注釈

---

UML 図

📄 参照: references/uml-diagrams.md

参照する場面:

• 属性とメソッドを含む UML クラス図を作成する
• 関係（関連、汎化、依存）をモデル化する
• ライフラインとメッセージを含む UML シーケンス図を作成する
• 分類子（クラス、インターフェイス、列挙型、コラボレーション）を扱う

内容:

• UML クラス図の図形（shape.type = 'UmlClassifier'）
• 分類子の種類：クラス、インターフェイス、列挙型、コラボレーション
• 属性、操作、メンバーの構文
• UML 関係コネクタの種類
• UML シーケンス図（shape.type = 'UmlActivity'）
• ライフライン、メッセージ、フラグメント

---

ER 図

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

参照する場面:

• データベース構造を可視化する ER 図を作成する
• データベーステーブルとフィールドを表す ER エンティティノードを作成する
• フィールドのプロパティ（主キー、外部キー、データ型、制約）を定義する
• 実行時にエンティティフィールドを追加または削除する
• ER 関係コネクタと多重度を使用してエンティティを接続する
• ER エンティティのヘッダー、フィールド行、交互の行の色をスタイル設定する
• イベントを通じてエンティティフィールドの変更を追跡する

内容:

• ErDiagrams モジュールのインジェクション（Diagram.Inject(ErDiagrams)）
• ER エンティティノード：ErShapeModel を含む shape.type = 'Er'
• ヘッダーの設定：annotation、height、style
• フィールドの設定：id、name、dataType、isPrimaryKey、isForeignKey、constraints
• 実行時メソッド addErField／removeErField
• fieldDefaults：alternateRowColors、height
• フィールドレベルおよびノードレベルのスタイルの上書き
• フィールドの変更を追跡する erEntityChanged イベント
• ErConnectorShapeModel を使用した ER 関係コネクタ
• Crow's Foot 多重度：One、Many、ZeroOrOne、OneOrMany、ZeroOrMany、OneAndOnlyOne

---

レイアウト

📄 参照: references/layouts.md

参照する場面:

• ノードをツリー、階層、または放射状のパターンに自動配置する
• 親子データを基に組織図を作成する
• データソースからマインドマップを作成する
• 意思決定やプロセスの図形を使ったフローチャートのレイアウトを設定する
• レイアウトの間隔、向き、配置をカスタマイズする

内容:

• HierarchicalTree — 上から下／左から右のツリーレイアウト
• OrganizationalChart — getNodeDefaults／getConnectorDefaults を使用する標準的な組織図
• MindMap — 分岐型のマインドマップレイアウト
• RadialTree — 円形の放射状レイアウト
• Flowchart レイアウト（フローを自動配置）
• 複数の親を持つ階層向けの ComplexHierarchicalTree
• layout プロパティ：type、orientation、margin、horizontalSpacing、verticalSpacing
• LayoutAnimation モジュール
• レイアウトイベント

スイムレーン

📄 参照先: references/swimlanes.md

参照するタイミング:

• 複数レーンのプロセス図を作成するとき
• タイムラインや段階を表すフェーズを追加するとき
• スイムレーンのヘッダーと向きを設定するとき
• レーン内に子ノードを配置するとき
• シンボルパレットのスイムレーン図形を使用するとき

内容:

• スイムレーン shape.type = 'SwimLane'
• レーンとフェーズの設定
• ヘッダーのテキスト、サイズ、向き
• レーン内の子ノード
• スイムレーンのパレット連携
• スイムレーンの操作（レーンの追加／削除）

---

グループとコンテナー

📄 参照先: references/groups-and-containers.md

参照するタイミング:

• 複数のノードをまとめて移動／選択できるようにするとき
• 実行時にグループへ子ノードを追加／削除するとき
• 子ノードを視覚的に囲むコンテナノードを使用するとき
• パディングや子ノードに合わせる動作を設定するとき

内容:

• グループノード shape.type = 'Group' と children 配列
• ダイアグラムのメソッドによるノードのグループ化／グループ解除
• 実行時の子ノードの追加
• コンテナノードの設定
• コンテナーのパディングと自動サイズ調整の動作

---

シンボルパレット

📄 参照先: references/symbol-palette.md

参照するタイミング:

• ダイアグラムアプリにドラッグ＆ドロップ可能な図形サイドバーを追加するとき
• カスタムシンボルセット（パレット）を定義するとき
• パレットのアイコンサイズ、検索動作、アコーディオンをカスタマイズするとき
• symbolDragEnter／symbolDrop イベントを処理するとき

内容:

• DiagramComponent と並べた SymbolPaletteComponent のセットアップ
• シンボル配列を使った palettes の定義
• 表示をカスタマイズする getSymbolInfo
• パレットのアコーディオン：グループの展開／折りたたみ
• 検索機能
• シンボルのプレビューサイズ設定
• パレットイベント

---

データバインディング

📄 参照先: references/data-binding.md

参照するタイミング:

• JSON またはリモートデータからダイアグラムを自動生成するとき
• 階層構造のために id フィールドと parentId フィールドをマッピングするとき
• リモートデータやフィルター済みデータに DataManager を使用するとき
• データプロパティに応じてノードの外観をカスタマイズするとき（setNodeTemplate）
• PostgreSQL または外部データソースに接続するとき

内容:

• dataSourceSettings プロパティ
• id フィールドと parentId フィールドのマッピング
• ローカル配列またはリモート URL を使った DataManager
• データに基づくスタイル設定のための getNodeDefaults と setNodeTemplate
• PostgreSQL データソースの連携
• フラットな JSON データからの組織図の描画

---

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

📄 参照先: references/interaction-and-tools.md

参照するタイミング:

• ノードやコネクターの操作（ドラッグ、サイズ変更、選択）を有効／無効にするとき
• ダイアグラムのツールモード（ポインター、描画、パン）を切り替えるとき
• ダイアグラムの制約を設定するとき
• カスタムキーボードコマンドやツールバーのアクションを追加するとき
• 元に戻す／やり直しを実装するとき
• コンテキストメニューやユーザーハンドルを設定するとき

内容:

• DiagramConstraints、NodeConstraints、ConnectorConstraints
• tool プロパティ：DiagramTools.Default、ZoomPan、DrawOnce
• 選択、ドラッグ、サイズ変更、回転の操作
• キーボードショートカット用の commands
• 元に戻す／やり直し（UndoRedo モジュール）
• コンテキストメニュー（DiagramContextMenu モジュール）
• ノードにカスタムアクションボタンを追加するためのユーザーハンドル
• Snapping モジュールとスナップ設定

---

シリアル化とエクスポート

📄 参照先: references/serialization-and-export.md

参照するタイミング:

• ダイアグラムの状態を JSON として保存／復元するとき
• ダイアグラムを PNG、JPEG、SVG としてエクスポートするとき
• ダイアグラムの内容を印刷するとき
• Visio（.vsdx）ファイルをインポートするとき
• EJ1 のダイアグラム形式から移行するとき

内容:

• diagram.saveDiagram() と diagram.loadDiagram(json)
• PrintAndExport モジュールの注入
• エクスポート設定：形式、範囲、余白、背景
• 印刷ダイアログとオプション
• Visio ファイルのインポート（visio.md）
• EJ1 のシリアル化との互換性（Ej1Serialization モジュール）

---

ダイアグラムの設定

📄 参照： references/diagram-settings.md

参照するタイミング：

• ダイアグラムのレイヤー（表示、ロック、順序）を管理する場合
• 大規模なダイアグラムのパフォーマンス向上のために仮想化を有効にする場合
• グリッド線、スナップ、ルーラーを設定する場合
• ページサイズ、向き、余白を設定する場合
• スクロールの動作と制限を設定する場合
• ダイアグラム要素にツールチップを追加する場合
• ミニマップでのナビゲーションに Overview コンポーネントを使用する場合
• ローカライズまたは RTL 対応を有効にする場合
• アクセシビリティ機能を理解する場合

対象項目：

• レイヤー：追加、ロック、表示設定、アクティブレイヤー
• 大規模なダイアグラム向けの Virtualization モジュール
• グリッド線：ドット、線、スナップ設定
• ルーラーの設定
• scrollSettings：scrollLimit、minZoom、maxZoom
• pageSettings：サイズ、向き、背景、multiplePage
• ノードとコネクタのツールチップ
• OverviewComponent のミニマップ設定
• ローカライズと RTL
• ARIA とキーボードアクセシビリティ

---

クイックスタートの例

最小構成のフローチャート

import { DiagramComponent, NodeModel, ConnectorModel, Inject, UndoRedo } from '@syncfusion/ej2-react-diagrams';

const nodes: NodeModel[] = [
  { id: 'start', offsetX: 300, offsetY: 80, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }] },
  { id: 'process', offsetX: 300, offsetY: 180, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process' }] },
  { id: 'end', offsetX: 300, offsetY: 290, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }] },
];
const connectors: ConnectorModel[] = [
  { id: 'c1', sourceID: 'start', targetID: 'process' },
  { id: 'c2', sourceID: 'process', targetID: 'end' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      nodes={nodes} connectors={connectors}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[UndoRedo]} />
    </DiagramComponent>
  );
}

CSS のインポート：@import '@syncfusion/ej2-react-diagrams/styles/material.css'; および ej2-base、ej2-popups、ej2-splitbuttons、ej2-navigations のピア CSS。

---

よくあるパターン

パターン 1：データソースから組織図を作成する

import { DiagramComponent, HierarchicalTree, DataBinding, Inject } from '@syncfusion/ej2-react-diagrams';
import { DataManager } from '@syncfusion/ej2-data';

const data = [
  { Name: 'CEO' },
  { Name: 'CTO', ReportingPerson: 'CEO' },
  { Name: 'Dev Lead', ReportingPerson: 'CTO' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      dataSourceSettings={{ id: 'Name', parentId: 'ReportingPerson', dataManager: new DataManager(data) }}
      layout={{ type: 'OrganizationalChart' }}
      getNodeDefaults={(node) => { node.width = 120; node.height = 40; return node; }}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
}

パターン 2：ダイアグラムの状態を保存して読み込む

diagramInstance.saveDiagram() を使用して JSON 文字列にシリアライズし、diagramInstance.loadDiagram(json) を使用して復元します。履歴のサポートには UndoRedo をインジェクトします。完全な例については、references/serialization-and-export.md を参照してください。

パターン 3：シンボルパレットを使ったダイアグラム

SymbolPaletteComponent を DiagramComponent と並べてレンダリングします。図形の配列を使ってパレットを定義し、symbolHeight／symbolWidth を設定すると、ユーザーは図形をキャンバスにドラッグできます。完全な例については、references/symbol-palette.md を参照してください。

---

モジュールのインジェクションに関するリファレンス

ダイアグラムで使用するモジュールのみをインジェクトします：<Inject services={[HierarchicalTree, DataBinding, UndoRedo]} />

モジュール	用途
HierarchicalTree	ツリーおよび組織図のレイアウト
MindMap	マインドマップのレイアウト
RadialTree	放射状／円形のレイアウト
ComplexHierarchicalTree	複数の親を持つ階層構造
DataBinding	データソースとの連携
UndoRedo	元に戻す／やり直しの履歴
Snapping	グリッドへのスナップ
PrintAndExport	エクスポートと印刷
BpmnDiagrams	BPMN 図形
ErDiagrams	ER 図形とリレーションシップ
LayoutAnimation	アニメーション付きレイアウト
DiagramContextMenu	右クリックのコンテキストメニュー
ConnectorBridging	重なり合うコネクタのブリッジ
ConnectorEditing	コネクタのセグメントを編集
Ej1Serialization	EJ1 ダイアグラムの JSON を読み込む

---

主な Props

Prop	型	説明
nodes	NodeModel[]	ノード定義の配列
connectors	ConnectorModel[]	コネクタ定義の配列
layout	LayoutModel	自動レイアウトの設定
dataSourceSettings	DataSourceModel	自動生成ダイアグラムのデータソース
getNodeDefaults	(node) => NodeModel	すべてのノードのデフォルトプロパティ
getConnectorDefaults	(obj) => ConnectorModel	すべてのコネクタのデフォルトプロパティ
setNodeTemplate	(node) => DiagramElement	ノードのカスタムテンプレートのレンダリング
tool	DiagramTools	アクティブな操作ツールのモード
snapSettings	SnapSettingsModel	グリッドとスナップの設定
scrollSettings	ScrollSettingsModel	スクロール制限とズーム範囲
pageSettings	PageSettingsModel	ページサイズ、向き、背景
constraints	DiagramConstraints	ダイアグラムレベルの操作の有効化／無効化
width	string	ダイアグラムキャンバスの幅（例：'100%'）
height	string	ダイアグラムキャンバスの高さ（例：'600px'）

関連コンポーネント

• チャート - データ駆動型のチャートとグラフ
• カンバン - カンバンボードの可視化
• データグリッド - 表形式のデータ表示