syncfusion-javascript-diagram

⚠️ 厳格な使用ルール — すべてのコード生成で必須

これらのルールは譲れない条件であり、すべてのコード生成リクエストで従う必要があります。

ルール A — 提供されたリファレンスファイルのみを使用する

1. すべてのリクエストで、必ず references/getting-started.md を読みます
2. 追加のリファレンスファイルは、ユーザーのクエリに合致する場合にのみ読みます（以下のナビゲーションガイドを参照）
3. 外部知識は使用できません：
   • ❌ インターネット上のドキュメントを使用しないでください
   • ❌ Syncfusion API に関する学習データ上の推測を使用しないでください
   • ❌ 古い EJ1 API や非推奨の構文を参照しないでください
   • ✅ リファレンスファイルで機能を確認できない場合は、ルール B を適用してください

ルール B — 推測や推論をしない

機能、プロパティ、API、動作がリファレンスファイルに明示的に記載されていない場合：

次のことをしてはいけません：

• クラスのプロパティ、サブクラス、コンストラクターのオーバーロードを作り出す
• JavaScript／TypeScript のコールバックシグネチャーやメソッド名を推測する
• ドキュメントに記載されているもの以外のモジュール注入が存在すると仮定する
• 他の Syncfusion コンポーネントの情報を一般化する
• 非推奨またはドキュメントに記載されていない図形タイプを使用する

代わりに、次のように応答してください：

⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.
Skipping this feature to avoid generating incorrect code.

ルール C — 必須のモジュール注入を適用する

以下の機能のコードを生成する前に、必ず対応する注入を含めてください：

機能	必須の注入
エンティティ関係図	Diagram.Inject(ErDiagrams)
BPMN 図	Diagram.Inject(BpmnDiagrams)
エクスポート／印刷	Diagram.Inject(PrintAndExport)
マインドマップレイアウト	Diagram.Inject(MindMap)
複雑な階層レイアウト	Diagram.Inject(ComplexHierarchicalTree)
階層型または組織型レイアウト	Diagram.Inject(HierarchicalTree)
UML シーケンス図	追加の注入は不要です
元に戻す／やり直し	Diagram.Inject(UndoRedo)
線の分散	Diagram.Inject(LineDistribution)
線のルーティング	Diagram.Inject(LineRouting)
Mermaid 構文	Diagram.Inject(FlowchartLayout, DataBinding) または Diagram.Inject(MindMap, DataBinding)

リファレンスファイルで確認できない限り、他の注入が存在すると仮定しないでください。

---

Diagram コンポーネントの概要

Diagram コントロールは、TypeScript／JavaScript アプリケーションでインタラクティブかつ編集可能な図を作成するための、豊富な機能を備えたコンポーネントです。

基本要素

要素	目的	一般的なプロパティ
ノード	エンティティを表すグラフィカルな図形	id、offsetX、offsetY、width、height、shape、style
コネクタ	ノードをつなぐ線／矢印	id、sourceID、targetID、type、style、targetDecorator
ラベル	ノード／コネクタ上のテキスト注釈	content、font、alignment、offset

主な機能

✅ 自動レイアウト（フローチャート、階層型、組織型）
✅ データバインディング（JSON、親子関係）
✅ インタラクティブツール（描画、選択、パン、ズーム、ドラッグ＆ドロップ）
✅ スタイル設定（CSS のカスタマイズ、テーマ、条件付きスタイル）
✅ シリアル化（JSON として保存／読み込み）
✅ エクスポート（PNG、JPG、SVG、PDF）
✅ ユーザー操作（イベント、制約、元に戻す／やり直し）

---

ナビゲーションガイド

必ず最初に references/getting-started.md を読み、その後、リクエストに関連するファイルのみを読んでください。

参照ファイル	クエリに含まれる内容
📄 getting-started.md	すべてのリクエスト — パッケージのインストール、インポート、最初の図、初期化
📄 nodes-and-shapes.md	ノードの作成／スタイル設定、図形、配置、BPMN／UML 図形、注釈
📄 connectors-and-connections.md	線（Straight／Orthogonal／Bezier）、矢印、ルーティング、sourceID／targetID、セグメント
📄 labels-and-annotations.md	テキストラベル、フォント、配置、ノード／コネクタのハイパーリンク
📄 ports.md	接続ポイント、ポートの配置、ポートの制約
📄 shapes-and-styles.md	Flow／Basic／Path／Image／HTML／Native 図形、塗りつぶし、ストローク、グラデーション、不透明度
📄 data-binding-and-loading.md	DataSourceSettings、JSON の読み込み、親子マッピング、動的更新
📄 layout-and-automation.md	階層型、組織図、マインドマップ、放射状、対称レイアウト、方向
📄 bpmn-diagrams.md	BPMN モジュールの注入、イベント、ゲートウェイ、アクティビティ、データオブジェクト、注釈
📄 uml-diagrams.md	UML クラス図、UML シーケンス図、分類子、関係、参加者、メッセージ、フラグメント
📄 entity-relationship-diagrams.md	ER エンティティ、エンティティフィールド、データ型、主キー／外部キー、関係、Crow's Foot 多重度、ERD のスタイル設定
📄 swimlanes.md	スイムレーンの構造、レーン、フェーズ、ヘッダー設定、操作
📄 groups-and-containers.md	ノードのグループ化、Canvas／Stack／Grid コンテナー、ネスト、境界
📄 symbol-palette.md	SymbolPaletteComponent、ドラッグ＆ドロップ、カテゴリ、カスタムシンボル、検索
📄 interaction-and-tools.md	描画ツール、選択、制約、パン／ズーム、イベント、元に戻す／やり直し
📄 styling-and-appearance.md	CSS テーマ設定、色、フォント、アクセシビリティ、レスポンシブデザイン
📄 serialization-and-export.md	図を JSON として保存／読み込み、デフォルト値の適用を防止、未保存の変更を検出、画像／PDF／Visio へのエクスポート、Mermaid 構文、アップローダーのサポート
📄 diagram-settings.md	レイヤー、仮想化、グリッド、ルーラー、スクロール、ページ設定、ツールチップ、ローカライズ
📄 advanced-features.md	元に戻す／やり直し、カスタムコマンド、ツールバー、パフォーマンスの最適化

