CN117289834A - 一种基于html原生表格的流程图绘制方法 - Google Patents

Abstract

本申请涉及流程图设计的技术领域，尤其是涉及一种基于HTML原生表格的流程图绘制方法，方法包括：响应于流程图绘制请求，显示HTML原生表格，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，当检测到节点添加信息时，则控制目标单元格生成目标节点，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制。通过独特且符合直觉的交互操作设计，通过简单的逻辑操作和简单的交互性提示进行流程图绘制，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，通过表格和“锚点”辅助流程图的绘制，便于用户快速绘制出规整美观的流程图，降低了绘制流程图的操作复杂度。

Description

一种基于HTML原生表格的流程图绘制方法

技术领域

本申请涉及流程图设计的技术领域，尤其是涉及一种基于HTML原生表格的流程图绘制方法。

背景技术

在实际应用过程中，用户绘制流程图的需求比较高，例如，利用流程图进行展示高校课程体系、审批流程配置、工艺流程配置等。针对各种各样的需求而言，用户一般采用第三方框架或组件来完成，例如，专门针对工作流的Activity、Flowable框架，还有前端专门绘制工作流的各种开源组件工具。

这些框架和组件，往往都有大而全的功能特点，可以绘制类图、流程图、泳道图、组织结构图等众多的图表和图形，甚至可以自定义画出任何图形，并导出PNG、JPG等常见格式。但是，对于小型的流程配置需求，上述框架或组件都太过复杂，增加了额外的学习成本，使得在绘制流程图时操作复杂。

因而，如何降低绘制流程图的操作复杂度是本领域技术人员亟待解决的问题。

发明内容

本申请的目的是提供一种基于HTML原生表格的流程图绘制方法，用于解决以上至少一项技术问题。

本申请的上述发明目的是通过以下技术方案得以实现的：

第一方面，本申请提供一种基于HTML原生表格的流程图绘制方法，采用如下的技术方案：

一种基于HTML原生表格的流程图绘制方法，包括：

响应于流程图绘制请求，显示HTML原生表格，其中，所述HTML原生表格包括：单元格区域；

当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过所述添加节点的提示输入节点添加信息；

当检测到节点添加信息时，则在所述目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于所述连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。

通过采用上述技术方案，响应于流程图绘制请求，显示HTML原生表格，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，当检测到节点添加信息时，则在目标单元格生成目标节点，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。通过独特且符合直觉的交互操作设计，在没有设置工具栏的情况下，零学习成本完成绘制不带逻辑判断的流程图，用户可通过简单的逻辑操作和简单的交互性提示，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，与此同时，通过表格和“锚点”辅助流程图的绘制，能够便于用户快速绘制出规整美观的流程图，降低了绘制流程图的操作复杂度。

本申请在一较佳示例中可以进一步配置为：所述当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示同时，还包括：

基于所述目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格；

判断每一所述行关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除行的提示；

判断每一所述列关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除列的提示。

本申请在一较佳示例中可以进一步配置为：所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之后，还包括：

当检测到光标移动至所述目标节点处时，则控制所述目标节点显示多维操作的提示，其中，所述多维操作包括：移动节点、删除节点、编辑节点和调整节点大小。

本申请在一较佳示例中可以进一步配置为：所述当检测到光标移动至所述单元格区域中所述目标节点处时，则控制所述目标节点显示多维操作的提示之后，还包括：

当检测到删除节点请求时，则将所述目标节点删除；

当检测到调整节点大小请求时，则基于所述调整节点大小请求对所述目标节点进行初始大小调整，得到初始调整后的第一目标节点；基于所述第一目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照调整前的所述目标节点的大小进行显示；当不存在节点覆盖时，则按照所述第一目标节点的大小进行显示；

当检测到移动节点请求时，则基于所述移动节点请求对所述目标节点进行初始移动，得到初始移动后的第二目标节点；基于所述第二目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照移动前的所述目标节点的位置进行显示；当不存在节点覆盖时，则按照所述第二目标节点的位置进行显示；

当检测到编辑节点请求时，则获取所述目标节点对应的编辑信息，基于所述编辑信息替换所述目标节点的原始内容，得到编辑节点后的第三目标节点，并按照所述第三目标节点的内容进行显示。

本申请在一较佳示例中可以进一步配置为：所述当不存在节点覆盖时，则按照所述第二目标节点的位置进行显示，包括：

当不存在节点覆盖时，判断所述目标节点是否存在连线，当不存在连线时，则按照所述第二目标节点的位置进行显示；

当存在连线时，则按照所述第二目标节点的位置进行显示，并获取所述目标节点的原始位置，基于所述原始位置和所述第二目标节点的位置进行连线调整，以使得目标节点移动时连线随之调整。

本申请在一较佳示例中可以进一步配置为：所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之前，还包括：

当检测到添加节点的点击指令时，获取所述目标节点的添加节点方式，其中，所述添加节点方式包括：默认方式和自定义方式；

基于所述添加节点方式，确定与所述添加节点方式对应的节点添加项，并在界面上显示所述节点添加项，其中，不同的添加节点方式所对应的节点添加项存在差异。

本申请在一较佳示例中可以进一步配置为：

所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之后，还包括：

当检测到编辑节点请求时，获取所述目标节点对应信息关联指令；

响应于所述信息关联指令，获取关联信息和关联类型，按照所述关联类型，将所述目标节点与所述关联信息进行关联。

第二方面，本申请提供一种基于HTML原生表格的流程图绘制装置，采用如下的技术方案：

一种基于HTML原生表格的流程图绘制装置，包括：

响应显示模块，用于响应于流程图绘制请求，显示HTML原生表格，其中，所述HTML原生表格包括：单元格区域；

节点添加显示模块，用于当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过所述添加节点的提示输入节点添加信息；

流程图绘制模块，用于当检测到节点添加信息时，则在所述目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于所述连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。

第三方面，本申请提供一种电子设备，采用如下的技术方案：

至少一个处理器；

存储器；

