syncfusion-blazor-diagram

Syncfusion Blazor Diagram の実装

Syncfusion Blazor Diagram コンポーネントを使用して、フローチャート、組織図、マインドマップ、BPMN プロセス図、UML シーケンス図、ネットワーク図などのインタラクティブな図を作成するための包括的なスキルです。

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

次のような場合に、このスキルを使用してください。

• Blazor でフローチャート、組織図、マインドマップ、ネットワーク図を作成する
• SfDiagramComponent、ノード、コネクタ、図形を扱う
• 自動レイアウト（階層型、放射状、マインドマップ、組織図、フローチャート）を設定する
• BPMN 図形を使用して BPMN プロセス図を実装する
• プロセスモデリング用のスイムレーン図を作成する
• ドラッグ＆ドロップで図を作成するためのシンボルパレットを追加する
• コレクションまたはリモートソースから図のデータをバインドする
• 図の操作（選択、ドラッグ、サイズ変更、ズーム、パン）を実装する
• 図を PNG/JPEG/SVG にエクスポート、または印刷する
• 図の状態をシリアル化して復元する（保存／読み込み）
• リアルタイムの共同編集を有効にする
• UML シーケンス図を追加する
• 図のイベント、注釈、ポートを処理する

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

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

クイックスタート

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" />

@code {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>
    {
        new Node
        {
            ID = "node1", OffsetX = 150, OffsetY = 150,
            Width = 100, Height = 50,
            Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "white" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>
            {
                new ShapeAnnotation { Content = "Start" }
            }
        }
    };
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>
    {
        new Connector { ID = "conn1", SourceID = "node1", TargetID = "node2" }
    };
}

よくあるパターン

目的	リファレンス
最初の図のセットアップ	references/getting-started.md
ノードの追加／設定	references/nodes.md
コネクタの追加／設定	references/connectors.md
組み込み図形の使用	references/shapes.md
テキストラベルの追加	references/annotations.md
接続ポイントの定義	references/ports.md
組織図／自動レイアウト	references/layout.md
スイムレーン図	references/swimlane.md
BPMN プロセス図	references/bpmn.md
ドラッグ＆ドロップパレット	references/symbol-palette.md
図へのデータのバインド	references/data-binding.md
選択、ドラッグ、ズーム	references/interaction.md
図のイベント処理	references/events.md
図の保存と読み込み	references/serialization.md
エクスポート／印刷	references/export-print.md
CSS／テーマのスタイル設定	references/styling.md
UML シーケンス図	references/uml-sequence.md
リアルタイム共同編集	references/collaborative-editing.md
コンテキストメニュー、ツールチップ、ルーラー、ローカライズ	references/advanced-features.md
ミニチュア概要／俯瞰ナビゲーション	references/overview-component.md

---

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

はじめに

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

• NuGet パッケージのインストール（Syncfusion.Blazor.Diagram）
• サービスの登録と名前空間のインポート
• Blazor Server、WebAssembly、MAUI のセットアップ
• CSS／テーマの設定
• 最小構成で動作する図の例

ノード

📄 参照先： references/nodes.md

• ノードの作成と設定
• ノードの種類：基本、フロー図形、パス、画像、HTML、ネイティブ
• ノードの配置、サイズ、重なり順
• ノードのスタイル（塗りつぶし、線、透明度）
• 子ノードの展開／折りたたみ
• ノードのイベントと操作

コネクタ

📄 参照： references/connectors.md

• ノード間または独立したコネクタの作成
• セグメントの種類：直線、直交、ベジェ
• 1つのコネクタに複数のセグメントを設定
• 矢印、線のスタイル、装飾
• コネクタの操作（曲げる、端点をドラッグする）
• コネクタのイベント

図形

📄 参照： references/shapes.md

• 組み込みの基本図形（長方形、楕円、三角形など）
• フロー図形（処理、判断、端子など）
• パス図形（カスタム SVG パス）
• 画像および HTML コンテンツの図形
• ネイティブ SVG 図形
• 適切な図形タイプの選択

注釈

📄 参照： references/annotations.md

