简介：这是一套基于C#与GDI+实现的WinForm流程图绘制源码，面向希望在.NET桌面环境中开发图形化流程设计工具的开发者，尤其适合需要理解绘图机制与鼠标交互逻辑的中级学习者。资源包共39个文件，以cs源码、resources资源、config配置、resx与png效果图为主，另含sln解决方案与csproj工程文件，压缩包约176KB，结构紧凑便于直接编译运行。源码围绕Graphics、Pen、SolidBrush等GDI+类展开，涵盖自定义形状类、Draw绘制方法、MouseDown/MouseMove/MouseUp拖动事件处理以及Invalidate即时刷新机制，并配有详细注释，方便读者理解形状存储与重绘流程。目前已有3213人学习下载，可作为自定义工作流或流程设计工具的参考基础，通过修改扩展即可搭建更复杂的流程图应用。

1. 拖一下就重绘：这个 WinForm 流程图控件到底能干什么

前阵子接了个内部工具的需求，要在 WinForm 里画一张可拖拽的流程节点图，节点能连线、能拖动、拖完立刻刷新，不能有残影。我第一反应是找现成的流程图控件，结果要么是 Web 端的 JS 库，要么是收费的商业组件，能直接塞进 C# WinForm 项目里、还带源码的，真不多。后来翻到这份 .NET 工作流程图 WinForm gdi+ 流程图 C# 版流程图绘制资源，0 分下载，拿下来跑了一遍，发现它正好卡在这个需求点上：纯 GDI+ 手绘，不依赖第三方图形库，节点拖动即时刷新，源码全开放。

它适合谁？一类是需要在 WinForm 里做流程编排、工单流转、审批链路可视化的开发者；另一类是想搞懂 GDI+ 双缓冲绘图、鼠标命中检测、拖拽重绘这套机制的人。这项目不是那种封装得密不透风的黑匣子，核心逻辑都摊在代码里，改起来心里有底。下面我按「它是什么 → 怎么跑起来 → 核心怎么实现 → 怎么改」的顺序拆一遍。

2. 技术选型与目录结构：为什么是 GDI+ 而不是 WPF

2.1 选型逻辑：WinForm + GDI+ 的取舍

先说清楚这个项目为什么用 WinForm 而不是 WPF。WPF 做矢量图形确实更优雅，Canvas、Path、Transform 一套下来很舒服，但现实里很多存量项目就是 WinForm 的，尤其是工业上位机、内部管理工具这类，迁移成本高。这时候要在 WinForm 里画图，GDI+ 就是最直接的选择——System.Drawing命名空间自带，不用引 NuGet 包，Graphics对象直接往控件上画。

GDI+ 的代价是它偏底层，双缓冲、坐标变换、命中检测都得自己写。这个项目正好把这几个点都覆盖了，所以它更像一份「GDI+ 绘图实战模板」，而不是一个开箱即用的成品控件。理解这一点很重要：你拿到的不是拖拽式设计器，而是一套可改造的绘图骨架。

技术栈上，它依赖的是 .NET Framework 的 WinForms（System.Windows.Forms）加System.Drawing，语言是 C#。没有用到任何第三方绘图库，也没有引入 Newtonsoft 之类的序列化包，属于「零外部依赖」那一类，扔进任何 WinForm 工程都能编译。

2.2 目录结构：文件不多，但分工清楚

这类绘图 Demo 的目录通常不会太复杂，我拿到手后整理了一下，大致是这么几块：

FlowChartDemo/ ├── Forms/ │ └── MainForm.cs 主窗体，承载绘图画布与工具栏 ├── Models/ │ ├── FlowNode.cs 节点数据模型（位置、尺寸、文本、类型） │ └── FlowLink.cs 连线数据模型（起点节点、终点节点、锚点） ├── Rendering/ │ ├── CanvasRenderer.cs 负责所有绘制逻辑 │ └── HitTester.cs 鼠标命中检测 ├── Interaction/ │ └── DragController.cs 拖拽状态机 └── Program.cs 入口

这个划分不是原项目强制的，但按这个思路拆，后面改起来会顺很多。核心就三件事：数据模型（节点和连线长什么样）、渲染器（怎么画到屏幕上）、交互控制器（鼠标怎么操作数据）。把这三者分开，是这类项目能不能二次开发的关键——很多人写崩就是因为把绘制和鼠标事件全塞进MainForm里，几百行之后自己都看不懂。

提示：如果你拿到的源码是单文件堆在 Form 里的，建议先按上面这个结构拆一遍再动手改，不然后面加功能会非常痛苦。

2.3 数据模型：节点和连线怎么定义