至少一个应用程序，其中至少一个应用程序被存储在存储器中并被配置为由至少一个处理器执行，所述至少一个应用程序配置用于：执行上述的基于HTML原生表格的流程图绘制方法。

第四方面，本申请提供一种计算机可读存储介质，采用如下的技术方案：

一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令所述计算机执行上所述的基于HTML原生表格的流程图绘制方法。

综上所述，本申请包括以下至少一种有益技术效果：

1.响应于流程图绘制请求，显示HTML原生表格，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，当检测到节点添加信息时，则在目标单元格生成目标节点，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。通过独特且符合直觉的交互操作设计，在没有设置工具栏的情况下，零学习成本完成绘制不带逻辑判断的流程图，用户可通过简单的逻辑操作和简单的交互性提示，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，与此同时，通过表格和“锚点”辅助流程图的绘制，能够便于用户快速绘制出规整美观的流程图，降低了绘制流程图的操作复杂度；

2.基于目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格，然后，判断每一行关联单元格内是否存在节点，当均不存在节点时，则控制目标单元格显示删除行的提示，与此同时，判断每一列关联单元格内是否存在节点，当均不存在节点时，则控制目标单元格显示删除列的提示。当检测到用户的光标停留在某空行或者空列上时，显示删除行或删除列的提示，以便于用户可通过按钮式操作来快速实现删除行或删除列的操作，避免繁琐的菜单选择和操作步骤，提高操作效率。

附图说明

图1是本申请其中一实施例的一种基于HTML原生表格的流程图绘制方法的流程示意图；

图2是本申请其中一实施例的系统架构的示意图；

图3是本申请其中一实施例的系统结构中实例操作的示意图；

图4是本申请其中一实施例的添加节点操作的示意图；

图5是本申请其中一实施例的删除行和列的示意图；

图6是本申请其中一实施例的目标节点显示多维操作的提示的示意图；

图7是本申请其中一实施例的对目标节点进行多维操作的流程示意图；

图8是本申请其中一实施例的目标节点进行信息关联的示意图；

图9是本申请其中一实施例的绘制完成的高校课程体系流程图的示意图；

图10是本申请其中一实施例的一种基于HTML原生表格的流程图绘制装置的结构示意图；

图11是本申请其中一实施例的一种电子设备的结构示意图。

具体实施方式

以下结合图1至图11对本申请作进一步详细说明。

本具体实施例仅仅是对本申请的解释，其并不是对本申请的限制，本领域技术人员在阅读完本说明书后可以根据需要对本实施例做出没有创造性贡献的修改，但只要在本申请的范围内都受到专利法的保护。

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，如无特殊说明，一般表示前后关联对象是一种“或”的关系。

相关技术中图表绘制工具常常采用Canvas或SVG技术，来实现绘制复杂图表的功能，以使用最广泛的draw.io为例：该软件功能强大，可以绘制类图、流程图、泳道图、组织结构图等众多的图表和图形，甚至可以自定义画出任何图形，并导出PNG、JPG等常见格式。然而，相关技术中的图表绘制工具功能繁多、操作复杂，用户需要付出一定的学习成本才能够熟练使用，与此同时，相关技术中的图表绘制工具使用场景单一，仅能够在绘图完成之后再进行图像导出，该工具无法嵌入网页、无法展示动态数据并进行交互展示。

为了解决相关技术所中存在的技术问题，本申请实施例提供了一种基于HTML原生表格的流程图绘制方法，相较于相关技术而言，本申请实施例的优点如下：（1）不设置传统的“工具栏”：通过交互性的设计，根据用户鼠标所在的位置，动态显示当前可以进行的操作，即：将用户的视觉关注点和即将进行的操作关联起来，在减少学习成本的同时，还更符合操作直觉。（2）仅使用“左键点击”和“移动光标”两种鼠标操作，通过颜色变化、动画效果等细节，强化操作反馈，顺应常见的WEB交互习惯，提升操作“手感”。（3）通过锚点实现连线：在减少画线复杂度的同时，限制画线的自由度，用户更容易画出“规整”的连线。（4）用户可通过简单引入和初始化后，即可将本空间嵌入到项目中。（5）通过传入配置选项，可以自定义界面样式、文字信息、节点渲染、事件处理（比如自定义添加节点的弹窗）等内容，根据实际需要，扩展更多符合当前使用场景的功能。

下面结合说明书附图对本申请实施例作进一步详细描述。

本申请实施例提供了一种基于HTML原生表格的流程图绘制方法，由电子设备执行，该电子设备可以为服务器也可以为终端设备，其中，该服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云计算服务的云服务器。终端设备可以是智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此，该终端设备以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请实施例在此不做限制，如图1所示，该方法包括步骤S101、步骤S102以及步骤S103，其中：

步骤S101：响应于流程图绘制请求，显示HTML原生表格，其中，HTML原生表格包括：单元格区域。

