syncfusion-wpf-diagram

Name: syncfusion-wpf-diagram
Author: syncfusion

github.com/syncfusionデザイン・UI5156 回インストール1 週間前に更新

リポジトリ

syncfusion-wpf-diagram について

WPF アプリで Syncfusion SfDiagram を使い、インタラクティブな図を作成・カスタマイズするためのスキルです。図の要素、自動レイアウト、データバインディング、保存、エクスポート、印刷を扱います。

主な機能

01ノード、コネクター、ポート、注釈
02複数の図形式に対応する自動レイアウト
03ドラッグ＆ドロップ対応のシンボルパレット
04データバインディングによる図の生成
05XML、JSON、ストリームへのシリアライズ
06画像・PDF エクスポートと印刷

活用シーン

01フローチャート、組織図、マインドマップの作成
02BPMN または UML 図の作成
03階層データから図を生成
04図の状態の保存、エクスポート、印刷

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-diagram

インストール後、Claude Code で/syncfusion-wpf-diagramを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

annotations.md

automatic-layouts.md

bpmn-shapes.md

commands.md

connectors.md

data-source.md

diagram-customization.md

export-print.md

getting-started.md

interaction.md

nodes.md

performance-constraints.md

ports.md

serialization-undo-redo.md

stencil.md

swimlane.md

uml-diagrams.md

詳細

Syncfusion WPF Diagram（SfDiagram）の実装

Syncfusion WPF Diagram コントロール（SfDiagram）は、WPF アプリケーションでインタラクティブなフローチャート、組織図、BPMN 図、UML 図、ネットワーク図などを作成するための、豊富な機能を備えた図表作成ライブラリです。ノード、コネクタ、注釈、ポート、自動レイアウトに加え、幅広いカスタマイズオプションを提供します。

このスキルを使う場面

WPF アプリケーションであらゆるビジュアル図表（フローチャート、組織図、マインドマップなど）を作成する
図表にノード、コネクタ、注釈、ポートを追加する
BPMN 図または UML 図を実装する
図表の自動レイアウト（階層型、組織図、マインドマップ、フローチャート、放射状）を設定する
ドラッグ＆ドロップで図表を作成するためのシンボルパレット（ステンシル）を設定する
データソースをバインドして図表を動的に生成する
図表の操作（選択、ドラッグ、サイズ変更、ズーム、キーボードショートカット）を有効にする
図表をエクスポートまたは印刷する
図表の外観（グリッド線、ルーラー、テーマ、ページ設定）をカスタマイズする

クイックスタート

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

Install-Package Syncfusion.SfDiagram.WPF

2. XAML に名前空間を追加する

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

3. SfDiagram を宣言する

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:SfDiagram x:Name="diagram">
            <syncfusion:SfDiagram.Nodes>
                <syncfusion:NodeCollection/>
            </syncfusion:SfDiagram.Nodes>
            <syncfusion:SfDiagram.Connectors>
                <syncfusion:ConnectorCollection/>
            </syncfusion:SfDiagram.Connectors>
        </syncfusion:SfDiagram>
    </Grid>
</Window>

4. コードビハインドでノードとコネクタを追加する

using Syncfusion.UI.Xaml.Diagram;

// Add nodes
var node1 = new NodeViewModel { ID = "Start", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 100, Shape = this.Resources["Ellipse"] };
var node2 = new NodeViewModel { ID = "End", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 250, Shape = this.Resources["Rectangle"] };
(diagram.Nodes as NodeCollection).Add(node1);
(diagram.Nodes as NodeCollection).Add(node2);

// Add connector
var connector = new ConnectorViewModel { SourceNodeID = "Start", TargetNodeID = "End" };
(diagram.Connectors as ConnectorCollection).Add(connector);