先看节点模型，这是整个绘图的基础：

public class FlowNode { public string Id { get; set; } // 节点唯一标识，连线靠它找节点 public Rectangle Bounds { get; set; } // 节点在画布上的矩形区域 public string Text { get; set; } // 节点显示文本 public NodeType Type { get; set; } // 节点类型：开始/处理/判断/结束 public bool IsSelected { get; set; } // 是否被选中，用于高亮 // 判断某个点是否落在节点内，命中检测的核心 public bool Contains(Point p) { return Bounds.Contains(p); } } public enum NodeType { Start, Process, Decision, End }

Bounds用Rectangle而不是分开存 X、Y、Width、Height，是因为 GDI+ 的Graphics.FillRectangle、DrawRectangle直接吃Rectangle，省得来回拼。Contains方法把命中检测收进模型里，鼠标点击时直接node.Contains(mousePoint)就行，逻辑内聚。

连线模型稍微绕一点，因为它要跟着节点动：

public class FlowLink { public FlowNode From { get; set; } // 起点节点引用 public FlowNode To { get; set; } // 终点节点引用 public Point FromAnchor { get; set; } // 起点锚点（相对节点） public Point ToAnchor { get; set; } // 终点锚点 // 每次绘制时根据节点当前位置重新算连线端点 public (Point start, Point end) GetEndpoints() { var start = new Point( From.Bounds.Left + FromAnchor.X, From.Bounds.Top + FromAnchor.Y); var end = new Point( To.Bounds.Left + ToAnchor.X, To.Bounds.Top + ToAnchor.Y); return (start, end); } }

关键点在GetEndpoints：连线不存绝对坐标，而是存「相对节点的锚点偏移」，绘制时实时算。这样节点一拖动，连线端点自动跟着变，不需要额外同步逻辑。这是流程图类项目里最省事的一种做法，也是拖动即时刷新能成立的前提。

3. 跑起来：从编译到拖动第一个节点

3.1 环境准备与编译

这项目是 .NET Framework 的 WinForm 工程，环境要求不高：

用 VS 打开.sln或.csproj，直接 F5 就能跑。如果拿到的是散装.cs文件，新建一个 WinForm 项目，把文件拖进去，注意把MainForm设为启动窗体。常见翻车点是目标框架选成了 .NET Core / .NET 5+，WinForm 在旧版 .NET Core 上支持不完整，建议直接选 .NET Framework 4.7.2 这类稳定版本。

3.2 双缓冲：拖动不闪的前提

跑起来第一件事，你会注意到拖动节点时画面不闪。这不是玄学，是双缓冲在起作用。WinForm 默认绘图是直接往屏幕上画，拖动时频繁重绘就会闪。解决办法是在窗体或画布控件上开双缓冲：

public class CanvasPanel : Panel { public CanvasPanel() { // 开启双缓冲，消除拖动闪烁 this.DoubleBuffered = true; // 重绘时先擦除背景再画，避免残影 this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true); this.UpdateStyles(); } }

DoubleBuffered = true是最省事的一行，但有时候不够，配合SetStyle里的三个标志更稳：AllPaintingInWmPaint让所有绘制都走OnPaint，UserPaint表示自己负责绘制，OptimizedDoubleBuffer启用优化过的双缓冲。这三个一起开，拖动时的闪烁基本就没了。

注意：如果你把绘图逻辑写在MainForm上而不是独立Panel，记得在 Form 构造函数里也开DoubleBuffered，否则一样会闪。

3.3 重绘触发：Invalidate 的用法

拖动时怎么让画面刷新？核心就一个方法：Invalidate()。它标记控件需要重绘，系统会在合适的时机调OnPaint。很多人以为要手动调Refresh()，其实Invalidate更轻量，Refresh是强制立即重绘，频繁调用反而卡。

private void OnMouseMove(object sender, MouseEventArgs e) { if (_draggingNode != null && e.Button == MouseButtons.Left) { // 更新节点位置 _draggingNode.Bounds = new Rectangle( e.X - _dragOffset.X, e.Y - _dragOffset.Y, _draggingNode.Bounds.Width, _draggingNode.Bounds.Height); // 只标记重绘，不强制立即刷新 this.Invalidate(); } }

_dragOffset是按下鼠标时记录的「鼠标点相对节点左上角的偏移」，拖动时用它保证节点不会跳到鼠标正下方。Invalidate()不带参数是重绘整个控件，如果节点多、画布大，可以传Rectangle只重绘脏区，性能会好一些。这个项目节点数量不大，全量重绘够用。

4. 核心实现拆解：绘制、命中检测与拖拽状态机

4.1 绘制流程：OnPaint 里到底画了什么

所有绘制都集中在OnPaint里，顺序很重要——先画连线再画节点，否则连线会盖住节点。整体结构是这样：

protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); var g = e.Graphics; // 抗锯齿，让线条和文字更平滑 g.SmoothingMode = SmoothingMode.AntiAlias; g.TextRenderingHint = TextRenderingHint.ClearTypeGridFit; // 1. 先画所有连线（在节点下层） foreach (var link in _links) { var (start, end) = link.GetEndpoints(); using (var pen = new Pen(Color.Gray, 2)) { g.DrawLine(pen, start, end); } DrawArrow(g, start, end); // 画箭头 } // 2. 再画所有节点（在上层） foreach (var node in _nodes) { DrawNode(g, node); } } private void DrawNode(Graphics g, FlowNode node) { // 选中状态用不同颜色高亮 var fillColor = node.IsSelected ? Color.LightSkyBlue : Color.White; using (var brush = new SolidBrush(fillColor)) using (var pen = new Pen(Color.SteelBlue, 2)) { g.FillRectangle(brush, node.Bounds); g.DrawRectangle(pen, node.Bounds); } // 居中绘制文本 using (var sf = new StringFormat { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center }) using (var font = new Font("微软雅黑", 10)) { g.DrawString(node.Text, font, Brushes.Black, node.Bounds, sf); } }

几个细节值得说：SmoothingMode.AntiAlias开抗锯齿，线条不会锯齿状；StringFormat的Alignment和LineAlignment都设成Center，文本才会在节点里居中；using包住Pen、Brush、Font这些 GDI+ 对象，是因为它们持有非托管资源，不释放会内存泄漏——这是 GDI+ 绘图最常见的坑之一。

4.2 命中检测：鼠标点到了哪个节点

鼠标按下时，得先判断点到了哪个节点。因为节点可能重叠，通常从后往前遍历（后画的在上层）：

private FlowNode HitTest(Point p) { // 从最后一个节点往前找，保证上层节点优先命中 for (int i = _nodes.Count - 1; i >= 0; i--) { if (_nodes[i].Contains(p)) return _nodes[i]; } return null; }

Contains就是前面模型里的Bounds.Contains(p)。这里有个容易忽略的点：如果节点是圆角或异形，Rectangle.Contains就不准了，得换成GraphicsPath.IsVisible。这个项目用的是矩形节点，所以直接矩形判断够用。命中检测的准确度直接决定拖拽手感，点偏一点就选不中，用户会觉得很别扭。

4.3 拖拽状态机：MouseDown / Move / Up 三件套

拖拽本质是个状态机，三个事件各管一段：

private FlowNode _draggingNode; private Point _dragOffset; private void OnMouseDown(object sender, MouseEventArgs e) { if (e.Button != MouseButtons.Left) return; var hit = HitTest(e.Location); if (hit != null) { _draggingNode = hit; // 记录鼠标相对节点左上角的偏移 _dragOffset = new Point(e.X - hit.Bounds.Left, e.Y - hit.Bounds.Top); // 更新选中状态 foreach (var n in _nodes) n.IsSelected = (n == hit); this.Invalidate(); } } private void OnMouseUp(object sender, MouseEventArgs e) { // 松开鼠标，结束拖拽 _draggingNode = null; }

MouseDown里做三件事：命中检测、记录偏移、更新选中态。MouseMove里更新位置并Invalidate（前面 3.3 已给）。MouseUp里把_draggingNode置空，状态机回到空闲。这套逻辑简单但完整，加连线、加框选都是在这个骨架上扩展。

提示：MouseMove事件触发非常频繁，里面别做重活。像重新计算所有连线端点这种，交给OnPaint在绘制时算，别在MouseMove里算。

5. 避坑与常见问题：拖动残影、连线错位、内存泄漏

5.1 拖动有残影，节点拖过留痕

现象：拖动节点时，旧位置留下一个淡淡的影子，越拖越多。原因：没开双缓冲，或者OnPaint里没先清背景。GDI+ 默认不会自动擦除上一帧。解决：确认DoubleBuffered = true且SetStyle里带了AllPaintingInWmPaint。如果还不行，在OnPaint开头手动g.Clear(BackColor)，但开了双缓冲后一般不需要。

5.2 连线端点不跟着节点走

现象：节点拖走了，连线还连在原来的位置，或者连线端点飘在节点外面。原因：连线存了绝对坐标，没跟着节点更新；或者锚点偏移算错了。解决：按 2.3 的做法，连线只存相对锚点，绘制时用GetEndpoints实时算。检查锚点偏移是不是相对节点左上角，别混用了绝对坐标。

5.3 拖久了内存一直涨

现象：反复拖动几分钟，任务管理器里进程内存持续上升，不回落。原因：Pen、Brush、Font、GraphicsPath这些 GDI+ 对象没释放。它们持有非托管句柄，GC 回收不及时。解决：所有 GDI+ 对象都用using包起来，或者手动Dispose()。尤其注意在OnPaint里 new 出来的对象，每次重绘都会创建一批，不释放很快就爆。

5.4 节点多了之后拖动卡顿

现象：节点超过几十个，拖动明显掉帧。原因：每次Invalidate()都全量重绘，且OnPaint里反复创建Pen、Font。解决：把Pen、Font这类不变的资源提到字段里复用，别在OnPaint里 new；Invalidate传脏区矩形，只重绘受影响区域；节点特别多时考虑分图层或虚拟化。

5.5 高 DPI 屏幕上文字模糊、坐标偏移

现象：在缩放 125% 或 150% 的屏幕上，节点文字发虚，鼠标点击位置和节点对不上。原因：WinForm 默认 DPI 感知没开，系统做了位图拉伸。解决：在app.manifest里声明 DPI 感知，或在Program.cs里调Application.SetHighDpiMode（.NET Core 及以上）。老版本 .NET Framework 可以在窗体构造函数里根据Graphics.DpiX手动缩放坐标。

6. 二次开发：加连线交互与序列化保存

拿到这套骨架后，最常被要求加的两个功能是「手动连线」和「保存/加载流程图」。这两个正好能检验你对前面数据模型和状态机的理解。

先说手动连线。思路是在拖拽状态机里加一个「连线模式」：按住某个键（比如 Shift）在节点上按下时，不进入拖拽，而是进入连线状态，记录起点节点；鼠标移动时画一条临时线跟着鼠标；在另一个节点上松开时，创建FlowLink并加入集合。

private FlowNode _linkStartNode; // 连线起点 private Point _linkCurrentPoint; // 连线终点（跟随鼠标） private void OnMouseDown(object sender, MouseEventArgs e) { var hit = HitTest(e.Location); if (hit != null && ModifierKeys == Keys.Shift) { // Shift + 左键：进入连线模式 _linkStartNode = hit; _linkCurrentPoint = e.Location; return; } // ... 原有拖拽逻辑 } private void OnMouseMove(object sender, MouseEventArgs e) { if (_linkStartNode != null) { _linkCurrentPoint = e.Location; this.Invalidate(); // 重绘临时连线 return; } // ... 原有拖拽逻辑 } private void OnMouseUp(object sender, MouseEventArgs e) { if (_linkStartNode != null) { var target = HitTest(e.Location); if (target != null && target != _linkStartNode) { _links.Add(new FlowLink { From = _linkStartNode, To = target, FromAnchor = new Point(_linkStartNode.Bounds.Width / 2, _linkStartNode.Bounds.Height), ToAnchor = new Point(target.Bounds.Width / 2, 0) }); } _linkStartNode = null; this.Invalidate(); return; } // ... 原有逻辑 }

临时连线在OnPaint里判断_linkStartNode != null时画一条虚线即可。锚点这里我用了「起点底部中点、终点顶部中点」，这是流程图最常见的连线方式，你也可以按节点相对位置动态选锚点，让连线更自然。

再说序列化。因为FlowNode和FlowLink之间有引用关系，直接 JSON 序列化会循环引用。常见做法是序列化时把连线拆成FromId/ToId，加载时再按 Id 重建引用：

public class LinkDto { public string FromId { get; set; } public string ToId { get; set; } } // 保存：节点直接序列化，连线转成 Id 对 var dto = new { Nodes = _nodes, Links = _links.Select(l => new LinkDto { FromId = l.From.Id, ToId = l.To.Id }).ToList() }; File.WriteAllText("flow.json", JsonConvert.SerializeObject(dto));

加载时先建节点字典Dictionary<string, FlowNode>，再遍历LinkDto把From/To接回去。这套「存 Id、加载重建」的模式，凡是带引用关系的图形数据都适用，值得记下来。

验证改造是否成功，我一般会走一遍固定流程：拖三个节点 → 连两条线 → 保存 → 关掉重开 → 加载，看节点位置、连线关系、选中态是否都对。有一次我偷懒没测加载，结果锚点偏移存的是绝对值，重开后连线全飘了，返工半小时。从那以后我每次改完数据模型，都强制走一遍「保存-重开-加载」这条链路，不管改动多小。希望这套拆解能帮到你，拿到源码先跑通，再按自己的业务往里加东西。

本文还有配套的精品资源，点击获取