对于本申请实施例，当客户存在流程图绘制需求时，在界面点击流程图绘制选项后，会触发流程图绘制请求，因而，电子设备响应于流程图绘制请求，在界面上显示HTML原生表格，其中，以HTML原生表格的形式呈现绘制流程图的区域，便于用户通过简单且符合直觉的操作逻辑进行流程图绘制，相较于常规的绘图工具而言，在初次使用进行绘图时，降低了学习操作的学习成本，与此同时，HTML原生表格包括：单元格区域、表头区域、模式切换区域和行列添加区域。利用HTML原生表格呈现的流程图绘制界面是依靠于底层的系统架构实现的，系统架构的具体实现方式为：基于HTML原生表格的流程图绘制系统包括：系统根类、表格组件、单元格组件、表头组件、节点组件和锚点组件，其中，系统根类作为总控制器，负责初始化实例、读取和渲染数据和配置项，以及控制各个子组件的逻辑交互和事件传递等功能；表格组件作为图表的基础框架，负责渲染和控制表格相关的单元格、表头、节点等子组件；表格中的每一个单元格均对应一个单元格组件，单元格组件用于控制单元格相关的合并、节点控制、节点相关操作按钮等；表头组件为单元格组件的拓展类，用于显示表头内容，控制表头样式和内容的渲染；节点组件依托于单元格组件创建，用于控制节点的样式、内容渲染、编辑、移动、调整大小等；HTML原生表格中每一单元格和节点上均会设置有锚点，锚点组件控制锚点的定位、显示隐藏，画线时与鼠标的交互等。为了能够更加清晰地展示基于HTML原生表格的流程图绘制系统，如图2所示为该底层的系统架构的系统架构图，其中，TableFlowGraph实例为系统根类初始化的实例，作为“事件总线”，当各个子组件触发交互事件后，会通知当前的TableFlowGraph实例，实例会处理这些事件并调用相应的回调函数；表格TableController代表表格组件；单元格TableCell代表单元格组件；表头单元格TableHeaderCell代表表头组件；节点Node代表节点组件；锚点Anchor代表锚点组件；连线Line代表两节点之间的连线；用户界面UI代表用户在进行流程图绘制时所看到和使用的界面。本申请实施例中底层操作的核心机制是事件的传递和控制，它实现了各种编辑操作，在TableFlowGraph类初始化时，创建一个实例作为“事件总线”，当各个子组件触发交互事件后，会通知当前的TableFlowGraph实例，然后实例会处理这些事件并调用相应的回调函数。以“添加节点”事件为例，来说明事件的处理流程，如图3所示，当用户点击单元格的“添加节点”按钮时，单元格组件TableCell会将事件发送给TableFlowGraph实例。TableFlowGraph实例在接收到事件后，会检查当前选项中是否设置了自定义的添加节点方法，如果设置了自定义的添加节点方法，就会调用该方法来通过外部方式创建节点；如果没有设置自定义的添加节点方法，则会弹出内置的添加节点弹窗来创建节点。无论哪种方式，最终都会返回新创建节点的数据。

步骤S102：当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过添加节点的提示输入节点添加信息。

对于本申请实施例，用户在界面上绘制流程图的主体区域为单元格区域，用户按照自己的需求在单元格区域内添加节点、添加节点之间的连线，完成流程图的绘制工作。为了提升用户体验感，本申请实施例在用户绘制流程图的过程中采用了交互响应的方式，用户可以直接与界面进行互动，使流程图绘制过程更加直观和易于操作，从而提高用户体验，因而，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，显示添加节点的操作能够使得流程图的绘制过程更加高效，针对控制光标所在目标单元格显示添加节点的提示的具体呈现形式，如图4所示，用户可在界面上通过简单点击并输入信息的方式就能够实现添加节点的操作。

步骤S103：当检测到节点添加信息时，则在目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。

对于本申请实施例，用户在界面上点击添加节点的按钮后，在界面上会显示创建目标节点所需要填写的信息，用户可根据流程图绘制的需求进行信息填写，当用户填写完成相关信息并点击提交后，电子设备会检测到用户提交的结点添加信息，并控制电子设备在目标单元格生成目标节点，目标节点显示的内容为节点添加信息，其中，目标节点为用户在绘制流程图的过程中创建的任意一个节点，节点添加信息包括但不限于：节点名称、节点类型，为了便于用户区分节点类型，在界面中针对不同的节点类型采用不同的颜色进行呈现。在本申请实施例中，基于HTML原生表格进行流程图绘制，在HTML原生表格中单元格之间是相邻的，为了便于绘制节点之间的连线，通常情况下生成的目标节点比目标单元格小，以便于留出部分空间来绘制两节点之间的连线。当然，目标节点的大小用户可以根据自身需求调整大小，对此，本申请实施例不再进行限定。

在绘制流程图的过程中，节点之间的连接关系也起着至关重要的作用，即，节点之间的连线可以表示时序或者从属关系，在本申请实施例中，用户可通过在界面上点击单元格或者节点上的锚点来进行连线绘制，用户在界面上绘制连线的操作会作为连线添加信息发送至电子设备。因而，当电子设备检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制，其中，根据单元格和节点的位置，生成呈网格分布的“锚点”，通过连接各个“锚点”来实现画线，在降低画线复杂度的同时，也使画出的折线更规整。通过独特且符合直觉的交互操作设计，在没有设置工具栏的情况下，零学习成本完成绘制不带逻辑判断的流程图，用户可通过简单的逻辑操作和简单的交互性提示，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，与此同时，通过表格和“锚点”辅助流程图的绘制，能够便于用户快速绘制出规整美观的流程图。本申请实施例中的流程图绘制方法，能够在网页端实现基于HTML原生表格的流程图的编辑、保存、展示、嵌入网页元素等功能。

可见，在本申请实施例中，响应于流程图绘制请求，显示HTML原生表格，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，当检测到节点添加信息时，则在目标单元格生成目标节点，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。通过独特且符合直觉的交互操作设计，在没有设置工具栏的情况下，零学习成本完成绘制不带逻辑判断的流程图，用户可通过简单的逻辑操作和简单的交互性提示，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，与此同时，通过表格和“锚点”辅助流程图的绘制，能够便于用户快速绘制出规整美观的流程图，降低了绘制流程图的操作复杂度。

进一步的，为了避免繁琐的菜单选择和操作步骤，提高操作效率，在本申请实施例中，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示同时，还包括：

基于目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格；

判断每一行关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除行的提示；

判断每一列关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除列的提示。

对于本申请实施例，用户在绘制流程图的过程中，常常会存在删除行和删除列的需求，为了能够提升用户的绘图体验，当检测到用户的光标停留在某空行或者空列上时，可以显示删除行或删除列的提示，以便于用户可通过按钮式操作来快速实现删除行或删除列的操作，避免繁琐的菜单选择和操作步骤，提高操作效率，其中，删除行和删除列的提示，如图5所示，以按钮的形式进行呈现。