• ノードやコネクタへのテキストラベルの追加
• 注釈の位置と配置
• フォント、色、スタイルのカスタマイズ
• 注釈のインライン編集
• 1つの要素への複数の注釈
• 注釈の操作イベント
• 操作の制約：AnnotationConstraints フラグ、DragLimit（PathAnnotation）
• Hyperlink（Url、Content、OpenMode）を使ったハイパーリンク
• イベント：SelectionChanging/Changed、PositionChanging/Changed、SizeChanging/Changed、RotationChanging/Changed、TextChanging/Changed

ポート

📄 参照： references/ports.md

• 接続ポート（ノード上の固定接続点）
• 動的ポート（実行時に作成）
• ポートの位置指定（相対および絶対）
• ポートの外観と表示設定
• 特定のポートへの接続の制限

レイアウト

📄 参照： references/layout.md

• 自動レイアウトの概要と各タイプの用途
• 階層ツリーレイアウト（上から下、左から右）
• 組織図レイアウト
• マインドマップレイアウト
• 放射状ツリーレイアウト
• フローチャートレイアウト
• 力指向ツリーレイアウト
• 複雑な階層レイアウト
• レイアウトの間隔、余白、向きの設定
• レイアウトのイベントとコールバック
• await DoLayoutAsync() — ノードの追加または削除後、実行時にレイアウトを更新

スイムレーン

📄 参照： references/swimlane.md

• スイムレーン図の作成
• レーンの追加とプロパティの設定
• フェーズの設定（垂直／水平フェーズ）
• スイムレーンのシンボルパレットとの連携
• スイムレーンの操作

<SfDiagramComponent Height="600px" Swimlanes="@swimlanes" />

@code {
    DiagramObjectCollection<Swimlane> swimlanes = new();

    protected override void OnInitialized()
    {
        swimlanes.Add(new Swimlane
        {
            ID = "swimlane1",
            OffsetX = 400, OffsetY = 300,
            Width = 600, Height = 200,
            Lanes = new DiagramObjectCollection<Lane>()
            {
                new Lane(){
                Height = 100,
                Header = new SwimlaneHeader(){
                    Width = 30,
                    Annotation = new ShapeAnnotation(){ Content = "Consumer" }
                },
                Children = new DiagramObjectCollection<Node>()
                {
                    new Node(){Height = 50, Width = 50, LaneOffsetX = 250, LaneOffsetY = 30},
                }
                },
            }
        });
    }
}

BPMN

📄 参照： references/bpmn.md

• BPMN 図形の種類（イベント、アクティビティ、ゲートウェイ、データ）
• BPMN イベントの種類（開始、終了、中間、境界）
• BPMN アクティビティの種類（タスク、サブプロセス、呼び出しアクティビティ）
• BPMN ゲートウェイの種類（排他、並列、包含など）
• BPMN コネクタ（シーケンスフロー、メッセージフロー、関連）
• データオブジェクトとデータストア
• 展開されたサブプロセス
• BPMN テキスト注釈

// Exclusive gateway (XOR)
nodes.Add(new Node
{
    ID = "gateway1", OffsetX = 300, OffsetY = 200, Width = 50, Height = 50,
    Shape = new BpmnGateway
    {
        GatewayType = BpmnGatewayType.Exclusive
    }
});

シンボルパレット

📄 参照： references/symbol-palette.md

• SfSymbolPaletteComponent の設定
• パレットグループとシンボルの定義
• カスタムシンボルとステンシル
• パレットから図へのドラッグ＆ドロップ
• パレットの検索とカスタマイズ

データバインディング

📄 参照： references/data-binding.md

• フラットリストまたは IEnumerable からの図のバインド
• 階層データのバインド（親子関係）
• リモートデータソースとの連携
• 実行時の CRUD：await ReadDataAsync(query?)、await InsertDataAsync(data)、await UpdateDataAsync(keyField, data)、await DeleteDataAsync(keyField, value)
• await RefreshDataSourceAsync() — すべてのデータを再読み込みし、レイアウトを再構築
• データフィールドとノード／コネクタのプロパティのマッピング

インタラクションとコマンド

📄 参照： references/interaction.md

