syncfusion-winforms-diagram

Syncfusion Windows Forms Diagram の実装

Essential Diagram は、Windows Forms アプリケーション向けの拡張性と高パフォーマンスを備えた .NET ダイアグラム作成フレームワークです。ベクターグラフィックスとラスターグラフィックスの両方に対応し、Microsoft Visio のようなインタラクティブなグラフィックスおよびダイアグラム作成アプリケーションを開発できます。

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

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

• インタラクティブなダイアグラムを作成する - フローチャート、組織図、ネットワーク図、またはノードベースのビジュアライゼーションを作成する
• ダイアグラムエディターを実装する - ドラッグ＆ドロップ、シンボルパレット、描画ツールを備えた Visio のようなアプリケーションを開発する
• 図形を視覚的に接続する - さまざまな種類のコネクタ（直交、ベジェ、方向線）を使ってノードをリンクする
• カスタムのダイアグラム作成ツールを設計する - 独自の図形やシンボルを使った、特定分野向けのダイアグラムアプリケーションを作成する
• ビジュアルモデリングソフトウェアを構築する - UML 図、ER 図、マインドマップ、またはワークフロー設計ツールを実装する
• ダイアグラム作成機能を追加する - 既存の Windows Forms アプリケーションにダイアグラムコントロールを統合する
• 複雑なレイアウトを管理する - 階層型、放射型、または組織図向けの自動レイアウトアルゴリズムを使用する

コンポーネントの概要

Essential Diagram は、次のコンポーネントを備えた包括的な Model-View-Controller アーキテクチャを提供します。

コアコントロール：

• Diagram - 2D の図形、テキスト、画像、コントロールを描画・操作するためのメインキャンバス
• Overview - 動的なパン／ズーム表示領域を備えた全体表示
• PaletteGroupBar/PaletteGroupView - ドラッグ＆ドロップ用のシンボルパレット管理
• PropertyEditor - ダイアグラムオブジェクトのプロパティの検査と編集
• DocumentExplorer - ダイアグラムオブジェクトとレイヤーのツリービュー

主な機能：

• 15 種類以上のインタラクティブな描画ツール（Rectangle、Line、Bezier、Polygon、Text など）
• 自動ルーティングとラインブリッジに対応した 7 種類以上のコネクタ
• 行列変換（移動、回転、拡大縮小）
• レイヤー、グループ化、Z オーダーの管理
• 元に戻す／やり直し、ルーラー、グリッド線、グリッドへのスナップ
• イベント処理、データバインディング、コンテキストメニュー
• シリアル化、印刷、エクスポート機能
• Symbol Designer および Diagram Builder ユーティリティ

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

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

• Diagram コントロールをインストールして設定する
• Model-View-Controller アーキテクチャを理解する
• 最初のダイアグラムを作成する（デザイナーまたはコード）
• 基本的なノードを追加して接続する
• 動作するダイアグラムを一通り設定する

ノードと図形

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

次の作業を行う場合に参照してください。

• 長方形、楕円、多角形などの図形を作成する
• ノードの位置やスタイル（塗りつぶし、境界線、影）を設定する
• カスタム図形と Symbol Designer を使用する
• ノードのプロパティを操作する
• ビットマップノードと複合図形を使用する

コネクタとリンク

📄 参照： references/connectors.md

次の機能を実装する場合に参照してください。

• Line、Orthogonal、DirectedLine、PolyLine コネクタ
• Bezier、Spline、Curve、Arc コネクタ
• 始点および終点の装飾（矢印、ひし形、円）
• 自動ラインルーティングとラインブリッジ
• 接続ポイントとポートの管理
• コネクタのスタイル設定とカスタマイズ

描画ツール

📄 参照： references/drawing-tools.md

次の機能を有効にする場合に参照してください。

• インタラクティブな描画ツール（SelectTool、RectangleTool、LineTool など）
• 図形ツール（Ellipse、Polygon、RoundRect、Arc）
• 線描画ツール（PolyLine、Curve、Bezier、Spline、Pencil）
• Text および RichText ツール
• 接続ツール（LineLinkTool、OrthogonalLinkTool など）
• ツールの有効化と設定

図表コントロール

📄 参照： references/diagram-controls.md

追加する場合：

• パン／ズーム可能なビューポート用の概要コントロール
• シンボルパレットを管理する PaletteGroupBar
• パレットを表示する PaletteGroupView
• プロパティを確認する PropertyEditor
• オブジェクトツリーを視覚化する DocumentExplorer
• デザイナーとコードによるコントロールの作成

レイアウトと整理

📄 参照： references/layout-organization.md

整理する場合：

• レイヤー（作成、管理、表示設定）
• ノードのグループ化とグループ解除
• 配置ツール（左、中央、右、上、中央、下）
• Z オーダー操作（前面へ移動、背面へ移動）
• 間隔とサイズのツール
• 微調整操作

ラベルとポート

📄 参照： references/labels-ports.md

設定する場合：