为了避免用户由于操作失误删除存在目标节点的行和列，对用户绘制流程图造成影响，因而，在本申请实施例仅针对空白行和空白列显示删除行或删除列的提示。具体的，当光标移动至目标单元格时，基于目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格，其中，行关联单元格为与目标单元格在同一行内的单元格，列关联单元格为与目标单元格在同一列的单元格。然后，判断每一行关联单元格内是否存在节点，当均不存在节点时，表征目标单元格所在行为空白行，则控制目标单元格显示删除行的提示，删除行的提示以按钮的形式展示，以便于用户能够通过点击按钮的方式快速删除空白行；当至少一个行关联单元格内存在节点时，表征目标单元格所在行存在已创建节点，直接删除该行单元格会导致流程图中目标节点缺失，则控制目标单元格不显示删除行的提示。与此同时，判断每一列关联单元格内是否存在节点，当均不存在节点时，表征目标单元格所在列为空白列，则控制目标单元格显示删除列的提示，删除列的提示以按钮的形式展示，以便于用户能够通过点击按钮的方式快速删除空白列；当至少一个列关联单元格内存在节点时，表征目标单元格所在列存在已创建节点，直接删除该列单元格会导致流程图中目标节点缺失，则控制目标单元格不显示删除列的提示。优选的，在基于HTML原生表格的流程图绘制界面中，限制删除行和删除列的位置，仅能够删除位于最底部的行和位于最右侧的列，即，在控制显示删除列的提示和删除列的提示的前，优先判断行和列所在位置。删除位于最底部的行和位于最右侧的列通常不会影响流程图的主体内容，可以保持流程图的完整性和连贯性，并避免误删除其他重要的行，减少操作错误。

可见，在本申请实施例中，基于目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格，然后，判断每一行关联单元格内是否存在节点，当均不存在节点时，则控制目标单元格显示删除行的提示，与此同时，判断每一列关联单元格内是否存在节点，当均不存在节点时，则控制目标单元格显示删除列的提示。当检测到用户的光标停留在某空行或者空列上时，显示删除行或删除列的提示，以便于用户可通过按钮式操作来快速实现删除行或删除列的操作，避免繁琐的菜单选择和操作步骤，提高操作效率。

进一步的，为了使得用户可以根据需要自由地调整流程图中的节点，使流程图更加符合实际需求，提高用户体验，在本申请实施例中，当检测到节点添加信息时，则在目标单元格生成目标节点之后，还包括：

当检测到光标移动至目标节点处时，则控制目标节点显示多维操作的提示，其中，多维操作包括：移动节点、删除节点、编辑节点和调整节点大小。

对于本申请实施例，在流程图绘制的过程中，不仅需要创建节点、创建连线，通常还会针对已经创建完成的目标节点进行一系列的操作，例如，移动节点、删除节点、编辑节点和调整节点大小。因而，当检测到光标移动至目标节点处时，则控制目标节点显示多维操作的提示，其中，多维操作包括：移动节点、删除节点、编辑节点和调整节点大小，多维操作的提示为在界面上显示各种操作的按钮。提供节点的移动、删除、编辑和调整大小的功能，使得用户可以根据需要自由地调整流程图中的节点，使其更加符合实际需求，提高用户体验，通过编辑和删除节点，用户可以纠正绘制过程中的错误，减少流程图的错误率。如图6所示，显示了目标节点的多位操作提示，其中，目标节点的四个角显示的“移动”、“删除”、“编辑”、“调整大小”四个按钮的位置，点击“移动”按钮后，控制目标节点进行移动；点击“调整大小”按钮，拖拽目标节点实现节点大小的调整；点击“删除”按钮后，将目标按钮从界面中删除；点击“编辑”按钮时，用户可自行设定目标节点内所显示的内容。

可见，在本申请实施例中，当检测到光标移动至目标节点处时，则控制目标节点显示多维操作的提示，其中，多维操作包括：移动节点、删除节点、编辑节点和调整节点大小，提供节点的移动、删除、编辑和调整大小的功能，使得用户可以根据需要自由地调整流程图中的节点，使其更加符合实际需求，提高用户体验。

进一步的，为了提高用户体验，在本申请实施例中，如图7所示，当检测到光标移动至单元格区域中目标节点处时，则控制目标节点显示多维操作的提示之后，还包括：步骤SA-步骤SD，其中：

步骤SA：当检测到删除节点请求时，则将目标节点删除。

对于本申请实施例，用户在界面上点击“删除”按钮后，电子设备会检测到删除节点请求，然后，将目标节点删除从界面删除，通过点击按钮删除的方式，可以避免繁琐的菜单选择和操作步骤，提高了删除节点的操作效率。与此同时，在删除节点后，还可以将与目标节点相连接的连线删除，避免连线悬空或连接错误，以保持流程图的完整性和连贯性，并且在删除节点的同时删除与之连接的连线，可以一次性完成两个操作，提高操作效率。

步骤SB:当检测到调整节点大小请求时，则基于调整节点大小请求对目标节点进行初始大小调整，得到初始调整后的第一目标节点；基于第一目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照调整前的目标节点的大小进行显示；当不存在节点覆盖时，则按照第一目标节点的大小进行显示。

对于本申请实施例，用户在界面上点击“调整节点大小”按钮后，电子设备会检测到调整节点大小请求，然后，基于调整节点大小请求对目标节点进行初始大小调整，得到初始调整后的第一目标节点，即，拖拽目标节点实现节点大小的调整，其中，初始调整后的第一目标节点为按照用户拖拽所调整大小后的结点。然而，在调整目标节点大小时，可能会存在初始调整后的第一目标节点覆盖其他目标节点，导致流程图的混乱和不清晰，影响用户的理解和操作，因而，基于第一目标节点进行节点覆盖诊断，得到节点覆盖诊断结果，其中，通过节点覆盖诊断，可以确保节点大小的调整不会导致节点之间的重叠，从而保持流程图的清晰度和可读性。当不存在节点覆盖时，则按照第一目标节点的大小进行显示，可以使得流程图更加准确地反映实际的节点大小和布局；当存在节点覆盖时，则按照调整前的目标节点的大小进行显示，以避免节点之间出现遮盖的情况。针对节点覆盖诊断的方式有多种，本申请实施例不再进行限定，在一种可实现的方式中，检测第一目标节点与其他目标节点的边界框是否发生重叠或碰撞；当存在重叠或碰撞，则确定存在节点覆盖；否则，确定不存在节点覆盖。在另一种可实现方式中，使用空间数据结构，例如矩形树、四叉树等，查询与第一目标节点相交或重叠的目标节点；如果存在相交或重叠的目标节点，则确定存在节点覆盖；否则，确定不存在节点覆盖。