• 選択：Select(collection, multipleSelection?)、SelectAll()、UnSelect(obj)、ClearSelection()
• 要素のドラッグ、サイズ変更、回転（ユーザー操作とプログラムによる操作）
• プログラムによる変形：Drag(obj, tx, ty)、Rotate(obj, angle, pivot?)、Scale(obj, sx, sy, pivot)
• ズームとパン：マウスホイール、ツールバー、Zoom(factor, focusPoint)、ResetZoom()、Pan(hOffset, vOffset, focusPoint?)
• BringIntoView(DiagramRect) — ビューポートをスクロールして領域を表示します
• BringIntoCenter(DiagramRect) — ビューポートをスクロールして領域を中央に表示します
• FitToPage(FitOptions?) — コンテンツをビューポートに合わせます（同期；FitMode.Width/Height/Both、DiagramRegion.Content/PageSettings）
• Nudge(Direction, int?) — 選択した要素をピクセル単位で移動します。既定値は1pxです。Direction.Top/Bottom/Left/Right
• Zオーダー：BringToFront()、BringForward()、SendBackward()、SendToBack() — 先に Select() を呼び出す必要があります
• クリップボード：Copy()、Cut()、Paste(collection?)、Delete(collection?)
• グループ化／グループ解除：Group()、Ungroup()、AddChildAsync(group, child)、RemoveChild(group, child)
• テキストのインライン編集：StartTextEdit(obj, annotationId?)
• キーボードショートカット（組み込みテーブル）と CommandManager（子コンポーネントを介したショートカットのカスタマイズ／上書き）
• CommandManager は KeyboardCommand + KeyGesture（DiagramKeys + ModifierKeys）+ CommandKeyArgs を使用します
• グリッドまたはオブジェクトへのスナップ
• 配置、間隔、サイズ設定のコマンド（SetAlign、SetDistribute、SetSameSize — すべて同期）
• ユーザーハンドル（選択時に表示されるカスタムアクションボタン）
• 元に戻す／やり直し：Undo()、Redo()（同期）；まとめて元に戻せる操作を行うには StartGroupAction() / EndGroupAction() を使用します
• 履歴：AddHistoryEntry(entry)、ClearHistory()
• ユーティリティ：GetObject(id)、GetPageBounds(x?, y?)、Clear()（すべての要素を削除）
• 一括更新：BeginUpdate() + await EndUpdateAsync() — 複数の変更を1回のレンダリングにまとめます
• 複数の要素を追加：await AddDiagramElementsAsync(DiagramObjectCollection<NodeBase>)

イベント

📄 参照： references/events.md

• ダイアグラムレベルのイベント（Created、Click、Drop）
• ノードイベント（NodeCreating、PositionChanged、SizeChanged）
• コネクタイベント（ConnectionChanged、SegmentChanged）
• 選択イベント（SelectionChanged）
• 履歴変更イベント（元に戻す／やり直し時のHistoryChanged）
• イベント引数の型と使用パターン

シリアル化

📄 参照： references/serialization.md

• ダイアグラムの状態をJSON文字列として保存
• 保存済みJSONからダイアグラムを読み込み
• カスタムシリアル化プロパティ
• ダイアグラムの一部を保存および復元するパターン

エクスポートと印刷

📄 参照： references/export-print.md

• PNG、JPEG、SVG形式へのエクスポート
• エクスポート領域のオプション（ダイアグラム、ページ、コンテンツ）
• スケールと余白の設定
• 印刷設定
• カスタムページサイズと向き
• 印刷時にダイアグラムを1ページに収める

スタイル設定

📄 参照： references/styling.md

• CSSクラスのカスタマイズ（CssClass プロパティ）
• 組み込みテーマ（Material、Bootstrap、Fluent、Tailwind）
• ノードとコネクタのスタイルプロパティ
• 選択時とホバー時のスタイル
• Theme Studioによるカスタマイズ
• CSS変数の上書き

UMLシーケンス図

📄 参照： references/uml-sequence.md

• UMLシーケンス図のセットアップ
• ライフラインとアクティベーションボックス
• メッセージの種類（同期、非同期、戻り、作成、破棄）
• UMLインタラクションの図形とコネクタ
• await UpdateFromModelAsync() — プログラムによるモデル変更後にダイアグラムを更新します

UML クラス図

📄 参照： references/uml-class-diagram.md

