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构建流程图、组织结构图或思维导图
02创建 BPMN 或 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);