步骤SC:当检测到移动节点请求时，则基于移动节点请求对目标节点进行初始移动，得到初始移动后的第二目标节点；基于第二目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照移动前的目标节点的位置进行显示；当不存在节点覆盖时，则按照第二目标节点的位置进行显示。

对于本申请实施例，用户在界面上点击“移动”按钮后，电子设备会检测到移动节点请求，然后，基于移动节点请求对目标节点进行初始移动，得到初始移动后的第二目标节点，即，拖拽目标节点实现节点位置的移动，其中，初始移动后的第二目标节点为按照用户拖拽移动后的结点。然而，在移动目标节点时，可能会存在初始移动后的第二目标节点覆盖其他目标节点，导致流程图的混乱和不清晰，影响用户的理解和操作，因而，基于第二目标节点进行节点覆盖诊断，得到节点覆盖诊断结果，其中，通过节点覆盖诊断，可以确保目标节点的移动不会导致节点之间的重叠，从而保持流程图的清晰度和可读性。当不存在节点覆盖时，则按照第二目标节点的位置进行显示，可以使得流程图更加准确地反映节点的实际位置；当存在节点覆盖时，则按照移动前的目标节点的位置进行显示，以避免节点之间出现遮盖的情况。针对节点覆盖诊断的方式有多种，本申请实施例不再进行限定，当然，可以采用与上述调整节点大小时相同的节点覆盖诊断方式。

步骤SD：当检测到编辑节点请求时，则获取目标节点对应的编辑信息，基于编辑信息替换目标节点的原始内容，得到编辑节点后的第三目标节点，并按照第三目标节点的内容进行显示。

对于本申请实施例，用户在界面上点击“编辑”按钮后，电子设备会检测到编辑节点请求，获取目标节点对应的编辑信息，其中，编辑信息为用户在界面写入的相关信息。然后，基于编辑信息替换目标节点的原始内容，得到编辑节点后的第三目标节点，以实现对目标节点的编辑目的，并按照第三目标节点的内容进行显示。允许用户编辑节点内容，增加了流程图的可操作性，使得流程图更加符合实际需求。

可见，在本申请实施例中，当检测到删除节点请求时，则将目标节点删除，通过点击按钮删除的方式，可以避免繁琐的菜单选择和操作步骤，提高了删除节点的操作效率。当检测到调整节点大小请求时，则基于调整节点大小请求对目标节点进行初始大小调整，并基于第一目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照调整前的目标节点的大小进行显示，以避免节点之间出现遮盖的情况。当检测到移动节点请求时，则基于移动节点请求对目标节点进行初始移动，并基于第二目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照移动前的目标节点的位置进行显示，以避免节点之间出现遮盖的情况。当检测到编辑节点请求时，则基于编辑信息替换目标节点的原始内容，得到编辑节点后的第三目标节点，并按照第三目标节点的内容进行显示，允许用户编辑节点内容，增加了流程图的可操作性，使得流程图更加符合实际需求。

进一步的，为了保证连线的准确性和连贯性，在本申请实施例中，当不存在节点覆盖时，则按照第二目标节点的位置进行显示，包括：

当不存在节点覆盖时，判断目标节点是否存在连线，当不存在连线时，则按照第二目标节点的位置进行显示；

当存在连线时，则按照第二目标节点的位置进行显示，并获取目标节点的原始位置，基于原始位置和第二目标节点的位置进行连线调整，以使得目标节点移动时连线随之调整。

对于本申请实施例，在移动目标节点后，倘若保持移动前的连线状况，会破坏流程图的完整性，可能会出现连线悬空或连接错误的情况。为了保证连线的准确性和连贯性，当不存在节点覆盖时，优先判断目标节点是否存在连线，当不存在连线时，表征目标节点在移动前就没有与之相连的连线，则按照第二目标节点的位置进行显示；当存在连线时，则按照第二目标节点的位置进行显示，并基于原始位置和第二目标节点的位置进行连线调整，以实现目标节点移动时连线随之调整的效果。针对连线调整而言，基于目标节点的原始位置和第二目标节点的位置计算连线新位置，例如，通过插值算法、线性变换等方式来计算连线新位置，然后，将计算得到的连线新位置更新到流程图的显示中，在实际操作中，利用编程语言和相关的图形库来实现连线随之调整的效果。

可见，在本申请实施例中，为了保证连线的准确性和连贯性，当不存在节点覆盖时，判断目标节点是否存在连线，当存在连线时，则按照第二目标节点的位置进行显示，并获取目标节点的原始位置，基于原始位置和第二目标节点的位置进行连线调整，以实现目标节点移动时连线随之调整的效果。

进一步的，为了提高用户体验、增强用户添加节点的灵活性、提高流程图绘制功能的可拓展性，在本申请实施例中，当检测到节点添加信息时，则控制目标单元格生成目标节点之前，还包括：

当检测到添加节点的点击指令时，获取目标节点的添加节点方式，其中，添加节点方式包括：默认方式和自定义方式；

基于添加节点方式，确定与添加节点方式对应的节点添加项，并在界面上显示节点添加项，其中，不同的添加节点方式所对应的节点添加项存在差异。