• 属性、メソッド、メンバーを含むクラス、インターフェイス、列挙型ノードの作成
• 可視性スコープ、メソッドのパラメーター、区切り行
• ヘッダー、セクションヘッダー（UmlSectionHeaderSettings）、行レベルのTextStyleのスタイル設定
• 6 種類の関係：関連、集約、コンポジション、継承、依存、実現
• 方向付き／双方向の関連の流れ、多重度ラベル
• 実行時のメンバーの追加と削除（Add、RemoveAt、Remove）
• CollectionChanging／CollectionChangedイベント、インラインテキスト編集（F2、StartTextEdit）
• ドラッグアンドドロップで UML 図形を配置するためのシンボルパレットとの連携

共同編集

📄 参照： references/collaborative-editing.md

• リアルタイムの共同図編集の設定
• SignalR ハブの構成
• Blazor Server および WASM アプリとの連携
• リアルタイム同期と競合解決の処理
• 差分同期：GetDiagramUpdates(HistoryChangedEventArgs) + await SetDiagramUpdatesAsync(updates) — 効率的な変更の反映

概要コンポーネント

📄 参照： references/overview-component.md

• ミニチュアサムネイルパネルとしてSfDiagramOverviewComponentを追加
• SourceID／IDで概要表示をメイン図にリンク
• WidthとHeightでパネルサイズを制御
• ズームとパンの操作（ドラッグ、サイズ変更、クリック、領域の描画）
• DiagramOverviewConstraintsで操作を有効または無効にする
• @using Syncfusion.Blazor.Diagram.Overview名前空間が必要です。

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Overview
@using System.Collections.ObjectModel

<SfDiagramComponent ID="element"
                    Width="100%"
                    Height="500px">
</SfDiagramComponent>


<SfDiagramOverviewComponent Height="150px" SourceID="element" />

高度な機能

📄 参照： references/advanced-features.md

• コンテキストメニュー（組み込み項目とカスタム項目）
• ノード、コネクタ、ポート、ユーザーハンドルのツールチップ
• プログラムによるツールチップ：await ShowTooltipAsync(obj)／await HideTooltipAsync(obj) — OpensOn = "Custom"が必要です
• グリッド線とルーラー
• スクロール設定とページ設定
• コンテナーとグループのノード
• 反転（水平／垂直）
• 制約（要素ごとの動作を制限）
• ローカライズ（静的テキストの翻訳）
• アクセシビリティ（WCAG 2.1、キーボード操作）
• クラシック図からネイティブ図への移行

よくある間違い

注釈の編集

⚠️ AllowEditingは存在しません。ShapeAnnotationにもPathAnnotationにもありません。
インライン編集はデフォルトで有効です。有効にするためのプロパティは不要です。
編集を無効にするには、Constraints = AnnotationConstraints.ReadOnlyを設定します。

// ❌ 誤り — CS0117: AllowEditingは存在しません
new ShapeAnnotation { Content = "Label", AllowEditing = false }

// ✅ 正しい — AnnotationConstraints.ReadOnlyを使用して編集を無効にします
new ShapeAnnotation { Content = "Label", Constraints = AnnotationConstraints.ReadOnly }

EndUpdateAsyncメソッド

⚠️ 常にEndUpdateAsync()（非同期）を使用してください。EndUpdate()（同期、非非同期）は存在せず、コンパイルエラーになります。
複数のプロパティを一度に変更するときは、BeginUpdate()／EndUpdateAsync()を使用します。awaitが必要です。

// ❌ 誤り — EndUpdate()は存在しません
diagram.BeginUpdate();
// ... changes ...
diagram.EndUpdate();

// ✅ 正しい — EndUpdateAsyncは非同期です
diagram.BeginUpdate();
// ... changes ...
await diagram.EndUpdateAsync();

クリックイベント

⚠️ ClickEventArgs の名前が衝突します： ページで @using Syncfusion.Blazor.Navigations（または Buttons）も使用している場合、
ClickEventArgs が曖昧になります。必ず完全修飾してください：

// ✅ Use the fully qualified type in the handler signature
private void OnClick(Syncfusion.Blazor.Diagram.ClickEventArgs args) { }

⚠️ args.Count は int フィールドではありません — int を返すメソッドです。
結果を先に保存せずに、インラインで == と直接比較しないでください：

// ❌ Wrong — CS0019: Operator '==' cannot be applied to operands of type 'method group' and 'int'
if (args.Count == 2)

