syncfusion-aspnetcore-diagram

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

これらのルールは交渉の余地がなく、すべてのコード生成リクエストで従う必要があります。

ルール A — 提供された参照ファイルのみを使用する

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

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

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

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

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

代わりに、次を返してください：

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

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

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

機能	必須の注入
BPMN 図	ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams)
エクスポート／印刷	ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport)
マインドマップレイアウト	ej.diagrams.Diagram.Inject(ej.diagrams.MindMap)
複雑な階層レイアウト	ej.diagrams.Diagram.Inject(ej.diagrams.ComplexHierarchicalTree)

参照ファイルで確認されていない限り、他の注入が存在すると仮定しないでください。

---

ナビゲーションガイド

この表を使用して、読み込む参照ファイルを特定してください（ルール A）。
必ず最初に references/getting-started.md を読み、その後、リクエストに関連するファイルのみを読んでください。

参照ファイル	クエリに以下が含まれる場合に読み込む
📄 getting-started.md	すべてのリクエスト — NuGet のセットアップ、タグヘルパーの登録、CDN、最初の図
📄 nodes.md	ノードの作成／スタイル設定、offsetX/Y、width/height、グラデーション、シャドウ、展開／折りたたみ、getNodeDefaults
📄 connectors.md	線（Straight／Orthogonal／Bezier）、矢印、ルーティング、sourceID／targetID、セグメント、getConnectorDefaults
📄 labels-and-annotations.md	テキストラベル、フォント、配置、ハイパーリンク
📄 ports.md	接続ポイント、ポートの配置、制約
📄 shapes-and-styles.md	フロー／基本／パス／画像／HTML／ネイティブシェイプ、塗りつぶし、ストローク、グラデーション、不透明度
📄 bpmn-diagrams.md	BPMN イベント、ゲートウェイ、アクティビティ、データオブジェクト
📄 uml-diagrams.md	UML クラス図／シーケンス図／アクティビティ図、分類子、関係
📄 layouts.md	階層、組織図、マインドマップ、放射状、対称レイアウト、getLayoutInfo
📄 swimlanes.md	スイムレーンの構造、レーン、フェーズ、パレットとの統合
📄 groups-and-containers.md	ノードのグループ化、Canvas／Stack コンテナー
📄 symbol-palette.md	ejs-symbolpalette、パレット、ドラッグ＆ドロップ、ツールチップ
📄 data-binding.md	DataManager、dataSourceSettings、id／parentId のマッピング、setNodeTemplate、CRUD
📄 interaction-and-tools.md	選択、ドラッグ／サイズ変更／回転、描画ツール、制約、元に戻す／やり直す
📄 serialization-and-export.md	saveDiagram／loadDiagram、エクスポート、印刷
📄 diagram-settings.md	レイヤー、仮想化、グリッド、ルーラー、スクロール、ページ設定、ツールチップ

---

クイックスタート

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

Install-Package Syncfusion.EJ2.AspNet.Core

2. Tag Helper を登録する（~/Pages/_ViewImports.cshtml）

@addTagHelper *, Syncfusion.EJ2

3. CDN リソースを追加する（~/Pages/Shared/_Layout.cshtml）

<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
</head>
<body>
    ...
    <ejs-scripts></ejs-scripts>
</body>

4. Razor ページに図を追加する（~/Pages/Index.cshtml）

<ejs-diagram id="diagram" width="100%" height="550px"
    nodes="@ViewBag.nodes"
    connectors="@ViewBag.connectors"
    getNodeDefaults="@ViewBag.getNodeDefaults"
    getConnectorDefaults="@ViewBag.getConnectorDefaults">
</ejs-diagram>

5. PageModel / Controller

public IActionResult OnGet()
{
    List<DiagramNode> nodes = new List<DiagramNode>
    {
        new DiagramNode { Id = "node1", OffsetX = 100, OffsetY = 100, Width = 100, Height = 60,
            Annotations = new List<DiagramNodeAnnotation> {
                new DiagramNodeAnnotation { Content = "Start" }
            },
            Shape = new { type = "Flow", shape = "Terminator" }
        },
        new DiagramNode { Id = "node2", OffsetX = 300, OffsetY = 100, Width = 100, Height = 60,
            Annotations = new List<DiagramNodeAnnotation> {
                new DiagramNodeAnnotation { Content = "Process" }
            },
            Shape = new { type = "Flow", shape = "Process" }
        }
    };
    
    List<DiagramConnector> connectors = new List<DiagramConnector>
    {
        new DiagramConnector { Id = "conn1", SourceID = "node1", TargetID = "node2" }
    };
    
    ViewBag.nodes = nodes;
    ViewBag.connectors = connectors;
    ViewBag.getNodeDefaults = "getNodeDefaults";
    ViewBag.getConnectorDefaults = "getConnectorDefaults";
    return Page();
}

function getNodeDefaults(node) {
    node.height = 60;
    node.width = 120;
    return node;
}

function getConnectorDefaults(connector) {
    connector.type = 'Orthogonal';
    return connector;
}

---

主要な C# クラス

クラス	用途
DiagramNode	ノード／図形要素
DiagramConnector	ノード間の接続線
DiagramNodeAnnotation	ノード上のテキストラベル
DiagramConnectorAnnotation	コネクタ上のテキストラベル
DiagramPort	ノード上の接続点
DiagramLayer	要素を整理するためのレイヤー
DiagramPageSettings	ページサイズ、向き、背景
BpmnShapes	BPMN 図形の設定
UmlClassifierShapeModel	UML クラス図の図形

---

よく使われる図形の種類

フロー図形

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

使用例：

Shape = new { type = "Flow", shape = "Process" }

基本図形

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

使用例：

Shape = new { type = "Basic", shape = "Rectangle" }

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

✅ ASP.NET Core（Razor Pages / MVC）であらゆる図を作成する
✅ フローチャート、組織図、ネットワーク図を作成する
✅ BPMN または UML 図を実装する
✅ ノード／コネクタの図形、スタイル、注釈を設定する
✅ 自動レイアウトを設定する
✅ ドラッグ＆ドロップ用のシンボルパレットを追加する
✅ データベースの図データをバインドする
✅ 図をエクスポートまたは印刷する
✅ 描画ツール、元に戻す／やり直し、レイヤーを有効にする