对于本申请实施例，用户在点击添加节点的按钮后，需要填写的节点添加项会显示在界面上，然后，用户根据节点添加项的指引写入节点添加信息。为了提高用户体验、增强用户添加节点的灵活性、提高流程图绘制功能的可拓展性，本申请实施例支持自定义功能拓展，例如，自定义界面文字内容：界面中出现的所有文字内容，均可以通过选项进行自定义设置，例如，将HTML原生表格中所有的文字翻译为另一种语言,实现“国际化”；在流程图绘制过程中，分为编辑模式和查看模式，自定义查看模式下的交互方式和交互内容，例如，查看模式下可以设置鼠标悬浮节点时显示浮窗，并自定义浮窗内容；自定义节点渲染内容：通过配置自定义节点渲染方法，将任何内容放置于节点中，例如，图片、视频等；自定义添加节点项：当用户添加节点按钮后，可以显示自定义的添加节点界面，其中，自定义的添加节点界面中的结点添加项是用户根据自己的需求自行设立的。

具体的，当检测到添加节点的点击指令时，获取目标节点的添加节点方式，其中，添加节点方式包括：默认方式和自定义方式。当目标节点的添加节点方式为自定义方式时，则确定自定义方式对应的节点添加项，并按照自定义的添加节点界面显示节点添加项；当目标节点的添加节点方式为默认方式时，则确定默认方式对应的结点添加项，并按照默认的添加节点界面显示节点添加项。

可见，在本申请实施例中，为了提高用户体验、增强用户添加节点的灵活性、提高流程图绘制功能的可拓展性，当检测到添加节点的点击指令时，获取目标节点的添加节点方式，并基于添加节点方式，确定与添加节点方式对应的节点添加项，并在界面上显示节点添加项，其中，不同的添加节点方式所对应的节点添加项存在差异。

进一步的，为了提高用户体验，在本申请实施例中，HTML原生表格还包括：表头区域和行列添加区域，还包括：

当检测到光标移动至表头区域时，则控制光标所在表头单元格显示编辑表头的提示；

当检测到来自行列添加区域的添加行请求时，则在HTML原生表格中底部添加一行；

当检测到来自行列添加区域的添加列请求时，则在HTML原生表格中最右侧添加一列。

对于本申请实施例，HTML原生表格中还包括表头区域和行列添加区域，当检测到光标移动至表头区域时，则控制光标所在表头单元格显示编辑表头的提示，采用交互的方式以引导用户进行表头编辑操作，提高了用户体验。同时，当检测到来自行列添加区域的添加行请求时，则在HTML原生表格中底部添加一行；当检测到来自行列添加区域的添加列请求时，则在HTML原生表格中最右侧添加一列，在底部添加行、在最右侧添加列可以保持表格的结构不变，避免破坏表格的布局和格式，减少出错的可能性。通过这种方式，根据用户的行列添加请求，自动在HTML原生表格中添加行或列，也使得操作更加便捷和高效，对HTML原生表格进行动态的修改和调整，可以增强用户与应用程序之间的交互性，提高用户满意度。

可见，在本申请实施例中，当检测到光标移动至表头区域时，则控制光标所在表头单元格显示编辑表头的提示，采用交互的方式以引导用户进行表头编辑操作，提高了用户体验。当检测到来自行列添加区域的添加行请求时，则在HTML原生表格中底部添加一行；当检测到来自行列添加区域的添加列请求时，则在HTML原生表格中最右侧添加一列。通过这种方式，根据用户的行列添加请求，自动在HTML原生表格中添加行或列，也使得操作更加便捷和高效，对HTML原生表格进行动态的修改和调整，可以增强用户与应用程序之间的交互性，提高用户满意度。

进一步的，为了便于用户在查看流程图时得到更加完整和丰富的上下文信息，在本申请实施例中，当检测到节点添加信息时，则在目标单元格生成目标节点之后，还包括：

当检测到编辑节点请求时，获取目标节点对应的信息关联指令；

响应于信息关联指令，获取关联信息和关联类型，按照关联类型，将目标节点与关联信息进行关联。

对于本申请实施例，在绘制流程图时，常常会存在目标节点内信息与其他方面的信息存在关联，关联信息可以为目标节点提供更多细节和/或有关的细节，帮助用户更好地理解目标节点的含义和作用，将目标节点与其他内容进行关联，便于用户在查看流程图时得到更加完整和丰富的上下文信息，与此同时，关联信息的显示可以在不破坏流程图整体布局的情况下，为用户提供额外的信息，使得查看流程图的过程更加流畅和便捷。

具体的，当检测到编辑节点请求时，获取目标节点对应的信息关联指令，用户可以自行选择是否需要进行信息关联，当客户在界面上选择了进行信息关联时，会触发信息关联指令，同时，电子设备会接收到信息关联指令。然后，电子设备响应于信息关联指令，获取关联信息和关联类型，其中，关联信息是用户在界面上输入的与目标节点的内容存在关联关系的信息，关联类型为关联信息和目标节点之间关联的具体表现形式，关联类型包括但不限于：悬浮内容展示和点击跳转展示。最终，按照关联类型，将目标节点与关联信息进行关联。如图8所示，图8展示了采用悬浮内容展示方式进行信息关联，当鼠标悬浮至内容为“数据库系统”的结点上时，则会在流程图的界面上显示出与该节点关联的“数据库系统”的相关内容，便于用户在查看流程图时得到更加完整和丰富的上下文信息。

可见，在本申请实施例中，当检测到编辑节点请求时，获取目标节点对应的信息关联指令，然后，响应于信息关联指令，获取关联信息和关联类型，按照关联类型，将目标节点与关联信息进行关联。将目标节点与其他内容进行关联，便于用户在查看流程图时得到更加完整和丰富的上下文信息，与此同时，关联信息的显示可以在不破坏流程图整体布局的情况下，为用户提供额外的信息，使得查看流程图的过程更加流畅和便捷。

