[发明专利]基于Html5的流程图绘制方法、装置、计算机设备及存储介质

说明书

本发明公开了一种基于Html5的流程图绘制方法、装置、计算机设备及存储介质，所述方法包括客户端执行的如下步骤：客户端通过与服务端构建的SSH通道，实时接收服务端发送的绘制信息，并对绘制信息进行解析，得到若干个json结构的数据，实现快速从服务端获取用于构建流程图的数据，进而从每个json结构的数据中，获取数据实体和用于对数据实体进行关联的逻辑信息，再通过预设函数，在Html5画布中绘制每个数据实体对应的框架图，并基于逻辑信息，建立框架图之间的矢量连接，得到绘制信息对应的流程图，通过数据实体的逻辑信息和Html5画布，实现流程图的快速绘制，提高了流程图绘制的效率。

技术领域

本发明涉及数据处理领域，尤其涉及一种基于Html5的流程图绘制方法、装置、计算机设备及存储介质。

背景技术

在开发环境、测试环境和生产环境中，流程图/架构图/拓扑图属于系统设计、运维等环节的基础依据，在企业各领域尤其是技术领域有重要作用，如展示流程、架构等。因而，在有需要时，一般会对这些图件进行绘制，目前业内包括开源存在不少流程图绘制工具，例如ProcessOn、NCH ClickCharts Pro等。

然而，在实现本发明的过程中，发明人意识到现有的实现方式至少存入如下问题：目前业内流程图绘制工具，其较为臃肿冗余，占用资源较多，且难以直接集成到项目中，不能精确制作出符合要求的图件，一些传统工具，例如包括word、ppt、画图等，制作的架构图、流程图，形式不一或老旧，缺乏标准，或者最终形成一张静态图片，难以做到在线化实时展示，与生产库的关联性差，导致流程图绘制效率低。

发明内容

本发明实施例提供一种基于Html5的流程图绘制方法、装置、计算机设备和存储介质，以提高流程图绘制效率。

为了解决上述技术问题，本申请实施例提供一种基于Html5的流程图绘制方法，包括服务端执行的如下步骤：

在接收到客户端的流程图绘制请求时，获取所述流程图绘制请求中包含的数据筛选条件，并从数据库中获取所述数据筛选条件对应的源数据；

对所述源数据进行数据拼接，得到绘制信息；

基于websocket技术，构建与所述客户端的基于WebSocket连接的SSH通道；

基于所述SSH通道，将所述绘制信息发送给所述客户端。

可选地，所述基于websocket技术，构建与所述客户端的基于WebSocket连接的SSH通道包括：

建立与所述客户端的WebSocket连接，并使用WebSocket连接搭建SSH服务；

加载所述SSH服务的认证配置信息，等待所述客户端的连接请求；

在接收到客户端发送的携带认证信息的SSH连接请求时，将所述认证信息与所述认证配置信息进行匹配；

若所述认证信息与所述认证配置信息匹配成功，则响应所述SSH连接请求，生成与所述客户端之间的所述SSH通道。

可选地，在所述基于所述SSH通道，将所述绘制信息发送给所述客户端之后，所述基于Html5的流程图绘制方法还包括服务端执行的如下步骤：

若监控到所述源数据发生变化，则对变化的源数据重新拼接，得到更新数据；

根据所述更新数据生成更新绘制信息；

将所述更新绘制信息发送给所述客户端，以使所述客户端根据所述更新绘制信息，对流程图进行更新处理。

为了解决上述技术问题，本申请实施例提供一种基于Html5的流程图绘制方法，包括客户端执行的如下步骤：

通过与服务端构建的SSH通道，实时接收所述服务端发送的绘制信息；