• ノードへのラベルの追加と書式設定
• テキストのスタイル設定（フォント、色、配置、回転）
• ノード上の接続ポート
• ポートの制約と接続ルール
• カスタムポートの配置
• ラベルとポートの表示設定

図表の機能

📄 参照： references/features.md

実装する場合：

• 実行時の動的プロパティ
• イベントハンドラー（ノード、接続、モデルのイベント）
• 図表オブジェクトへのデータバインディング
• コンテキストメニューのカスタマイズ
• タッチ対応デバイスでのタッチサポート
• 測定単位（ピクセル、インチ、ミリメートル）

ユーザー操作

📄 参照： references/user-interaction.md

処理する場合：

• 元に戻す／やり直し機能
• パンとズームのツール
• 拡大率の制御
• 選択モードと複数選択
• コピー、切り取り、貼り付け操作
• 回転と反転のツール

ビューコントロール

📄 参照： references/view-controls.md

設定する場合：

• ルーラー（水平および垂直）
• グリッド線とグリッドへのスナップ
• 配置用ガイド
• スクロールの動作
• ズームとパンの設定
• ページの境界線と背景

レイアウト管理

📄 参照： references/layout-management.md

適用する場合：

• 自動レイアウトアルゴリズム
• 階層型レイアウト
• 組織図レイアウト
• 放射状レイアウトとツリーレイアウト
• カスタムレイアウトマネージャー
• レイアウトの設定と最適化

高度な機能

📄 参照： references/advanced-features.md

次の機能を使用する場合：

• 図表のシリアル化（保存／読み込み）
• 印刷（ページ設定、印刷プレビュー、ヘッダー／フッター）
• 画像形式へのエクスポート
• カスタムシンボル用の Symbol Designer ユーティリティ
• 図表を作成する Diagram Builder ユーティリティ
• カスタムツールの開発
• パフォーマンスの最適化

トラブルシューティング

📄 参照： references/troubleshooting.md

次の問題に直面した場合：

• よくある問題と解決策
• アセンブリの依存関係とバージョン管理
• パフォーマンス最適化のヒント
• ベストプラクティスと FAQ

クイックスタートの例

接続されたノードを含む基本的な図表

using Syncfusion.Windows.Forms.Diagram;
using Syncfusion.Windows.Forms.Diagram.Controls;

// Create diagram control
Diagram diagram = new Diagram();
diagram.Size = new Size(800, 600);
diagram.HScroll = true;
diagram.VScroll = true;
diagram.ShowRulers = true;

// Create and attach model
Model model = new Model();
diagram.Model = model;

// Create a start node (ellipse)
Ellipse startNode = new Ellipse(100, 100, 120, 80);
startNode.FillStyle.Color = Color.LightGreen;
startNode.FillStyle.ForeColor = Color.Green;
startNode.LineStyle.LineColor = Color.DarkGreen;
startNode.LineStyle.LineWidth = 2;

Label startLabel = new Label();
startLabel.Text = "Start";
startLabel.FontColorStyle.Color = Color.Black;
startNode.Labels.Add(startLabel);

model.AppendChild(startNode);

// Create a process node (rectangle)
Syncfusion.Windows.Forms.Diagram.Rectangle processNode = 
    new Syncfusion.Windows.Forms.Diagram.Rectangle(300, 100, 120, 80);
processNode.FillStyle.Color = Color.LightBlue;
processNode.LineStyle.LineColor = Color.DarkBlue;
processNode.LineStyle.LineWidth = 2;

Label processLabel = new Label();
processLabel.Text = "Process";
processLabel.FontColorStyle.Color = Color.Black;
processNode.Labels.Add(processLabel);

model.AppendChild(processNode);

// Connect nodes with an orthogonal connector
OrthogonalConnector connector = 
    new OrthogonalConnector(startNode.PinPoint, processNode.PinPoint);
connector.LineStyle.LineColor = Color.Gray;
connector.LineStyle.LineWidth = 2;
connector.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;

startNode.CentralPort.TryConnect(connector.TailEndPoint);
processNode.CentralPort.TryConnect(connector.HeadEndPoint);

model.AppendChild(connector);

// Add diagram to form
this.Controls.Add(diagram);

よくあるパターン

完全な図表エディターの作成

// Setup diagram with all helper controls
Diagram diagram = new Diagram();
diagram.Dock = DockStyle.Fill;
Model model = new Model();
diagram.Model = model;

// Add Overview control
OverviewControl overview = new OverviewControl();
overview.Dock = DockStyle.Left;
overview.Diagram = diagram;

// Add PaletteGroupBar for symbols
PaletteGroupBar paletteBar = new PaletteGroupBar();
paletteBar.Dock = DockStyle.Left;
paletteBar.LoadPalette("BasicShapes.edp");
paletteBar.LoadPalette("FlowchartSymbols.edp");

// Add PropertyEditor
PropertyEditor propertyEditor = new PropertyEditor();
propertyEditor.Dock = DockStyle.Right;
propertyEditor.Diagram = diagram;