为了能够更加直观的表述本申请实施例的功能和效果，如图10所示，以绘制高校课程体系的流程图来展示绘制完成的情况，并更加清晰地展示HTML原生表格的构成。HTML原生表格包括：单元格区域、表头区域、模式切换区域和行列添加区域，在流程图中使用有向箭头来表现时间顺序或从属关系，每个节点（图10中带有文字内容的矩形区域）代表一个课程，可通过颜色、大小来展现不同的课程属性。具体的，针对表头区域而言，将表头区域设置成学期名称，以使得流程图从左至右呈现时间顺序的关系；针对单元格区域而言，单元格区域内包括多个单元格，用户可根据自身需要在单元格区域内的任意单元格创建节点，例如，在表头信息为第一学期对应的列中创建内容为“高级语言程序设计”的结点；与此同时，在创建节点时，可以根据需要来调整节点的大小和颜色，通过节点的大小来表征该课程所占据的时长，通过节点的颜色表征该课程类别，便于用户能够清晰地了解到高校课程体系所体现出的特点。针对模式切换区域，点击模式切换以使得在查看模式和编辑模式之间进行切换；针对行列添加区域，点击“添加学期”则可以在界面最右侧添加一列、点击添加行则可以在界面最下侧添加一行。

上述实施例从方法流程的角度介绍一种基于HTML原生表格的流程图绘制方法，下述实施例从虚拟模块或者虚拟单元的角度介绍了一种基于HTML原生表格的流程图绘制装置，具体详见下述实施例。

本申请实施例提供一种基于HTML原生表格的流程图绘制装置，如图11所示，该基于HTML原生表格的流程图绘制装置，具体可以包括：

响应显示模块210，用于响应于流程图绘制请求，显示HTML原生表格，其中，HTML原生表格包括：单元格区域；

节点添加显示模块220，用于当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过添加节点的提示输入节点添加信息；

流程图绘制模块230，用于当检测到节点添加信息时，则在目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。

对于本申请实施例，响应于流程图绘制请求，显示HTML原生表格，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，当检测到节点添加信息时，则控制目标单元格生成目标节点，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。通过独特且符合直觉的交互操作设计，在没有设置工具栏的情况下，零学习成本完成绘制不带逻辑判断的流程图，用户可通过简单的逻辑操作和简单的交互性提示，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，与此同时，通过表格和“锚点”辅助流程图的绘制，能够便于用户快速绘制出规整美观的流程图，降低了绘制流程图的操作复杂度。

本申请实施例的一种可能的实现方式，基于HTML原生表格的流程图绘制装置，还包括：

删除行列模块，用于基于目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格；

判断每一行关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除行的提示；

判断每一列关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除列的提示。

本申请实施例的一种可能的实现方式，基于HTML原生表格的流程图绘制装置，还包括：

多维操作提示模块，用于当检测到光标移动至目标节点处时，则控制目标节点显示多维操作的提示，其中，多维操作包括：移动节点、删除节点、编辑节点和调整节点大小。

本申请实施例的一种可能的实现方式，基于HTML原生表格的流程图绘制装置，还包括：

多维操作执行模块，用于当检测到删除节点请求时，则将目标节点删除；

当检测到调整节点大小请求时，则基于调整节点大小请求对目标节点进行初始大小调整，得到初始调整后的第一目标节点；基于第一目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照调整前的目标节点的大小进行显示；当不存在节点覆盖时，则按照第一目标节点的大小进行显示；

当检测到移动节点请求时，则基于移动节点请求对目标节点进行初始移动，得到初始移动后的第二目标节点；基于第二目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照移动前的目标节点的位置进行显示；当不存在节点覆盖时，则按照第二目标节点的位置进行显示；

当检测到编辑节点请求时，则获取目标节点对应的编辑信息，基于编辑信息替换目标节点的原始内容，得到编辑节点后的第三目标节点，并按照第三目标节点的内容进行显示。

本申请实施例的一种可能的实现方式，多维操作执行模块在执行当不存在节点覆盖时，则按照第二目标节点的位置进行显示时，用于：

当不存在节点覆盖时，判断目标节点是否存在连线，当不存在连线时，则按照第二目标节点的位置进行显示；

当存在连线时，则按照第二目标节点的位置进行显示，并获取目标节点的原始位置，基于原始位置和第二目标节点的位置进行连线调整，以使得目标节点移动时连线随之调整。

本申请实施例的一种可能的实现方式，基于HTML原生表格的流程图绘制装置，还包括：

自定义添加模块，用于当检测到添加节点的点击指令时，获取目标节点的添加节点方式，其中，添加节点方式包括：默认方式和自定义方式；

基于添加节点方式，确定与添加节点方式对应的节点添加项，并在界面上显示节点添加项，其中，不同的添加节点方式所对应的节点添加项存在差异。

本申请实施例的一种可能的实现方式，基于HTML原生表格的流程图绘制装置，还包括：

处理模块，用于当检测到光标移动至表头区域时，则控制光标所在表头单元格显示编辑表头的提示；

当检测到来自行列添加区域的添加行请求时，则在HTML原生表格中底部添加一行；

当检测到来自行列添加区域的添加列请求时，则在HTML原生表格中最右侧添加一列。

本申请实施例的一种可能的实现方式，基于HTML原生表格的流程图绘制装置，还包括：

信息关联模块，用于当检测到编辑节点请求时，获取目标节点对应信息关联指令；

响应于信息关联指令，获取关联信息和关联类型，按照关联类型，将目标节点与关联信息进行关联。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的一种基于HTML原生表格的流程图绘制装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本申请实施例中提供了一种电子设备，如图11所示，图11所示的电子设备300包括：处理器301和存储器303。其中，处理器301和存储器303相连，如通过总线302相连。可选地，电子设备300还可以包括收发器304。需要说明的是，实际应用中收发器304不限于一个，该电子设备300的结构并不构成对本申请实施例的限定。

