简介压缩包Flow.rar提供了一份基于C#与GDI绘制类似Visio流程图的完整示例工程面向希望掌握自定义流程图、节点连线和交互布局的Windows桌面开发者重点解决从零构建图形化编辑器的常见问题。解压后包含JadaFlow.sln解决方案项目结构覆盖FlowData数据结构、FlowPlant布局生成、Icons节点图标资源以及绘图交互相关代码。全包共281个文件以179个png图标、32个cs源码、19个resources资源和10个resx资源文件为主辅以少量dll、exe和配置文件整体仅723KB体积紧凑、便于快速阅读。目前已有792人学习使用。通过学习该工程可以深入理解GDI在图形表面上的节点绘制、线条连接、事件处理、布局算法以及流程图的保存加载方法并且能了解与Visio文件格式交互的扩展思路适合作为C#图形编程进阶参考。1 用 C# 重画流程图GDI 才是那个“卡脖子”的地方用 C# 重画一张流程图真正麻烦的不是画线而是让节点、连线和数据模型在同一个坐标系里协同工作。Flow.rar 里打包的 JadaFlow 解决方案用 GDI 在 WinForms 里实现了一套接近 Visio 的节点图编辑器代码里能看到 FlowData、FlowPlant、JadaDiagramControl 这些工程恰好对应数据结构、布局引擎和画布控件三层。这套代码适合两种人一是想在自己的上位机或工控项目里内嵌一个轻量连线编辑器不打算引入 WPF 或第三方图表库二是想理解 GDI 命中测试、双缓冲重绘、序列化读取这些底层细节的人。下面从工程结构开始拆把绘图相关的核心参数和踩坑点都过一遍。2 从 Flow.rar 的结构拆出绘图核心节点、连线与画布2.1 解决方案里先分清数据、布局和控件三层Flow.rar 解压后JadaFlow.sln 里的工程并不是一坨代码。按典型拆分FlowData 管流程图的数据结构FlowPlant 管布局和自动排列JadaDiagramControl 管画布渲染。从文件名还能看到 FlowMain.Designer.cs 和一堆 GenerateResource.Cache、ResolveAssemblyReference.cache后者是编译中间产物直接删掉不影响重建。我在拿到这类源码包时会先按 csproj 引用顺序读一遍因为 GDI 流程图最容易出的问题就是数据模型和绘图控件耦合太深改一个节点位置就去整块重绘画布。你在自己团队里从零搭建时也建议按这个职责边界落盘。FlowData 层只保存节点和连线的逻辑坐标不引用 System.Drawing方便做序列化、单元测试和后续换渲染引擎FlowPlant 层负责根据节点关系生成坐标和计算布局输入是 FlowData输出也是 FlowDataJadaDiagramControl 层才接触 Graphics、鼠标事件和位图。这样当用户拖拽节点时画布控件只改 Bounds而布局器可以单独跑互不污染。下面的表展示了这三层在 JadaFlow 里大致对应的对象工程/目录职责关键类型或文件FlowData节点、连线数据结构和序列化FlowNode、FlowLink、FlowDocumentFlowPlant布局算法、节点坐标生成PlantEngine、LayoutContextJadaDiagramControlGDI 渲染、鼠标交互、视口变换DiagramControl、OnPaint从这份对应关系能看出来绘图控件不是最核心的真正决定编辑器上限的是 FlowData 的数据结构。节点至少要包含 Id、Text、Bounds、ShapeType连线要包含 From、To、锚点偏移和文本。很多项目做到后期没法加撤销重做就是因为变更节点位置时没有统一的“数据变更”入口而是直接在 Paint 里修改局部变量。2.2 Graphics 对象与坐标变换画布从哪里开始GDI 的入口是 System.Drawing.Graphics。它本身不是画布而是“绘制上下文”所有的 DrawLine、DrawRectangle、DrawString 都作用在它绑定的设备上。在 WinForms 里最常见的做法是重写 OnPaint从 PaintEventArgs.Graphics 拿上下文然后再套一层坐标变换protected override void OnPaint(PaintEventArgs e) { Graphics g e.Graphics; // 用逻辑像素作为画布单位避免高DPI下尺寸漂移 g.PageUnit GraphicsUnit.Pixel; // 打开抗锯齿让斜线、贝塞尔曲线和文字边缘平滑 g.SmoothingMode System.Drawing.Drawing2D.SmoothingMode.AntiAlias; g.TextRenderingHint System.Drawing.Text.TextRenderingHint.ClearTypeGridFit; // 把视图矩阵套上去缩放和平移只改viewMatrix不改节点坐标 g.Transform viewMatrix; DrawNodes(g); DrawLinks(g); }这里有一个关键细节PageUnit 默认是 Display在高 DPI 显示器上画出来的长度会被系统缩放导致你存下来的节点矩形和屏幕上看到的矩形不一致重新打开时节点位置全偏。我一般会显式设成 Pixel缩放只交给 Transform 里的 viewMatrix。viewMatrix 是一个 Matrix 对象用 ScaleTransform 和 TranslateTransform 组合而成。鼠标滚轮缩放时只需要重建这个矩阵然后 Invalidate() 触发重绘所有图形自动按新比例绘制。做视口变换时还要考虑一个反转函数。鼠标消息给的坐标是窗口坐标需要把 viewMatrix 取逆然后 TransformPoints才能得到画布坐标。下面的方法我放在 DiagramControl 里private PointF WindowToCanvas(Point pt) { Matrix invertedMatrix viewMatrix.Clone(); invertedMatrix.Invert(); Point[] pts new Point[] { pt }; invertedMatrix.TransformPoints(pts); return pts[0]; }这个逆矩阵不应该在每次鼠标移动时重新创建最好在 viewMatrix 变化时缓存。否则拖动节点时频繁调用 Clone 和 Invert一百个节点就能感觉到卡顿。这就是 C# 上位机开发里常说的循环操作和 UI 刷新互相抢时间问题GDI 场景下同样要避免。2.3 节点模型与命中测试先画数据再画形状节点不能只在 Paint 事件里画一张皮还要能被鼠标选中、拖动、连接。所以 FlowNode 至少要有 Id、Text、Bounds 和 ShapeType。命中测试最简单的方式是拿鼠标坐标逐个节点做 Contains 判断但对菱形、圆角矩形这些形状需要细化public class FlowNode { public string Id { get; set; } public string Text { get; set; } public RectangleF Bounds { get; set; } public int ShapeType { get; set; } // 0矩形 1菱形 2圆角矩形 public bool HitTest(PointF point) { if (ShapeType 1) { // 菱形用GraphicsPath构造多边形再用IsVisible做命中 PointF[] pts BuildDiamondPoints(Bounds); using (var path new System.Drawing.Drawing2D.GraphicsPath()) { path.AddPolygon(pts); return path.IsVisible(point); } } // 矩形和圆角矩形先用外接矩形兜底 return Bounds.Contains(point); } }从代码能看到矩形判断最省事菱形这种不规则形状要靠 GraphicsPath.IsVisible 来命中。这样做的好处是区域判断和绘制用的是同一份点集不会出现“画出来是菱形点击却是矩形”的偏差。需要注意 Bounds 以左上角为基准而不是中心点否则连线锚点、对齐功能都要额外换算。FlowData 这一层只保存逻辑坐标不保存画布上缩放后的像素坐标缩放是视图层的事两者混在一起会导致保存文件后再打开时节点位置全部乱掉。3 节点与连线的绘制参数形状、锚点、贝塞尔曲线和重绘优化3.1 形状绘制与样式参数流程图画面上矩形代表处理、菱形代表判断、圆角矩形代表开始或结束。GDI 绘制形状没有统一接口每种形状一组调用。下面是我常用的 DrawNode 方法参数直接对应 FlowNode 上的属性private void DrawNode(Graphics g, FlowNode node) { RectangleF r node.Bounds; using (var fillBrush new SolidBrush(node.FillColor)) using (var borderPen new Pen(node.BorderColor, node.BorderWidth)) { switch (node.ShapeType) { case 0: g.FillRectangle(fillBrush, r); g.DrawRectangle(borderPen, Rectangle.Round(r)); break; case 1: PointF[] pts BuildDiamondPoints(r); g.FillPolygon(fillBrush, pts); g.DrawPolygon(borderPen, pts); break; case 2: using (var path RoundedRectPath(r, 8f)) { g.FillPath(fillBrush, path); g.DrawPath(borderPen, path); } break; } using (var sf new StringFormat()) { sf.Alignment StringAlignment.Center; sf.LineAlignment StringAlignment.Center; g.DrawString(node.Text, node.Font, Brushes.Black, r, sf); } } }这里的参数选择值得说DrawRectangle 只能画水平矩形圆角矩形必须用 GraphicsPath且 Fill 和 Draw 走同一条 path否则圆角处会出现未填充的缝隙FillRectangle 和 DrawRectangle 的矩形若都用 RectangleF在某些 GDI 版本上会把边框画到矩形右边界外半像素导致边缘裁切。我用 Rectangle.Round(r) 把绘制区收敛到整数也是为了让边框粗细一致避免出现一边 1 像素一边 2 像素的效果。填充色和边框色不要让节点自己持有 Brush 和 Pen最好只存 Color 和 float 宽度绘制时临时创建并 Dispose。拖动节点时每帧都会调用 DrawNode如果 Brush 不释放几百次操作后 GDI 句柄就会耗光画布开始闪烁甚至白屏。这和 c# 循环数据采集中 UI 刷新卡顿类似通常不是 OnPaint 本身慢而是资源没释放。3.2 连线锚点从边界出发而不是从中心连线是两个节点之间最容易被忽略的地方。用节点中心连线线条会穿到图形内部所以必须计算锚点锚点就是连线与节点边界相交的位置。常见做法是按两个矩形中心的相对方向判断从哪个边出去private PointF GetConnectionAnchor(RectangleF bounds, PointF target) { float cx bounds.Left bounds.Width / 2f; float cy bounds.Top bounds.Height / 2f; float dx target.X - cx; float dy target.Y - cy; if (dx 0) return dy 0 ? new PointF(cx, bounds.Bottom) : new PointF(cx, bounds.Top); float slope Math.Abs(dy / dx); if (slope bounds.Height / bounds.Width) { return dy 0 ? new PointF(cx dx * (bounds.Height / 2f) / Math.Abs(dy), bounds.Bottom) : new PointF(cx - dx * (bounds.Height / 2f) / Math.Abs(dy), bounds.Top); } else { return dx 0 ? new PointF(bounds.Right, cy dy * (bounds.Width / 2f) / Math.Abs(dx)) : new PointF(bounds.Left, cy - dy * (bounds.Width / 2f) / Math.Abs(dx)); } }这段代码不是一个最优实现但能看出几个关键判断先排除 dx0 的垂直方向再用斜率与宽高比比较决定锚点落在左右边还是上下边。返回的坐标还要根据是入口节点还是出口节点做微调比如出口可以留 3 像素间距避免画笔顶端压住节点边框。箭头可以画在终点锚点前 6 像素的位置用三角函数算两侧箭头点这样箭头不会因为缩放进到节点里面。实际画连线时我一般用 DrawBezier让连线有类似 Visio 的平滑拐弯。控制点取从锚点沿连线方向延伸出的两个点控制距离取两个锚点直线距离的 0.4 倍。太短线会折得很尖太长会把分支线推出去。改成曲线后连线命中测试和箭头方向都需要按 Bezier 求导计算直线那一套不能直接用。3.3 重绘优化双缓冲与局部失效WinForms 下默认的 OnPaint 先擦背景再绘制节点一多就会闪。所以要在画布控件构造函数里打开双缓冲public DiagramControl() { SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true); }AllPaintingInWmPaint 告诉系统别先擦背景UserPaint 表示控件自己绘制OptimizedDoubleBuffer 开启内存画布。这三项组合就能解决大部分闪烁。如果还卡瓶颈通常在 DrawString 的文字排版上。可以在绘制文字时传入 StringFormat.GenericTypographic并关闭默认的格式处理一页文本越多效果越明显。还有一个更精细的优化拖动节点时不需要全量重绘。只重绘该节点移动前和移动后所在的矩形区域以及和它关联的连线区域。操作是先取旧 Bounds 和新 Bounds 做 Union再 Invalidate(region)。节点少于 500 个时这个优化看不出差别但到了上千节点的流程图上全量重绘会明显拖慢。提示如果重绘还是吃不满帧先检查是不是开了透明背景或复杂的阴影效果。GDI 没有 GPU 加速阴影半径越大重绘成本越高Visio 那套渐变效果只在导出图片时用编辑器运行时保持纯色。3.4 连线命中测试与分支表示连线也要能被选中、删除。直线可以用距离判断贝塞尔曲线需要采样或使用 GraphicsPath.IsOutlineVisible。我常用下面的方式using (var path new GraphicsPath()) { path.AddBezier(p1, c1, c2, p2); using (var hitPen new Pen(Color.Black, 6f)) { if (path.IsOutlineVisible(point, hitPen)) { selectedLink link; } } }这里 Pen 的宽度就是“捕获范围”。太窄只有 2 像素鼠标稍偏就选不中太宽会和节点命中测试抢点击。我一般用 6 像素作为编辑态的命中宽度绘制时仍用 1.5 像素。还要注意 GraphicsPath 上的 AddBezier 是一次性路径节点移动后控制点变化路径必须重建否则命中位置停留在旧曲线上。4 让节点动起来鼠标交互、层级布局与 Visio 互操作4.1 鼠标拖拽的状态机实现节点编辑器核心是鼠标事件。按下时做命中测试移动时更新节点位置抬起时结束并触发保存。代码如下private FlowNode dragNode; private PointF dragOffset; protected override void OnMouseDown(MouseEventArgs e) { PointF canvasPoint WindowToCanvas(e.Location); dragNode nodes.FirstOrDefault(n n.HitTest(canvasPoint)); if (dragNode ! null) { dragOffset.X canvasPoint.X - dragNode.Bounds.Left; dragOffset.Y canvasPoint.Y - dragNode.Bounds.Top; } base.OnMouseDown(e); } protected override void OnMouseMove(MouseEventArgs e) { if (dragNode null) return; PointF canvasPoint WindowToCanvas(e.Location); dragNode.Bounds.X canvasPoint.X - dragOffset.X; dragNode.Bounds.Y canvasPoint.Y - dragOffset.Y; Invalidate(); base.OnMouseMove(e); }关键点在 WindowToCanvas它把鼠标窗口坐标反算成画布坐标不这么做只要画布缩放不等于 100%拖动就会越拖越偏。按下时记录 dragOffset是为了避免鼠标点到节点左上角时把节点“吸”到鼠标位置。移动时不重新做命中测试而是直接用 dragNode 引用拖动结束后在 OnMouseUp 里清空 dragNode再通知 FlowData 保存一份变更快照为撤销重做留入口。这段逻辑看似简单但很多人写错在鼠标按下后直接改节点坐标而节点里又保存了布局器生成的坐标。布局器重新运行时会把刚拖好的节点又拉回去。所以拖拽期间要把节点标记为“已手动调整”布局器遇到这个标记就跳过。4.2 滚轮缩放与视图矩阵更新画布编辑器一定要支持缩放不然流程图大了没法看。滚轮缩放时要让鼠标所在位置保持不动否则视图会“飞走”。实现方法是在 Wheel 事件里取鼠标的窗口坐标换算成缩放前的画布坐标缩放后再调整平移量让同一个画布点依然落在鼠标下方protected override void OnMouseWheel(MouseEventArgs e) { PointF canvasBefore WindowToCanvas(e.Location); float scale e.Delta 0 ? 1.1f : 1 / 1.1f; viewMatrix.Scale(scale, scale, MatrixOrder.Append); PointF canvasAfter WindowToCanvas(e.Location); viewMatrix.Translate(canvasAfter.X - canvasBefore.X, canvasAfter.Y - canvasBefore.Y, MatrixOrder.Append); Invalidate(); }这里有两个容易踩的坑。一是 MatrixOrder.Append 和 Prepend 的区别WindowToCanvas 用的是逆矩阵顺序错了缩放中心就会偏。二是缩放比例不要用固定 1.1 乘到底建议设定最小 0.2、最大 5 的限制防止用户滚到节点只剩一个像素。缩放过小的时候文字、边框和命中区域要按统一比例缩小否则视觉上已经看不清的节点还是占很大的点击范围。4.3 FlowPlant 布局算法分层、排序、防重叠布局层不是花瓶。FlowPlant 的作用是把一组没有坐标的节点排布成接近 Visio 自动布局的效果。最实用的算法是 BFS 拓扑分层从源节点开始标第 0 层把出边指向的节点放第 1 层以此类推。下面是一个最简可跑的版本var layer new Dictionarystring, int(); foreach (var id in nodeIds) layer[id] 0; bool changed true; while (changed) { changed false; foreach (var link in links) { if (layer.ContainsKey(link.From) !layer.ContainsKey(link.To)) { layer[link.To] layer[link.From] 1; changed true; } } } float y 0; foreach (var group in layer.GroupBy(kv kv.Value).OrderBy(g g.Key)) { float x 0; foreach (var kv in group.OrderBy(kv kv.Key)) { nodes[kv.Key].Bounds.X x; nodes[kv.Key].Bounds.Y y; x nodeWidth horizontalSpacing; } y nodeHeight verticalSpacing; }这个分层算法 50 行内能写完但可能产生大量连线交叉。想减少交叉需要在分层后对同层节点按“下一层连接位置的中位数”排序这也是 Visio 使用的启发式之一。实际项目中我会先跑拓扑分层再做两轮同层排序最后把结果返回给 FlowData。布局执行频率不能高不要在节点属性变化时每次全量跑用一个脏标记批量修改完成后调用一次布局器。如果你收到的是快速排序流程图、用户管理模块流程图这种工作场景节点不会超过 100 个这个算法足够快。要是节点到了几千个就该考虑把布局放到后台 Task 里计算算完再一次性刷新。4.4 与 Visio 互操作读 VSDX 的三个层次很多人拿到这个资源是冲着“c# 与 visio”这个标签来的但需要区分三个层次避免一开始就走偏。最浅层是导出图片。把 FlowData 画到一张 Bitmap 上再保存为 PNGVisio 可以直接插入图片。中间层是通过剪贴板交换数据在 C# 里往 Clipboard 放一段 XML 或 CSVVisio 打开时用“插入→对象”或者“选择性粘贴”识别。最深层的做法是读真正的 VSDX 文件。VSDX 本质是 Open Packaging Convention 的 ZIP 包内部是 XML 文档。用 System.IO.Packaging 可以打开主文档页面几何定义在 /visio/pages/page1.xml 里形状在 pageContents1.xml 里。拿下面这段代码可以确定文件是不是 VSDXusing (var archive ZipFile.OpenRead(filePath)) { bool hasPackage archive.GetEntry(_rels/.rels) ! null; bool hasPage archive.GetEntry(visio/pages/pages.xml) ! null; if (hasPackage hasPage) { // 继续解析pageContents中的Shape节点 } }大多数情况做到中间层就够。完整解析 VSDX 的形状母版、图层、保护公式非常费时而且 Visio 的画布坐标系单位、文本样式仍要单独适配。在 Flow.rar 的场景里建议先用自己的 XML 格式保存再导出图片和 CSV 给 Visio 用等确实有双向编辑需求再引入 Open XML SDK。这样风险最小交付最快。5 把流程图保存下来序列化版本迁移和图片导出5.1 用 XML 序列化节点坐标和连线关系画布再好看也要落到文件里。GDI 流程图项目最常用的是 XML 序列化搭配 XmlSerializer 就够用。先定义文档结构[Serializable] public class FlowDocument { public int Version { get; set; } public ListFlowNode Nodes { get; set; } public ListFlowLink Links { get; set; } }FlowNode 和 FlowLink 的字段保持简单Bounds 可以直接存 X、Y、Width、Height 四个独立属性。后者对 XmlSerializer 更友好后期加字段也不会破坏已有文件。保存时调用 XmlSerializer.Serialize加载时反序列化随后根据 Version 做字段迁移using (var fs File.OpenRead(flow.xml)) { var xs new XmlSerializer(typeof(FlowDocument)); var doc (FlowDocument)xs.Deserialize(fs); MigrateDocument(doc); }MigrateDocument 里做旧版本兼容。5.2 版本迁移技巧版本迁移的核心原则是加载时不容忍未知字段但保存时严格控制。我在 FlowData 的 Version 上采用递增整数遇到旧版文件先补默认值再重算连线的锚点坐标。对于新增的必填字段用可空类型空的话用默认布局器重排对于删除的字段直接忽略并写到日志里。这样用户旧图打开后不会白屏只是部分样式退化。5.3 导出高清图片和打印导出图片可以复用 OnPaint 里的绘制方法区别只是 Graphics 绑定到 Bitmapusing (var bmp new Bitmap(width, height)) using (var g Graphics.FromImage(bmp)) { g.SmoothingMode SmoothingMode.AntiAlias; g.TextRenderingHint TextRenderingHint.AntiAlias; DrawAll(g); bmp.Save(flow.png, ImageFormat.Png); }导出时不要直接把控件宽度当输出尺寸最好按像素密度生成 2 倍图避免打印或汇报时发虚。打印用 PrintDocument 时同理贝塞尔曲线、文字和抗锯齿在打印端会重新渲染不需要把屏幕像素硬塞给打印机。本文还有配套的精品资源点击获取