图编辑研究所

X6 在 2020 年 11.22 正式对外开源，在这一年多内有了很多用户，同时也有一些贡献者参与到项目中来，但是还远远达不到一个活跃的开源社区的水平，我们最近也一直在探索怎么将社区建设得更好。

开始 在使用软件的过程中，我们经常会使用一些快捷键来提高效率，比如 Ctrl +C、Ctrl + V，同样，在流程图应用中，也需要一些快捷键来提高编辑效率。

开始 一个开箱即用的技术框架，一定会有完备的配套工具。X6 提供了大量的图编辑功能，它们基本上都是基于配置式，而且配置参数是经过大量业务实践出来的。

在手动连线的过程中，还需要处理一些交互细节，比如到达连接桩附近自动吸附、可连接元素的高亮显示等，幸运的是这些都不需要我们自己去实现，X6 提供了便利的配置方式帮我们解决这些问题。

很多图形都有连接桩的概念，连接桩是节点上固定的点，常用于连线。连接桩的使用方式非常灵活，本文只介绍最佳实践。

连线是 X6 中非常重要的一部分，X6 内置了很多实用的连线功能，也提供了优雅的扩展机制 ，这是相比于其他流程图框架占据绝对优势的地方。本文通过实现流程图的连线功能来一步步介绍 X6 的连线机制。

在流程图中我们需要通过拖拽交互往画布中添加节点，X6 不仅内置了强大的拖拽功能，还内置了很多常用的图形，接下来我们一起实现基础的流程图图形以及图形拖拽功能。

我们开始实现流程图的画布功能，从两个方面着手，第一个是画布的样式，包括网格和背景，第二个是画布的操作，包括平移和缩放。

流程图可以清晰的可视化展示组织、工作流等复杂层次结构。在后面的一系列文章中，将会从 0 到 1 完成一个流程图应用的开发，这篇文章主要是做技术选型。