之前总结资料时候，看到一个Qt实现流程的专栏，后面就想着参考这个项目和官方的【diagramscene】项目，自己再写一个流程图软件来总结学习下，于是就想到使用QGraphicsView来完成相关功能，再使用命令模式来优化使用过程，再通过XML保存和加载记录等。
耗时大半个月，终于完成；具体内容讲解会按功能，划分为多个文章，当前为整个内容导读。

导读

• • 开发软件版本
  • 获取资源文件
  • 案例程序界面
  • Gif运行示例
  • • 快捷键说明
  • 可执行程序下载
  • 参考案例

开发软件版本

开发软件：Qt Creator 5.13.1
使用库：XML . SVG

获取资源文件

经过多次的尝试，发现使用QGraphicsRectItem，或QGraphicsPathItem，或QGraphicsPixmapItem来实现流程图的过程，可选过程、决策、数据、等单元时过于复杂且样式难看，后来通过查看WPS的资源文件发现是直接使用的SVG文件,就可以使用 QGraphicsSvgItem类实现相关功能：
PNG参考路径:
WPS\Office\11.1.0.13703\office6\mui\default\resource\autoshape\tempRes32x32
SVG参考路径:
WPS\Office\11.1.0.13703\office6\mui\default\resource\autoshape\tempRes

注:案例在实现功能过程只使用了flowchart 文件夹中的要素，其实整个案例可以都使用svg文件包括连接线文本之类的，不过由于过于复杂就放弃了。

案例程序界面

界面整体使用 Fusion 样式，左侧流程控制单元使用 FlowLayout 布局能自适应宽度布局，右侧是整个流程显示区域:

具体功能实现主要是：
1.左侧按钮使用FlowLayout 布局，参考学习官方的FlowLayout案例；
2.实现把左侧 QToolButton 流程单元拖拽到右侧 QGraphicsView 内容中；
3.重构QGraphicsTextItem 实现文本内容显示 ，包括Html内容的显示
4.重构QGraphicsSvgItem 实现外接矩形的拖拽拉伸
5.重构QGraphicsLineItem 实现两个图元之间的连续，并跟随移动
6.实现图元拖拽时，图元对象之间的磁吸线功能
7.定义一个命令角色基类 ，定义个请求者角色对象，完成命令模式设计
8.生成多个命令对象，用于对界面删除图元，新增图元,连线图元等操作的执行与撤销动作
9.通过xml文件格式保存和读取历史流程记录
整个案例软件的功能简单，模块功能分明。充分的展示了项目开发工作中常用的一些功能很值得学习借鉴；
功能图解:

Gif运行示例

快捷键说明

画框选择拖拽
双击编辑本文
长按shift 加鼠标左键连线
选中后按delete删除
Ctrl加S 保存
Ctrl 加Z 撤销动作
Ctrl加Y 执行动作
按住鼠标中键拖拽

可执行程序下载

测试 QT 实现流程图案例的可执行程序 不是源码

参考案例

官方 diagramscene和FlowLayout 案例
Qt开发技术：QtSVG介绍、使用和Demo*
Qt （高仿Visio）流程图组件开发（一） 效果展示及基本开发框架构思*