WPF 开发可视化流程图设计器，让工控逻辑可执行-编程阁

前言

工业自动化与智能制造快速发展，人机交互界面（HMI）和可视化监控系统对操作效率、逻辑清晰度和实时响应能力提出了更高要求。传统的文本配置或静态图表已难以满足复杂控制逻辑的表达与调试需求。而基于节点与连线的流程图设计方式，因其直观性、模块化和可执行性，正逐渐成为工控软件中流程建模与逻辑编排的重要手段。

WPF作为微软成熟的桌面UI框架，凭借其强大的图形渲染能力、数据绑定机制和高可定制性，非常适合用于开发面向工业控制场景的可视化流程图控件。本文将推荐一个工控环境优化的WPF流程图控件项目。

项目介绍

项目是一个面向工业控制场景的WPF流程图设计器，核心目标是为大家提供一个可拖拽、可连接、可模拟执行的节点式逻辑编排环境。系统主界面采用标准WPF XAML结构，中央为流程画布，支持自由布局各类工控逻辑单元（如传感器输入、延时控制、条件判断、设备输出等），并通过可视化连线建立控制流。

整体架构轻量、稳定，易于嵌入SCADA系统、PLC配置工具或边缘计算平台，适用于产线逻辑调试、设备联动配置、故障诊断流程建模等典型工控场景。

项目功能

1、内置多种工控常用节点类型，如输入节点（代表传感器信号）、延迟节点（模拟响应时间）、菱形判断节点（实现分支逻辑）、输出节点（控制执行器）以及文件/状态记录节点，贴合现场控制逻辑表达习惯。

2、支持多种连线样式（直线、贝塞尔曲线、折线、弧线），便于在密集布线的复杂流程中保持清晰可读性，适应不同屏幕分辨率与操作台布局。

3、提供完整的流程生命周期控制："开始流程"用于启动逻辑仿真，"停止流程"中断当前执行，"重置流程"恢复初始状态，方便工程师反复测试控制策略。

4、集成实用编辑功能，包括删除、全选、清空画布、视图自动适配、一键自动布局，以及"上一个/下一个"节点导航，提升现场配置效率。

5、支持按"节点""连线"或"端口"三种粒度驱动执行逻辑，满足从简单顺序控制到复杂事件触发的不同工控需求。

项目特点

1、采用命令模式解耦UI与业务逻辑，所有操作通过DiagramCommands统一调度，确保在高并发或长时间运行的工控环境中保持稳定性。
2、深度结合WPF数据绑定，流程状态（如节点激活、连线高亮）与底层执行引擎实时同步，无需手动刷新界面，降低系统资源占用。
3、界面布局符合工业HMI设计规范：左侧为节点工具箱（可分类展示I/O、逻辑、定时器等模块），右侧预留属性面板区域，便于查看或修改节点参数（如延时毫秒数、阈值等）。
4、模块化程度高，节点、连接器、绘制器均可独立扩展，支持后续接入Modbus、OPC UA等工业协议的数据源。

5、基于开源项目 HeBianGu.Diagram 构建，在保证图形性能的同时，大幅缩短开发周期，适合快速部署到国产化工控平台。

项目技术

1、完全基于WPF框架开发，利用XAML声明式语法构建高性能矢量图形界面，支持缩放、平移、抗锯齿等工业级显示需求。

2、集成 Microsoft.Xaml.Behaviors 库，实现拖拽放置、双击编辑、右键菜单等复杂交互，提升操作流畅度。

3、核心逻辑封装于自定义 DiagramControl 控件中，可作为独立组件嵌入现有工控软件，实现"即插即用"。

4、采用 GeometryNodeData 等数据模型支持自定义图标（如电机、阀门、传感器SVG图形），使流程图更贴近真实设备语义。

项目代码

public classArcLinkDrawer : LinkDrawer { public ArcLinkDrawer() { this.DisplayName = "弧线"; } [Display(Name = "圆弧方向", GroupName = "基础信息", Order = 0)] public Orientation Orientation { get { return (Orientation)GetValue(OrientationProperty); } set { SetValue(OrientationProperty, value); } } publicstaticreadonly DependencyProperty OrientationProperty = DependencyProperty.Register("Orientation", typeof(Orientation), typeof(ArcLinkDrawer), new FrameworkPropertyMetadata(default(Orientation), (d, e) => { ArcLinkDrawer control = d as ArcLinkDrawer; if (control == null) return; if (e.OldValue is Orientation o) { } if (e.NewValue is Orientation n) { } control.Diagram?.RefreshLinkDrawer(); })); public override Geometry DrawPath(Link link, out Point center) { Point start = LinkLayer.GetStart(link); Point end = LinkLayer.GetEnd(link); Vector v = end - start; center = new Point((v.X / 2) + start.X, (v.Y / 2) + start.Y); Point point = Orientation == Orientation.Vertical ? new Point(start.X, end.Y) : new Point(end.X, start.Y); if (this.IsLinkCrossBound == true) { Vector? find_start = Intersects(link.FromPort == null ? link.FromNode.Bound : link.FromPort.Bound, start, point); if (find_start.HasValue) { start = (Point)find_start.Value; } Vector? find_end = Intersects(link.ToPort == null ? link.ToNode.Bound : link.ToPort.Bound, point, end); if (find_end.HasValue) { end = (Point)find_end.Value; } } Geometry geo = GetDrawBezierGeometry(start, point, end); if (this.IsUseArrow == false) return geo; Vector vector = end - point; Vector normalize = vector / vector.Length; Point end1 = end - (normalize * this.ArrowLength); returnthis.GetArrowGeometry(geo, end1, end); } private Geometry GetDrawBezierGeometry(Point p1, Point p2, Point p3) { StreamGeometry geometry = new StreamGeometry(); using (StreamGeometryContext ctx = geometry.Open()) { // Begin the triangle at the point specified. Notice that the shape is set to // be closed so only two lines need to be specified below to make the triangle. ctx.BeginFigure(p1, false/* is filled */, false/* is closed */); //// Do ：添加箭头 //if (this.IsUseArrow) //{ // Vector vector = p3 - p2; // Vector normalize = vector / vector.Length; // Point end = p3 - normalize * this.ArrowLength; // //Size size = new Size(vector.X, vector.Y); // //ctx.ArcTo(p1, size, 80, true, SweepDirection.Counterclockwise, true, true); // ctx.BezierTo(p1, p2, end, true, true); // Point[] arrow = this.GetArrowLinePoints(end.X, end.Y, p3.X, p3.Y); // ctx.PolyLineTo(arrow, true, true); //} //else //{ ctx.BezierTo(p1, p2, p3, true, true); //} } geometry.Freeze(); return geometry; } }