处理器301可以是CPU（Central Processing Unit，中央处理器），通用处理器，DSP（Digital Signal Processor，数据信号处理器），ASIC（Application SpecificIntegrated Circuit，专用集成电路），FPGA（Field Programmable Gate Array，现场可编程门阵列）或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器301也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线302可包括一通路，在上述组件之间传送信息。总线302可以是PCI（Peripheral Component Interconnect，外设部件互连标准）总线或EISA（ExtendedIndustry Standard Architecture，扩展工业标准结构）总线等。总线302可以分为地址总线、数据总线、控制总线等。为便于表示，图11中仅用一条粗线表示，但并不表示仅有一根总线或一型的总线。

存储器303可以是ROM（Read Only Memory，只读存储器）或可存储静态信息和指令的其他类型的静态存储设备，RAM（Random Access Memory，随机存取存储器）或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM（Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器）、CD-ROM（Compact DiscRead Only Memory，只读光盘）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等）、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器303用于存储执行本申请方案的应用程序代码，并由处理器301来控制执行。处理器301用于执行存储器303中存储的应用程序代码，以实现前述方法实施例所示的内容。

其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA（个人数字助理）、PAD（平板电脑）、PMP（便携式多媒体播放器）、车载终端（例如车载导航终端）等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。还可以为服务器等。图11示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。与相关技术相比，本申请实施例，响应于流程图绘制请求，显示HTML原生表格，当检测到光标移动至单元格区域时，则控制光标所在目标单元格显示添加节点的提示，当检测到节点添加信息时，则控制目标单元格生成目标节点，当检测到连线添加信息时，则基于连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。通过独特且符合直觉的交互操作设计，在没有设置工具栏的情况下，零学习成本完成绘制不带逻辑判断的流程图，用户可通过简单的逻辑操作和简单的交互性提示，并以HTML原生表格为布局框架，利用单元格自适应尺寸的特性构建流程图，与此同时，通过表格和“锚点”辅助流程图的绘制，能够便于用户快速绘制出规整美观的流程图，降低了绘制流程图的操作复杂度。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

以上仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种基于HTML原生表格的流程图绘制方法，其特征在于，包括：

响应于流程图绘制请求，显示HTML原生表格，其中，所述HTML原生表格包括：单元格区域；

当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过所述添加节点的提示输入节点添加信息；

当检测到节点添加信息时，则在所述目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于所述连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。

2.根据权利要求1所述的基于HTML原生表格的流程图绘制方法，其特征在于，所述当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示同时，还包括：

基于所述目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格；

判断每一所述行关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除行的提示；

判断每一所述列关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除列的提示。

3.根据权利要求1所述的基于HTML原生表格的流程图绘制方法，其特征在于，所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之后，还包括：

当检测到光标移动至所述目标节点处时，则控制所述目标节点显示多维操作的提示，其中，所述多维操作包括：移动节点、删除节点、编辑节点和调整节点大小。

4.根据权利要求3所述的基于HTML原生表格的流程图绘制方法，其特征在于，所述当检测到光标移动至所述单元格区域中所述目标节点处时，则控制所述目标节点显示多维操作的提示之后，还包括：

当检测到删除节点请求时，则将所述目标节点删除；

当检测到调整节点大小请求时，则基于所述调整节点大小请求对所述目标节点进行初始大小调整，得到初始调整后的第一目标节点；基于所述第一目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照调整前的所述目标节点的大小进行显示；当不存在节点覆盖时，则按照所述第一目标节点的大小进行显示；

当检测到移动节点请求时，则基于所述移动节点请求对所述目标节点进行初始移动，得到初始移动后的第二目标节点；基于所述第二目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照移动前的所述目标节点的位置进行显示；当不存在节点覆盖时，则按照所述第二目标节点的位置进行显示；

当检测到编辑节点请求时，则获取所述目标节点对应的编辑信息，基于所述编辑信息替换所述目标节点的原始内容，得到编辑节点后的第三目标节点，并按照所述第三目标节点的内容进行显示。

5.根据权利要求4所述的基于HTML原生表格的流程图绘制方法，其特征在于，所述当不存在节点覆盖时，则按照所述第二目标节点的位置进行显示，包括：

当不存在节点覆盖时，判断所述目标节点是否存在连线，当不存在连线时，则按照所述第二目标节点的位置进行显示；

当存在连线时，则按照所述第二目标节点的位置进行显示，并获取所述目标节点的原始位置，基于所述原始位置和所述第二目标节点的位置进行连线调整，以使得目标节点移动时连线随之调整。

6.根据权利要求3所述的基于HTML原生表格的流程图绘制方法，其特征在于，所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之后，还包括：

当检测到编辑节点请求时，获取所述目标节点对应信息关联指令；

响应于所述信息关联指令，获取关联信息和关联类型，按照所述关联类型，将所述目标节点与所述关联信息进行关联。

7.根据权利要求1所述的基于HTML原生表格的流程图绘制方法，其特征在于，所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之前，还包括：

当检测到添加节点的点击指令时，获取所述目标节点的添加节点方式，其中，所述添加节点方式包括：默认方式和自定义方式；

基于所述添加节点方式，确定与所述添加节点方式对应的节点添加项，并在界面上显示所述节点添加项，其中，不同的添加节点方式所对应的节点添加项存在差异。

8.一种基于HTML原生表格的流程图绘制装置，其特征在于，包括：

响应显示模块，用于响应于流程图绘制请求，显示HTML原生表格，其中，所述HTML原生表格包括：单元格区域；

节点添加显示模块，用于当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过所述添加节点的提示输入节点添加信息；

流程图绘制模块，用于当检测到节点添加信息时，则在所述目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于所述连线添加信息中至少两个锚点进行连线绘制，以实现基于HTML原生表格的流程图绘制。

9.一种电子设备，其特征在于，包括：

至少一个处理器；

存储器；

至少一个应用程序，其中至少一个应用程序被存储在存储器中并被配置为由至少一个处理器执行，所述至少一个应用程序配置用于：执行权利要求1～7任一项所述的基于HTML原生表格的流程图绘制方法。

10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令所述计算机执行权利要求1～7任一项所述的基于HTML原生表格的流程图绘制方法。