简介：这份资源面向具备一定 C# 基础的 .NET 桌面开发者，提供一套基于 WinForm 与 GDI+ 的流程图绘制示例代码，可用于搭建自定义工作流设计器或流程编辑工具。代码围绕 Graphics、Pen、SolidBrush 等绘图类展开，涵盖形状定义与绘制、鼠标拖动交互、Invalidate 即时刷新以及形状与连接线的数据结构管理，并配有较详细注释，便于理解与二次扩展。压缩包共 39 个文件，以 cs 源码、resx 与 resources 资源文件、config 配置、sln 与 csproj 工程文件为主，另含可执行程序与效果图，整体约 176KB，结构紧凑、开箱即可运行调试。该资源已有 3214 人学习下载，适合想深入掌握 GDI+ 绘图机制、鼠标事件驱动重绘与图形界面交互实现的开发者参考，也可作为流程图类工具原型的基础框架，按需扩展节点类型与连线逻辑。
1. 一个 WinForm 流程图控件，为什么值得单独拆一遍
接手一个内部工单系统时，需求方只提了一句话：让用户自己拖节点、连线、保存成流程。听起来简单，真动手才发现坑在细节——拖动节点时连线要跟着走、不能闪烁，画布要能缩放平移，保存下来的数据还得能还原成同样的图。市面上不少流程图库要么绑死 Web 端，要么依赖一堆第三方 DLL，塞进一个纯 WinForm 老项目里水土不服。这份 .NET 工作流程图 WinForm 资源用的是 GDI+ 直接绘制，C# 实现，拖动即时刷新，属于那种“良心资源”级别的轻量方案：不引外部图形库，一个画布控件加一套图元模型就能跑。适合两类人——一类是手里有 WinForm 项目、需要内嵌流程编辑能力的开发者；另一类是想搞懂 GDI+ 双缓冲绘图、命中测试、序列化这套组合拳怎么落地的人。下面按“能干什么 → 怎么跑 → 怎么改”的顺序拆。
2. 技术选型与整体架构：GDI+ 画布怎么撑起一个流程编辑器
2.1 为什么是 GDI+ 而不是第三方图形库
WinForm 里画图有三条路：一是引第三方图表/图形库，功能全但体积大、授权和版本兼容都是隐患；二是用 WPF 的 Canvas 重写，可老项目是 .NET Framework WinForm，混编成本高；三是直接用System.Drawing下的 GDI+ 接口自绘。这个项目走的是第三条。GDI+ 的好处是零额外依赖、随 .NET Framework 自带、对像素级控制足够细；代价是所有交互逻辑——命中测试、选中态、拖动、连线、重绘——都得自己写。对流程图这种图元数量有限（几十到几百个节点）、刷新频率不高的场景，GDI+ 完全扛得住，而且代码透明，出问题能一行行查，不用猜黑匣子里发生了什么。
核心绘制入口就是控件的OnPaint，所有图元在一个Graphics对象上依次画出来。这里有个血泪经验：如果不做双缓冲，拖动节点时整个画布会疯狂闪烁，看起来像坏了。项目里通过设置控件样式开启双缓冲，这是 WinForm 自绘的第一道门槛。
// 在画布控件的构造函数里开启双缓冲，消除拖动闪烁 public FlowCanvas() { // 关键：让 WinForm 先把内容画到后台缓冲区，再一次性贴到屏幕 this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true); this.UpdateStyles(); }AllPaintingInWmPaint表示所有绘制都走OnPaint，屏蔽WM_ERASEBKGND的背景擦除；UserPaint表示由控件自己负责绘制；OptimizedDoubleBuffer是双缓冲的核心开关；ResizeRedraw保证窗口尺寸变化时整幅重绘。四个样式缺一个都可能出现残影或闪烁，这是自绘控件最常见的翻车点。
2.2 图元模型：节点、连线、画布三层结构
整个项目的数据结构可以拆成三层：FlowNode（节点）、FlowLink（连线）、FlowCanvas（画布容器）。节点持有位置、尺寸、标题、端口信息；连线持有起点节点、终点节点以及可选的折点；画布持有节点集合、连线集合、当前选中项、缩放比例和平移偏移。这种分层的好处是绘制和交互都围绕集合遍历展开，序列化时也只需把三层对象转成 JSON 或 XML。
// 节点模型：位置、尺寸、文本、端口 public class FlowNode { public string Id { get; set; } public Rectangle Bounds { get; set; } // 节点在画布坐标系中的矩形 public string Title { get; set; } public List<Point> Ports { get; set; } // 相对 Bounds 的端口偏移 public bool IsSelected { get; set; } } // 连线模型：用节点 Id 关联，避免直接持有对象引用导致序列化循环 public class FlowLink { public string FromNodeId { get; set; } public string ToNodeId { get; set; } public List<Point> Waypoints { get; set; } // 折线拐点，直线时为空 }连线用节点 Id 而不是对象引用，是为了序列化时不出现循环引用，也方便反序列化后重新建立关联。端口用相对坐标存，节点移动时端口跟着走，不用逐个更新。这套模型不复杂，但决定了后面拖动、连线、保存能不能写干净。
2.3 绘制管线：一次 OnPaint 里发生了什么
OnPaint里的顺序很讲究：先画背景网格，再画所有连线，最后画所有节点，选中的图元额外画高亮边框。连线先画是因为节点要盖在连线上面，否则线头会穿过节点文字。绘制时用Graphics.TranslateTransform和ScaleTransform应用画布的平移与缩放，这样图元坐标始终用逻辑坐标，不用在每处手动换算。
protected override void OnPaint(PaintEventArgs e) { var g = e.Graphics; g.SmoothingMode = SmoothingMode.AntiAlias; // 抗锯齿，线条更顺 g.TranslateTransform(_offsetX, _offsetY); // 应用画布平移 g.ScaleTransform(_zoom, _zoom); // 应用缩放 DrawGrid(g); // 背景网格 foreach (var link in _links) DrawLink(g, link); // 先画线 foreach (var node in _nodes) DrawNode(g, node); // 后画节点 }SmoothingMode.AntiAlias让斜线和圆角不出现锯齿；平移和缩放放在最前面，后续所有绘制自动继承变换。注意缩放后线宽也会被放大，如果希望线宽恒定，需要在画笔上按1/_zoom反向补偿，这是缩放功能里容易被忽略的细节。
3. 从零跑起来：环境、入口与第一次拖动
3.1 环境准备与项目打开
这是标准的 .NET Framework WinForm 工程，用 Visual Studio 打开解决方案即可，不需要额外装 NuGet 包。目标框架一般是 .NET Framework 4.x，操作系统 Windows 7 及以上都能跑。打开后先编译一次，确认没有缺引用；如果提示找不到System.Drawing，在项目引用里补上即可，它属于框架自带程序集。运行后主窗体里应该能看到一块带网格的画布，以及工具栏上的“添加节点”“删除”“保存”之类按钮。
3.2 主窗体与画布控件的挂接
主窗体负责工具栏和文件操作，画布控件负责所有图形交互。挂接方式有两种：一是把画布控件直接拖到窗体上，二是代码里动态创建并Dock = Fill。项目里通常是后者，方便控制层级。窗体加载时初始化画布、绑定事件，把默认示例流程灌进去，用户一打开就能看到效果，而不是面对一块空白画布发呆。
private void MainForm_Load(object sender, EventArgs e) { _canvas = new FlowCanvas { Dock = DockStyle.Fill }; _canvas.NodeDoubleClick += OnNodeDoubleClick; // 双击节点改标题 _canvas.SelectionChanged += OnSelectionChanged; // 选中态同步到属性面板 this.Controls.Add(_canvas); _canvas.LoadDemo(); // 载入示例流程，便于第一次运行就能看到效果 }Dock = Fill让画布占满剩余区域；两个事件把画布的交互结果抛给窗体，窗体再更新属性面板或弹窗。这种“控件管画、窗体管业务”的分工，后面加功能时不会互相纠缠。
3.3 拖动即时刷新的完整链路
拖动是这套代码的核心卖点。鼠标按下时做命中测试，找到点中的节点并记录偏移；鼠标移动时更新节点位置并调用Invalidate()触发重绘；鼠标抬起时结束拖动。关键在于移动过程中只重绘、不重建对象，且双缓冲保证不闪。
protected override void OnMouseDown(MouseEventArgs e) { var pt = ToLogical(e.Location); // 屏幕坐标转逻辑坐标 _dragNode = HitTestNode(pt); // 命中测试，返回最上层节点 if (_dragNode != null) { _dragOffset = new Point(pt.X - _dragNode.Bounds.X, pt.Y - _dragNode.Bounds.Y); this.Capture = true; // 捕获鼠标，拖出控件也不丢事件 } } protected override void OnMouseMove(MouseEventArgs e) { if (_dragNode == null) return; var pt = ToLogical(e.Location); _dragNode.Bounds = new Rectangle(pt.X - _dragOffset.X, pt.Y - _dragOffset.Y, _dragNode.Bounds.Width, _dragNode.Bounds.Height); this.Invalidate(); // 只请求重绘，不阻塞 }ToLogical把屏幕坐标按平移和缩放反算回逻辑坐标，否则缩放后拖动会“跑偏”；Capture = true保证鼠标快速移动拖出控件边界时仍能收到移动事件；Invalidate()只是标记区域无效，真正的绘制在消息循环空闲时由OnPaint完成，所以连续移动不会卡死。命中测试要从后往前遍历节点集合，保证点中的是最上层那个。
4. 核心模块拆解：命中测试、连线绘制与序列化
4.1 命中测试与选中态管理
命中测试决定“点到了谁”。节点用矩形包含判断，连线用点到线段的距离判断，阈值一般取 5 像素左右，太严点不中、太松误选。选中态用集合维护，支持 Ctrl 多选时把新节点加入集合，普通点击则清空后只留一个。
private FlowNode HitTestNode(Point pt) { // 倒序遍历：后画的节点在上层，优先命中 for (int i = _nodes.Count - 1; i >= 0; i--) { if (_nodes[i].Bounds.Contains(pt)) return _nodes[i]; } return null; } private double DistanceToSegment(Point p, Point a, Point b) { // 点到线段最短距离，用于连线命中 double dx = b.X - a.X, dy = b.Y - a.Y; if (dx == 0 && dy == 0) return Math.Sqrt((p.X - a.X) * (p.X - a.X) + (p.Y - a.Y) * (p.Y - a.Y)); double t = ((p.X - a.X) * dx + (p.Y - a.Y) * dy) / (dx * dx + dy * dy); t = Math.Max(0, Math.Min(1, t)); // 投影点限制在线段内 double px = a.X + t * dx, py = a.Y + t * dy; return Math.Sqrt((p.X - px) * (p.X - px) + (p.Y - py) * (p.Y - py)); }t是投影参数，限制在 0 到 1 之间保证算的是线段而不是无限长直线；距离小于阈值就判定命中连线。多选时选中集合变化要触发SelectionChanged，让属性面板同步显示，否则用户改了属性却不知道改的是哪个。
4.2 连线绘制：从端口到端口的路径计算
连线不是简单两点一线，而是从起点节点的某个端口出发、到终点节点的某个端口结束，中间可能带折点。项目里常见做法是先算两个端口的中心点，再根据相对方位决定走水平还是垂直的折线，最后用GraphicsPath一次性画出来，箭头用填充三角形收尾。
private void DrawLink(Graphics g, FlowLink link) { var from = FindNode(link.FromNodeId); var to = FindNode(link.ToNodeId); if (from == null || to == null) return; Point start = GetPortCenter(from, link.FromPortIndex); Point end = GetPortCenter(to, link.ToPortIndex); using (var path = new GraphicsPath()) { path.AddLine(start, end); // 直线；有折点时逐段 AddLine using (var pen = new Pen(Color.SteelBlue, 1.5f)) g.DrawPath(pen, path); DrawArrow(g, start, end); // 终点画箭头 } }GetPortCenter把端口的相对偏移换算成画布逻辑坐标；GraphicsPath的好处是后续要加贝塞尔曲线或圆角折线时只需换AddBezier，绘制代码不用大改；箭头方向由起点指向终点计算，用Math.Atan2求角度再旋转三角形顶点。线宽 1.5f 在缩放时会跟着变，需要恒定线宽就除以当前_zoom。
4.3 序列化：把画布存成可还原的数据
保存功能把节点和连线转成 JSON，加载时反序列化再重建关联。用DataContractJsonSerializer或Newtonsoft.Json都行，前者框架自带、后者更灵活。关键是连线只存节点 Id，加载后通过 Id 找回节点对象，避免对象图循环。
[DataContract] public class FlowDocument { [DataMember] public List<FlowNode> Nodes { get; set; } = new(); [DataMember] public List<FlowLink> Links { get; set; } = new(); } public void Save(string path) { var doc = new FlowDocument { Nodes = _nodes, Links = _links }; using var fs = File.Create(path); var serializer = new DataContractJsonSerializer(typeof(FlowDocument)); serializer.WriteObject(fs, doc); }DataContract和DataMember标记决定哪些字段参与序列化，Bounds是结构体可直接序列化；加载后要遍历连线、用FindNode把 Id 还原成引用，找不到就丢弃该连线并记日志，防止脏数据让整个画布加载失败。保存前建议先做一次校验，比如悬空连线、重复 Id，这些在二次开发时很容易踩。
5. 避坑与排查：自绘控件最容易翻车的几处
5.1 拖动时画面闪烁或残影
现象是拖动节点时整块画布忽明忽暗，松手后还留着一层旧位置的影子。原因基本是没开双缓冲，或者开了但OnPaintBackground还在擦背景。解决是把第 2 章那四个ControlStyles全部打开，并重写OnPaintBackground为空实现，让背景只由OnPaint里的网格绘制负责。改完再拖，画面应该干净利落。
5.2 缩放后拖动位置对不上
现象是放大到 150% 后，鼠标明明点在节点上，节点却往反方向跳。原因是鼠标事件给的是屏幕坐标，而节点存的是逻辑坐标，中间少了反变换。解决是在OnMouseDown和OnMouseMove里统一走ToLogical，按(screen - offset) / zoom反算。所有涉及坐标的地方都要过这一层，漏一处就偏。
5.3 连线端点不跟随节点移动
现象是拖动节点后，连线还停在旧位置。原因是连线绘制时缓存了端点坐标，而不是每次从节点实时计算。解决是DrawLink里每次都通过FindNode取当前Bounds再算端口中心，不缓存。代价是每帧多几次查找，节点量不大时完全无感。
5.4 保存后重新加载连线丢失
现象是保存的 JSON 里连线都在，加载后画布上一条线都没有。原因是反序列化后连线里的节点 Id 对不上，或者FindNode用了区分大小写的比较而 Id 生成时大小写不一致。解决是 Id 统一用小写 GUID，加载时用StringComparer.OrdinalIgnoreCase查找，找不到的连线记日志而不是静默丢弃，方便定位脏数据。
5.5 大量节点时拖动卡顿
现象是节点超过一两百个后，拖动明显掉帧。原因是每次Invalidate()都重绘全部图元。解决是只失效受影响区域：拖动时用Invalidate(unionOfOldAndNewBounds)限定重绘范围，或者对静态图元做离屏缓存。流程图场景节点通常不多，但工单系统里流程一复杂就容易撞上，提前留好这个优化口子。
6. 二次开发：把示例控件改成能进生产的编辑器
拿到这份代码后，最值钱的改造不是加花哨样式，而是把“能演示”变成“能存住、能校验、能扩展”。我一般按三步走。第一步是补数据校验：保存前遍历连线检查两端节点是否存在、Id 是否重复、是否有自环，校验不过就弹提示并定位到问题图元，别让脏数据进库。第二步是把图元模型抽象出基类FlowElement，节点、连线、将来的注释框、分组框都继承它，绘制和命中测试走统一接口，新增图元类型时只写自己的Draw和HitTest，画布代码不用动。第三步是把交互状态机化：用枚举表示Idle / Dragging / Linking / Selecting，每个状态只处理自己关心的鼠标事件，避免现在这种一堆if堆在OnMouseMove里、加个连线功能就互相打架。
验证改造是否成功，我习惯用一组固定用例：拖三个节点连两条线、缩放 50% 和 200% 各拖一次、保存后重启加载、故意删掉一个节点再保存看校验是否拦住。这组用例跑通，基本能确认没把原有能力改坏。还有一个具体技巧：给画布加一个UndoStack，每次结构性变更（增删节点、移动结束、连线变更）压一个快照，快照只存FlowDocument的深拷贝，撤销时整体替换再重绘。比逐操作写反向命令简单得多，代价是内存，但流程图数据量小，完全划算。
说个自己的教训：早些年我在一个类似控件上直接改OnMouseMove加连线预览，结果拖动和连线两种状态互相触发，鼠标一快就画出乱七八糟的线，查了大半天才发现是状态没隔离。从那以后我每次给自绘控件加交互，都强制先把状态机画出来再写代码，宁可多一个枚举也不让if嵌套超过两层。这份资源的结构已经算清爽，照着上面的路子改，进生产不算难。希望帮到你。
本文还有配套的精品资源，点击获取