// ✅ Correct — store result then compare
int clickCount = args.Count;
if (clickCount == 2) { /* double-click */ }

サイズ変更イベント

⚠️ SizeChangedEventArgs.Element の型は Node ではなく、DiagramSelectionSettings です。
args.Element is Node n のパターンマッチングは、常に CS8121 で失敗します。
DiagramSelectionSettings にキャストし、サイズ変更されたノードを取得するには .Nodes[0] を読み取ってください：

// ❌ Wrong — CS8121: DiagramSelectionSettings cannot match Node
if (args.Element is Node n) { }

// ✅ Correct — Element is DiagramSelectionSettings
if (args.Element is DiagramSelectionSettings sel && sel.Nodes.Count > 0)
{
    var node = sel.Nodes[0];
    double w = args.NewValue.Width;
    double h = args.NewValue.Height;
}

⚠️ args.NewValue.Width と args.NewValue.Height は通常の double であり、double? ではありません。
これらに ?? を使用すると CS0019 が発生します。直接代入してください：

// ❌ Wrong — CS0019
double w = args.NewValue.Width ?? 0;

// ✅ Correct
double w = args.NewValue.Width;

選択変更イベント

⚠️ SelectionChangedEventArgs の名前が衝突します： ページで @using Syncfusion.Blazor.Buttons
（または他の Syncfusion パッケージ）も使用している場合、SelectionChangedEventArgs が曖昧になります。必ず完全修飾してください：

// ✅ Fully qualified
private void OnSelectionChanged(Syncfusion.Blazor.Diagram.SelectionChangedEventArgs args) { }

⚠️ args.NewValue は DiagramSelectionSettings オブジェクトです — Node でもコレクションでもありません：

• args.NewValue is Node のパターンマッチングは、常に CS8121 で失敗します
• args.NewValue をコレクションとして反復処理すると失敗します — 単一の設定オブジェクトです
• 唯一の正しい方法は、_diagram.SelectionSettings.Nodes／.Connectors を読み取ることです：

// ❌ Wrong — CS8121: DiagramSelectionSettings cannot match Node
if (args.NewValue is Node n) { }

// ❌ Wrong — DiagramSelectionSettings is not IEnumerable
foreach (var item in args.NewValue) { }

// ✅ Correct — use SelectionSettings on the diagram reference
foreach (var node in _diagram.SelectionSettings.Nodes)
    Console.WriteLine(node.ID);
foreach (var conn in _diagram.SelectionSettings.Connectors)
    Console.WriteLine(conn.ID);

テキスト変更イベント

⚠️ TextChangedEventArgs は存在しません — これを使用すると CS0246 が発生します。
正しいイベント引数の型は TextChangeEventArgs です（d は付きません）：

// ❌ Wrong — CS0246: TextChangedEventArgs not found
private void OnTextChanged(TextChangedEventArgs args) { }

// ✅ Correct
private void OnTextChanged(TextChangeEventArgs args) { }

ドラッグ開始イベント

⚠️ DragStartEventArgs は曖昧です。Syncfusion.Blazor.Popups（または DragStartEventArgs を公開する他のパッケージ）も参照されている場合に発生します。
常に Syncfusion.Blazor.Diagram.DragStartEventArgs と完全修飾してください。

// ❌ 誤り — CS0104: Diagram と Popups の間で参照が曖昧です
private void OnDragStart(DragStartEventArgs args) { }

// ✅ 正しい — 完全修飾
private void OnDragStart(Syncfusion.Blazor.Diagram.DragStartEventArgs args) { }

⚠️ Syncfusion.Blazor.Diagram に DragEnterEventArgs は存在しません。
SfDiagramComponent には、DragEnterEventArgs を受け取る DragEnter イベントはありません。
SfDiagramComponent で利用できるドラッグイベントは DragStart、Dragging、DragLeave、DragDrop で、すべて SymbolPalette のドラッグ＆ドロップ専用です。
ノードの 移動中（内部ドラッグ）を追跡するには、PositionChanged を使用してください。

// ❌ 誤り — DragEnterEventArgs は存在しません
private void OnDragEnter(DragEnterEventArgs args) { }

// ❌ 誤り — SfDiagramComponent に OnPositionChange は存在しません
<SfDiagramComponent OnPositionChange="OnPositionChange" />