---

クイックスタート

1. パッケージをインストールする

npm install @syncfusion/ej2-diagrams

2. 必要なモジュールをインポートする

import { Diagram, NodeModel, ConnectorModel } from '@syncfusion/ej2-diagrams';

3. ノードとコネクタを使って図を作成する

// Define nodes
let nodes: NodeModel[] = [
  {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    style: { fill: '#6BA5D7' },
    annotations: [{ content: 'Start' }]
  },
  {
    id: 'node2',
    offsetX: 400,
    offsetY: 250,
    width: 100,
    height: 100,
    style: { fill: '#FFD700' },
    annotations: [{ content: 'Process' }]
  }
];

// Define connector between nodes
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2',
    style: { strokeColor: '#6BA5D7' },
    targetDecorator: { shape: 'Arrow' }
  }
];

// Create diagram
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '500px',
  nodes: nodes,
  connectors: connectors
});

diagram.appendTo('#diagram-container');

HTML：

<div id="diagram-container"></div>

---

よくあるパターン

フローチャートのパターン

判断ポイントを含むシンプルなフローチャートを作成します。

• プロセスには四角形を使用します
• 判断にはひし形を使用します
• 矢印で接続します
• Flowchart の自動レイアウトを適用します

組織図のパターン

階層構造を作成します。

• 親子関係を使ってデータバインディングを行います
• HierarchicalTree レイアウトを適用します
• 名前／写真を含む従業員ノードを定義します
• コネクタで報告関係を示します

ネットワーク図のパターン

システムアーキテクチャ図を作成します。

• 定義済みの図形（サーバー、データベース、クライアント）を使用します
• データフローを示すラベル付きの線で接続します
• グリッドベースの配置で整理します
• 見やすさを高めるため、アイコンとスタイルを追加します

インタラクティブな図表パターン

ユーザーが編集できる図表を作成するには：

• 描画ツールを有効にします
• ノードやコネクタの作成と削除を可能にします
• 操作用のコンテキストメニューを追加します
• シリアライズによる保存と読み込みを実装します
• ユーザーイベント（選択、ドラッグ、サイズ変更）を処理します

---

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

✅ TypeScript／JavaScriptであらゆる種類の図表を作成する
✅ フローチャート、プロセスフロー、階層図を作成する
✅ BPMNやUMLの図表を実装する
✅ ノード／コネクタの形状、スタイル、注釈を設定する
✅ 自動レイアウトを設定する
✅ ドラッグ＆ドロップ用のシンボルパレットを追加する
✅ APIやJSONから図表データをバインドする
✅ 図表をエクスポートまたは印刷する
✅ 描画ツール、元に戻す／やり直し、レイヤーを有効にする

使用しないでください： シンプルな静的チャートやグラフ（Chartコンポーネントを使用）、データテーブル（Gridコンポーネントを使用）

---

主なTypeScriptインターフェイス

インターフェイス	目的	主なプロパティ
NodeModel	ノードの設定	id、offsetX、offsetY、width、height、shape、style、annotations
ConnectorModel	コネクタの設定	id、sourceID、targetID、type、style、targetDecorator
ShapeModel	形状の定義	type（Basic／BPMN／UML／Flow）、shape名
AnnotationModel	ノード／コネクタ上のラベル	content、font、alignment、offset
PortModel	接続ポイント	id、offset、shape、visibility、constraints

---

一般的な形状の種類

フロー図形

Terminator、Process、Decision、Document、DirectData、MultiDocument、PreDefinedProcess、Delay、Annotation、ManualOperation、ManualInput、Card、Or、SummingJunction、Extract、Merge、Sort、OffPageReference

使用例：

shape: { type: 'Flow', shape: 'Process' }

基本図形

Rectangle、Ellipse、Triangle、Pentagon、Hexagon、Heptagon、Octagon、Star、Cross、Diamond、CylindricalShape、Trapezoid、Parallelogram、Rhombus

使用例：

shape: { type: 'Basic', shape: 'Rectangle' }