CN111260752A - 一种流程图绘制方法、装置及设备、存储介质 - Google Patents

Abstract

一种流程图绘制方法、装置及设备、存储介质。所述流程图绘制方法包括：接收输入的json格式的数据，所述json格式的数据包括节点信息；根据所述json格式的数据绘制流程图。本实施例提供的方案，使用json格式描述节点信息，配置比较简单，使用友好，提高了开发效率。

Description

一种流程图绘制方法、装置及设备、存储介质

技术领域

本文涉及计算机技术，尤指一种流程图绘制方法、装置及设备、存储介质。

背景技术

流程图是对过程、流程的一种图像表示，广泛用于技术设计、商务交流等场景。流程图表现方式直观、易于理解。通过不同几何图形表示不同类型的操作，图形内的文字描述操作步骤内容，使用带箭头的线连接起来，表示执行的先后顺序。

发明内容

本申请实施例提供了一种流程图绘制方法、装置及设备、存储介质。

本申请实施例提供了一种流程图绘制方法，包括：

接收输入的json格式的数据，所述json格式的数据包括节点信息；

根据所述json格式的数据绘制流程图。

在一示范性实施例中，所述节点信息包括：节点个数、节点类型、执行顺序、节点的配置参数。

在一示范性实施例中，所述节点的配置参数包括以下至少之一：节点内容的位置、线条颜色、填充颜色、字体颜色、填充的图片的路径。

在一示范性实施例中，所述根据所述json格式的数据绘制流程图包括：

遍历所述json格式的数据，确定节点之间的执行顺序，使用canvas标签依次绘制所述节点。

本申请实施例提供一种流程图绘制装置，包括：

输入模块，设置为接收输入的json格式的数据，所述json格式的数据包括节点信息；

绘制模块，设置为根据所述json格式的数据绘制流程图。

在一示范性实施例中，所述节点信息包括：节点个数、节点类型、执行顺序、节点的配置参数。

在一示范性实施例中，所述节点的配置参数包括以下至少之一：节点内容的位置、线条颜色、填充颜色、字体颜色、填充的图片的路径。

在一示范性实施例中，所述绘制模块包括解析单元和绘制单元，其中：

所述解析单元设置为，遍历所述json格式的数据，确定节点之间的执行顺序；

所述绘制单元设置为，使用canvas标签依次绘制所述节点。

本申请实施例提供一种流程图绘制设备，包括存储器和处理器，所述存储器存储有程序，所述程序在被所述处理器读取执行时，实现上述流程图绘制方法。

本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述流程图绘制方法。

与相关技术相比，本申请实施例包括一种流程图绘制方法，接收输入的json格式的数据，所述json格式的数据包括节点信息；根据所述json格式的数据绘制流程图。本实施例提供的方案，使用json格式描述节点信息，配置比较简单，使用友好，提高了开发效率。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的其他优点可通过在说明书以及附图中所描述的方案来实现和获得。

附图说明

附图用来提供对本申请技术方案的理解，并且构成说明书的一部分，与本申请的实施例一起用于解释本申请的技术方案，并不构成对本申请技术方案的限制。

图1为本申请实施例提供的流程图绘制方法流程图；

图2为本申请实施例提供的流程图绘制装置框图；

图3为本申请实施例提供的流程图绘制方法所得的流程图示意图；

图4为本申请实施例提供的流程图绘制设备框图；

图5为本申请实施例提供的计算机可读存储介质框图。

具体实施方式

本申请描述了多个实施例，但是该描述是示例性的，而不是限制性的，并且对于本领域的普通技术人员来说显而易见的是，在本申请所描述的实施例包含的范围内可以有更多的实施例和实现方案。尽管在附图中示出了许多可能的特征组合，并在具体实施方式中进行了讨论，但是所公开的特征的许多其它组合方式也是可能的。除非特意加以限制的情况以外，任何实施例的任何特征或元件可以与任何其它实施例中的任何其他特征或元件结合使用，或可以替代任何其它实施例中的任何其他特征或元件。

本申请包括并设想了与本领域普通技术人员已知的特征和元件的组合。本申请已经公开的实施例、特征和元件也可以与任何常规特征或元件组合，以形成由权利要求限定的独特的发明方案。任何实施例的任何特征或元件也可以与来自其它发明方案的特征或元件组合，以形成另一个由权利要求限定的独特的发明方案。因此，应当理解，在本申请中示出和/或讨论的任何特征可以单独地或以任何适当的组合来实现。因此，除了根据所附权利要求及其等同替换所做的限制以外，实施例不受其它限制。此外，可以在所附权利要求的保护范围内进行各种修改和改变。

此外，在描述具有代表性的实施例时，说明书可能已经将方法和/或过程呈现为特定的步骤序列。然而，在该方法或过程不依赖于本文所述步骤的特定顺序的程度上，该方法或过程不应限于所述的特定顺序的步骤。如本领域普通技术人员将理解的，其它的步骤顺序也是可能的。因此，说明书中阐述的步骤的特定顺序不应被解释为对权利要求的限制。此外，针对该方法和/或过程的权利要求不应限于按照所写顺序执行它们的步骤，本领域技术人员可以容易地理解，这些顺序可以变化，并且仍然保持在本申请实施例的精神和范围内。

相关技术中，流程图的插件使用于旧的js环境，比如jquery，目前前端市场使用的主流框架vue，react没有特别合适的流程图插件。另外，配置项多，彼此存在嵌套关系并相互影响，配置比较复杂。插件流程节点图形相对单一，多于文字描述，实际需求需要丰富的布局，图片加描述等。

如图1所示，本发明一实施例提供一种流程图绘制方法，包括：

步骤101，接收输入的json格式的数据，所述json格式的数据包括节点信息；

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