// Add DocumentExplorer
DocumentExplorer docExplorer = new DocumentExplorer();
docExplorer.Dock = DockStyle.Right;
docExplorer.AttachModel(model);

// Add all to form
this.Controls.Add(diagram);
this.Controls.Add(overview);
this.Controls.Add(paletteBar);
this.Controls.Add(propertyEditor);
this.Controls.Add(docExplorer);

描画ツールの有効化

// Activate rectangle tool for drawing rectangles
diagram.Controller.ActivateTool("RectangleTool");

// Activate line connector tool
diagram.Controller.ActivateTool("LineLinkTool");

// Activate selection tool (default)
diagram.Controller.ActivateTool("SelectTool");

// Configure tool settings
Tool tool = diagram.Controller.ActiveTool;
if (tool is LineConnectorTool lineConnector)
{
    lineConnector.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;
    lineConnector.TailDecorator.DecoratorShape = DecoratorShape.Circle;
}

レイヤーの操作

// Create a new layer
Layer backgroundLayer = new Layer();
backgroundLayer.Name = "Background";
backgroundLayer.Visible = true;
backgroundLayer.Enabled = true;
model.Layers.Add(backgroundLayer);

// Add nodes to specific layer
Rectangle node = new Rectangle(50, 50, 100, 60);
backgroundLayer.AppendChild(node);

// Set active layer
model.ActiveLayer = backgroundLayer;

// Toggle layer visibility
backgroundLayer.Visible = false;
diagram.Refresh();

自動レイアウトの適用

// Create nodes
List<Node> nodes = new List<Node>();
for (int i = 0; i < 10; i++)
{
    Rectangle node = new Rectangle(0, 0, 80, 50);
    node.Name = "Node" + i;
    model.AppendChild(node);
    nodes.Add(node);
}

// Apply hierarchical layout
HierarchicalLayout layout = new HierarchicalLayout(model, model.Bounds);
layout.HorizontalSpacing = 50;
layout.VerticalSpacing = 50;
layout.Orientation = LayoutOrientation.TopToBottom;
layout.Layout();

diagram.UpdateView();

図表の保存と読み込み

// Save diagram to file
diagram.SaveBinary("MyDiagram.edd");

// Load diagram from file
diagram.LoadBinary("MyDiagram.edd");
diagram.Refresh();

// Save model only
model.Save("MyModel.xml");

// Load model
Model loadedModel = Model.Load("MyModel.xml");
diagram.Model = loadedModel;

主なクラスとメソッド

コアクラス

• Diagram - ScrollControl を継承するメインの図表コントロール
• Model - 図表のノード、コネクタ、レイヤーを含みます
• View - モデルを描画し、表示プロパティを管理します
• Controller - ユーザー入力とツールの有効化を処理します

ノードクラス

• Node - すべての図表ノードの基底クラス
• Rectangle、Ellipse、Polygon、RoundRect - 基本的な図形ノード
• Line、PolyLine、Curve、Bezier、Spline - 線ベースのノード
• TextNode、RichTextNode - テキストノード
• BitmapNode - 画像ノード
• Group - グループ化したノードのコンテナー

コネクタクラス

• OrthogonalConnector - 90 度の角度のコネクタ
• DirectedLinesConnector - スマートに経路設定されるコネクタ
• LineConnector - 直線コネクタ

共通メソッド

• Model.AppendChild(node) - ノードをモデルに追加
• Controller.ActivateTool(toolName) - 描画ツールを有効化
• Diagram.UpdateView() - 図の表示を更新
• Node.Labels.Add(label) - ノードにラベルを追加
• Port.TryConnect(endpoint) - ポート経由でノードを接続
• Controller.Group() - 選択したノードをグループ化
• Model.HistoryManager.Undo() - 直前の操作を元に戻す

一般的なユースケース

1. フローチャートデザイナー - 判断ノード、開始／終了記号、方向付きコネクタを使用してプロセスフローを作成
2. 組織図 - 自動レイアウトと従業員ノードを使用して階層構造を作成
3. ネットワーク図 - サーバー、ルーター、接続線を使用してネットワークトポロジーを可視化
4. UML エディター - クラス図、シーケンス図、ユースケース図を設計
5. マインドマップ - 中心となるアイデアと分岐する概念を含む放射状のマインドマップを作成
6. ワークフローデザイナー - BPMN 表記法を使用してビジネスプロセスのワークフローを設計
7. ER 図 - エンティティ、属性、リレーションシップを使用してデータベーススキーマをモデル化
8. 回路デザイナー - コンポーネントと配線接続を使用して電気回路を設計

関連スキル

• Syncfusion Windows Forms コンポーネントの実装 - メインライブラリのナビゲーション
• メインライブラリのスキルで利用可能なコンポーネントカテゴリ

---

お困りですか？ よくある問題と解決策については、トラブルシューティングのリファレンスをご確認ください。