// ✅ 正しい — PositionChanged を使用
<SfDiagramComponent PositionChanged="OnPositionChanged" />

private void OnPositionChanged(PositionChangedEventArgs args)
{
    if (args.Element is Node n)
        Console.WriteLine($"Node {n.ID} moved to ({n.OffsetX}, {n.OffsetY})");
}

スナップ距離

⚠️ SnapSettings に SnapObjectDistance は存在しません。使用すると InvalidOperationException: does not have a property matching the name 'SnapObjectDistance' が発生します。
正しいプロパティ名は SnapDistance です。

@* ❌ 誤り — SnapObjectDistance は存在しません *@
<SnapSettings SnapObjectDistance="5" />

@* ✅ 正しい *@
<SnapSettings Constraints="SnapConstraints.SnapToObject" SnapDistance="5" />

スタイル設定

⚠️ SfDiagramComponent に CssClass は存在しません。使用すると、
InvalidOperationException: Object of type 'SfDiagramComponent' does not have a property matching the name 'CssClass' が発生します。
代わりに、コンポーネントをスコープ用クラスを指定した <div> で囲んでください。

@* ❌ 誤り — SfDiagramComponent に CssClass は存在しません *@
<SfDiagramComponent CssClass="my-diagram" />

@* ✅ 正しい — ラッパー div を使用 *@
<div class="my-diagram">
    <SfDiagramComponent ... />
</div>

フェーズのオフセットプロパティ

⚠️ Phase.Offset は存在しません。使用するとコンパイルエラーが発生します。
スイムレーン内のフェーズのサイズを設定するには Phase.Width を使用してください。

// ❌ 誤り — Phase に Offset は存在しません
new Phase { ID = "ph1", Offset = 220 }

// ✅ 正しい — Width を使用
new Phase { ID = "ph1", Width = 220 }

レーンの制約プロパティ

⚠️ Lane.Constraints と LaneConstraints 列挙型は存在しません。
Constraints プロパティを使用して個々のレーンに制約を設定することはできません。
スイムレーンレベルの操作を制限するには、Swimlane オブジェクト自体の SwimlaneConstraints を使用してください。

// ❌ 誤り — Lane.Constraints と LaneConstraints は存在しません
lane.Constraints = LaneConstraints.Default & ~LaneConstraints.ResizeEntries;

// ✅ 正しい — Swimlane オブジェクトに制約を設定
swimlane.Constraints = SwimlaneConstraints.Default & ~SwimlaneConstraints.Interaction;

FitMode.Page の値

⚠️ FitMode.Page は存在しません。使用すると CS0117 が発生します。
FitMode の正しい値は FitMode.Width と FitMode.Height です。

// ❌ 誤り — FitMode.Page は存在しません
new FitOptions { Mode = FitMode.Page }

// ✅ 正しい — FitMode.Width または FitMode.Height を使用
new FitOptions { Mode = FitMode.Width, Region = DiagramRegion.Content }

LoadDiagram メソッド

⚠️ SfDiagramComponent.LoadDiagram() は存在しません — 使用するとコンパイルエラーになります。
代わりに、非同期バージョンの LoadDiagramAsync() を使用してください。

// ❌ 誤り — LoadDiagram() は存在しません
diagram.LoadDiagram(savedJson);

// ✅ 正しい — LoadDiagramAsync を使用します
await diagram.LoadDiagramAsync(savedJson);

FitToPageAsync メソッド

⚠️ SfDiagramComponent.FitToPageAsync() は存在しません — 使用するとコンパイルエラーになります。
代わりに、非同期ではないオーバーロードの FitToPage() を使用してください。

// ❌ 誤り — FitToPageAsync は存在しません
await diagram.FitToPageAsync(new FitOptions { Mode = FitMode.Width });

// ✅ 正しい — FitToPage を使用します（同期処理）
diagram.FitToPage(new FitOptions { Mode = FitMode.Width, Region = DiagramRegion.Content });

BasicShapes 列挙型

⚠️ BasicShapes は存在しません — 代わりに NodeBasicShapes を使用してください。

// ❌ 誤り
new BasicShape { Shape = BasicShapes.Rectangle }

// ✅ 正しい
new BasicShape { Shape = NodeBasicShapes.Rectangle }

DiagramThickness コンストラクター