步骤102，根据所述json格式的数据绘制流程图。

本实施例提供的流程图绘制方法，使用json格式的数据描述节点信息，配置比较简单，使用友好，提高了开发效率。另外，作为API(Application Programming Interface，应用程序接口)清晰明了，使用友好，提高开发效率。

在一实施例中，所述节点信息包括：节点个数、节点类型、执行顺序、节点的配置参数。一个节点代表流程图中的一个步骤，比如代表一个框。节点类型是指节点的内容的类型，比如为文字，或者为图片，或者为文字和图片，等等。比如使用type:picture||text b表示节点内容的类型，type:picture表示节点的内容为图片，text b表示节点的内容为文字。执行顺序代表节点之间的关系，比如使用from,to来表示节点之间的顺序关系。

在一实施例中，所述节点的配置参数包括以下至少之一：节点内容的位置、线条颜色、填充颜色、字体颜色、填充的图片的路径。其中，线条颜色为节点的线条的颜色，填充颜色为该节点内部填充的颜色，字体颜色为节点的内容包括文字时，文字的颜色。比如，节点内容的位置使用top,right,left,bottom来表示(分别指示节点内容与节点边界的距离)。本实施例提供的绘制方法，提供丰富的内容布局，达到快速搭建应用于项目的目的。

在一实施例中，所述根据所述json格式的数据绘制流程图包括：

遍历所述json格式的数据，确定节点之间的执行顺序，使用canvas标签依次绘制所述节点。

另外，本实施例提供的流程图绘制方法，适用于前端主流框架，如vue,react等。本实施例中使用EC3AScript 6语法进行开发，通过webpack打包，并发布在npm库中，在vue/react环境可直接调用。

如图2所示，本发明一实施例提供一种流程图绘制装置，包括：

输入模块21，设置为接收输入的json格式的数据，所述json格式的数据包括节点信息；

绘制模块22，设置为根据所述json格式的数据绘制流程图。

在一实施例中，所述节点信息包括：节点个数、节点类型、执行顺序、节点的配置参数。

在一实施例中，所述节点的配置参数包括以下至少之一：节点内容的位置、线条颜色、填充颜色、字体颜色、填充的图片的路径。在一实施例中，所述绘制模块22包括解析单元221和绘制单元222，其中：

所述解析单元221设置为，遍历所述json格式的数据，确定节点之间的执行顺序；

所述绘制单元222设置为，使用canvas标签依次绘制所述节点。

下面通过一个具体实施例进一步说明本申请。

本实施例中，输入的json格式的数据为：

遍历时，使用js方法遍历数据，nodes为存放节点的数组，每循环一条数据，在页面绘制一个节点，以此类推，数据中color为颜色，background为背景颜色，border_width为边框的宽度，border_color为边框的颜色，font_size为字体大小，type:’picture’指节点中包括图片，其后是图片的一些属性信息，比如，位置信息，type:’text’指节点中包括文本，其后是文本的一些属性信息，比如文本的字体大小(font_size)，字体宽度(font_weight)，文本的位置信息(top，right，left，bottom等)。links为存放关系的数组，每循环一条数据，在页面上绘制一条连线，如其中一条数据为{from:1,to:2}，那么连线从id为1的节点指向id为2的节点。

绘制得到的流程图如图3所示。需要说明的是，各节点的颜色未示意出来。

如图4所示，本申请一实施例提供一种流程图绘制设备40，包括存储器410和处理器420，所述存储器410存储有程序，所述程序在被所述处理器420读取执行时，实现任一实施例所述的流程图绘制方法。

如图5所示，本申请一实施例提供种计算机可读存储介质50，所述计算机可读存储介质50存储有一个或者多个程序510，所述一个或者多个程序510可被一个或者多个处理器执行，以实现任一实施例所述的流程图绘制方法。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

Claims (10)

1.一种流程图绘制方法，其特征在于，包括：

接收输入的json格式的数据，所述json格式的数据包括节点信息；

根据所述json格式的数据绘制流程图。

2.根据权利要求1所述的流程图绘制方法，其特征在于，所述节点信息包括：节点个数、节点类型、执行顺序、节点的配置参数。

3.根据权利要求2所述的流程图绘制方法，其特征在于，所述节点的配置参数包括以下至少之一：节点内容的位置、线条颜色、填充颜色、字体颜色、填充的图片的路径。

4.根据权利要求1至3任一所述的流程图绘制方法，其特征在于，所述根据所述json格式的数据绘制流程图包括：

遍历所述json格式的数据，确定节点之间的执行顺序，使用canvas标签依次绘制所述节点。

5.一种流程图绘制装置，其特征在于，包括：

输入模块，设置为接收输入的json格式的数据，所述json格式的数据包括节点信息；

绘制模块，设置为根据所述json格式的数据绘制流程图。

6.根据权利要求5所述的流程图绘制装置，其特征在于，所述节点信息包括：节点个数、节点类型、执行顺序、节点的配置参数。

7.根据权利要求6所述的流程图绘制装置，其特征在于，所述节点的配置参数包括以下至少之一：节点内容的位置、线条颜色、填充颜色、字体颜色、填充的图片的路径。

8.根据权利要求5至7任一所述的流程图绘制装置，其特征在于，所述绘制模块包括解析单元和绘制单元，其中：

所述解析单元设置为，遍历所述json格式的数据，确定节点之间的执行顺序；

所述绘制单元设置为，使用canvas标签依次绘制所述节点。

9.一种流程图绘制设备，其特征在于，包括存储器和处理器，所述存储器存储有程序，所述程序在被所述处理器读取执行时，实现如权利要求1至4任一所述的流程图绘制方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1至4任一所述的流程图绘制方法。

Images