⚠️ DiagramThickness には4引数のコンストラクターがありません — 使用すると CS1729: does not contain a constructor that takes 4 arguments が発生します。
代わりに、名前付きプロパティを使った オブジェクト初期化子 の構文を使用してください。

// ❌ 誤り — CS1729: 4引数のコンストラクターはありません
new DiagramThickness(20, 50, 20, 20)

// ✅ 正しい — 名前付きプロパティを使ったオブジェクト初期化子を使用します
new DiagramThickness { Left = 20, Top = 50, Right = 20, Bottom = 20 }

// ✅ 正しい — 必要な辺のみ設定します
new DiagramThickness { Top = 50 }

PathAnnotation DragLimit の型

⚠️ PathAnnotation.DragLimit の型は DiagramThickness です — Margin ではありません。
new Margin { ... } を使用すると、型の不一致によるコンパイルエラー（CS0029）が発生します。
DragLimit には必ず new DiagramThickness { ... } を使用してください。

// ❌ 誤り — CS0029: Margin を DiagramThickness に割り当てられません
new PathAnnotation
{
    Constraints = AnnotationConstraints.Interaction,
    DragLimit   = new Margin { Left = 40, Right = 40, Top = 20, Bottom = 20 }
}

// ✅ 正しい — オブジェクト初期化子を使った DiagramThickness
new PathAnnotation
{
    Constraints = AnnotationConstraints.Interaction,
    DragLimit   = new DiagramThickness { Left = 40, Right = 40, Top = 20, Bottom = 20 }
}

ScrollSettings の EnableAutoScroll プロパティ

⚠️ CanAutoScroll は ScrollSettings に存在しません — 使用すると InvalidOperationException: does not have a property matching the name 'CanAutoScroll' が発生します。
正しいプロパティ名は EnableAutoScroll です。

@* ❌ 誤り — CanAutoScroll は存在しません *@
<ScrollSettings CanAutoScroll="true" />

@* ✅ 正しい *@
<ScrollSettings EnableAutoScroll="true" />

Zoom、Undo、Redo メソッド

⚠️ ZoomAsync()、UndoAsync()、RedoAsync() は存在しません — 使用するとコンパイルエラーになります。
代わりに、非同期ではないオーバーロードの Zoom()、Undo()、Redo() を使用してください。

// ❌ 誤り — ZoomAsync、UndoAsync、RedoAsync は存在しません
await _diagram.ZoomAsync(1.2, new DiagramPoint { X = 300, Y = 300 });
await _diagram.UndoAsync();
await _diagram.RedoAsync();

// ✅ 正しい — 非同期ではないオーバーロードを使用します
_diagram.Zoom(1.2, new DiagramPoint { X = 300, Y = 300 });
_diagram.Undo();
_diagram.Redo();

Overview コンポーネントの名前空間

⚠️ SfDiagramOverviewComponent には追加の @using が必要です — これは Syncfusion.Blazor.Diagram ではなく、Syncfusion.Blazor.Diagram.Overview にあります。指定しないと CS0246 が発生します。

@* ❌ 誤り — Overview 名前空間がないため SfDiagramOverviewComponent が見つかりません *@
@using Syncfusion.Blazor.Diagram

@* ✅ 正しい — 両方の名前空間が必要です *@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Overview

⚠️ SourceID は SfDiagramComponent に設定した ID と完全に一致させる必要があります — ID は自動生成されないため、明示的に設定する必要があります。一致しない場合（大文字と小文字の違いを含む）、Overview は空で表示されます。

@* ❌ 誤り — Diagram に ID が設定されていないため、SourceID のリンク先がありません *@
<SfDiagramComponent Width="100%" Height="500px" Nodes="@_nodes" />
<SfDiagramOverviewComponent SourceID="myDiagram" Height="150px" />

@* ✅ 正しい — Diagram に ID が設定され、SourceID と完全に一致しています *@
<SfDiagramComponent ID="myDiagram" Width="100%" Height="500px" Nodes="@_nodes" />
<SfDiagramOverviewComponent SourceID="myDiagram" Height="150px" />

⚠️ SfDiagramOverviewComponent を SfDiagramComponent の内部にネストしないでください — Overview は Diagram のマークアップの外側に兄弟コンポーネントとしてレンダリングされます。