CN111078217A - 脑图生成方法、装置和计算机可读存储介质 - Google Patents

Abstract

本发明涉及一种脑图生成方法、装置和计算机可读存储介质。其中，该方法包括：当预设数据格式的脑图文件被代码编辑器运行时，获取脑图文件的源数据；根据源数据，分析与源数据对应的脑图的节点信息；根据节点信息，在新建页面中绘制与源数据对应的脑图。通过本发明，解决了相关技术中的代码编辑器无法运行脑图文件的问题，实现了在代码编辑器中运行脑图文件，提高了在代码编辑和测试过程中脑图的使用体验。

Description

脑图生成方法、装置和计算机可读存储介质

技术领域

本发明涉及程序测试领域，特别是涉及一种脑图生成方法、装置和计算机可读存储介质。

术语解释

JIRA：是一个缺陷跟踪管理***，为针对缺陷管理、任务追踪和项目管理的商业性应用软件，开发者是澳大利亚的Atlassian。

Bug：程序错误，是程序设计中的术语，是指在软件运行中因为程序本身有错误而造成的功能不正常、死机、数据丢失、非正常中断等现象。有些程序错误会造成计算机安全隐患，此时叫做漏洞。

Git：是一个分布式版本控制软件。最初目的是为更好地管理Linux内核开发而设计。

VS Code：是一个由微软开发的、同时支持多个操作***的代码编辑器。

API：应用程序接口，是软件***不同组成部分衔接的约定

SVG：可缩放矢量图形(Scalable Vector Graphics，简称为SVG)是一种基于可扩展标记语言(XML)，用于描述二维矢量图形的图形格式。

JSON：JavaScript对象表示法(JavaScript Object Notation，简称为JSON)是一种由道格拉斯·克罗克福特构想和设计、轻量级的数据交换语言，该语言以易于让人阅读的文字为基础，用来传输由属性值或者序列性的值组成的数据对象。

背景技术

脑图是一种可以表达事物与事物之间关联的可视化手段，用脑图来展现测试功能层次之间的关系非常合适，随着测试工程化的概念的提出，测试工程师愈发需要一款既可以编辑脑图又可以方便项目管理的测试用例编辑工具。在现有技术中提供了多种脑图编辑工具，例如xmind或者百度脑图等。测试工程师在Git或者JIRA上进行测试工作时，如果要使用脑图来编写测试用例，则需要另外打开xmind或者百度脑图，然后再在xmind或者百度脑图中新建或者打开脑图文件。可见，xmind或者百度脑图的功能都相对独立，与测试中使用的其他工具协同使用的体验并不好。

发明内容

基于此，有必要针对相关技术中的代码编辑器无法运行脑图文件的问题，提供一种脑图生成方法、装置和计算机可读存储介质。

根据本发明实施例的一个方面，提供了一种脑图生成方法，应用于脑图生产***，所述脑图生产***至少包括脑图编辑器和代码编辑器，所述脑图生成方法包括：当预设数据格式的脑图文件被所述代码编辑器运行时，获取所述脑图文件的源数据；根据所述源数据，分析与所述源数据对应的脑图的节点信息；根据所述节点信息，在新建页面中绘制与所述源数据对应的脑图。

在其中一个实施例中，在获取所述脑图文件的源数据之后，所述脑图生成方法还包括：判断所述源数据的数据类型是否为字符串类型；在判断到所述源数据的数据类型为字符串类型的情况下，执行预设JSON语句，以将所述源数据的数据类型转换为对象类型。

在其中一个实施例中，所述节点信息包括：节点的内容和节点之间的层级关系。

在其中一个实施例中，根据所述节点信息，在新建页面中绘制与所述源数据对应的脑图包括：执行预设SVG语句，以根据所述节点信息生成SVG文件；将所述SVG文件发送给浏览器，以供所述浏览器在所述新建页面中按照所述SVG文件渲染出与所述源数据对应的脑图。

在其中一个实施例中，根据所述节点信息，绘制与所述源数据对应的脑图还包括：执行预设HTML语句，以展现所述新建页面的结构；执行预设CSS语句，以控制所述新建页面的样式；执行预设JavaScript语句，以控制生成脑图的执行逻辑。

在其中一个实施例中，所述代码编辑器为VS Code代码编辑器，所述方法是由所述VS Code代码编辑器加载的插件执行的。

根据本发明实施例的另一个方面，还提供了一种脑图生成装置，应用于脑图生产***，所述脑图生产***至少包括脑图编辑器和代码编辑器，所述脑图生成装置包括：获取模块，用于当预设数据格式的脑图文件被所述代码编辑器运行时，获取所述脑图文件的源数据；分析模块，用于根据所述源数据，分析与所述源数据对应的脑图的节点信息；绘制模块，用于根据所述节点信息，在新建页面中绘制与所述源数据对应的脑图。

在其中一个实施例中，所述脑图生成装置还包括：判断模块，用于判断所述源数据的数据类型是否为字符串类型；执行模块，用于在判断到所述源数据的数据类型为字符串类型的情况下，执行预设JSON语句，以将所述源数据的数据类型转换为对象类型。

在其中一个实施例中，所述绘制模块包括：生成单元，用于执行预设SVG语句，以根据所述节点信息生成SVG文件；发送单元，用于将所述SVG文件发送给浏览器，以供所述浏览器在所述新建页面中按照所述SVG文件渲染出与所述源数据对应的脑图。

根据本发明实施例的另一个方面，还提供了一种计算机可读存储介质，其上存储有计算机程序指令，当所述计算机程序指令被处理器执行时实现上述的方法。

与现有技术相比，通过本发明实施例提供的脑图生成方法、装置和计算机可读存储介质，采用当预设数据格式的脑图文件被代码编辑器运行时，获取脑图文件的源数据；根据源数据，分析与源数据对应的脑图的节点信息；根据节点信息，在新建页面中绘制与源数据对应的脑图的方式，解决了相关技术中的代码编辑器无法运行脑图文件的问题，实现了在代码编辑器中运行脑图文件，提高了在代码编辑和测试过程中脑图的使用体验。

附图说明

图1是根据本发明实施例的脑图生成方法的流程图；

图2是根据本发明实施例的脑图生成装置的结构框图；

图3是根据本发明实施例的脑图生成装置的优选结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本发明实施例适用于具有目录界面访问功能和具有插件扩展能力的代码编辑器，尤其适用于具有脑图编辑器和上述代码编辑器的脑图生产***。利用脑图编辑***和采用本发明实施例的代码编辑器，用户可以在脑图编辑器中编辑并生成脑图文件，在代码编辑器的目录界面中访问并运行脑图文件，而不必使用脑图编辑器来运行脑图文件，从而解决了相关技术中的代码编辑器无法运行脑图文件的问题，实现了在代码编辑器中运行脑图文件，提高了在代码编辑和测试过程中脑图的使用体验。

下面将对本发明实施例进行描述和说明。

在本实施例中提供了一种脑图生成方法，应用于脑图生产***，脑图生产***至少包括脑图编辑器和代码编辑器。图1是根据本发明实施例的脑图生成方法的流程图，如图1所示，该流程包括如下步骤：

步骤S101，当预设数据格式的脑图文件被代码编辑器运行时，获取脑图文件的源数据。

以VS Code代码编辑器为例，VS Code可以用来进行文本文件的编辑、删除、添加等功能；VS Code还提供了目录结构，可以使用VS Code打开多个文件夹或者多个文件；并且，VS Code还支持加载不同的外部插件来增强其功能。因此，使用VS Code代码编辑器不仅能够方便地访问和运行文件，还支持加载外部插件来实现对VS Code代码编辑器运行的文件进行各种处理。

在一个实施例中，可以利用VS Code代码编辑器的侧边栏提供的目录界面访问脑图文件的存储目录，并直接从该存储目录中运行预设数据格式的脑图文件。脑图文件的数据格式包括km格式(百度脑图KityMinder可识别和编辑的文件格式)和xmind格式(Xmind可识别和编辑的文件格式)。

其中，km格式是一种类JSON的数据结构，每个文件都有唯一的根节点root，其他节点都是在root节点之后向下延伸。最终会形成一个如下的树形结构：

在km格式的文件中还可以指定脑图渲染的样式和排列等。

在本实施例中使用的km格式文件的数据结构并不是固定的，只要在不改变整体树形结构的基础上，往每一个节点上添加自定义字段也算是可以的，例如在节点上添加ID、parentID以及其他自定义类型的字段。

除了km格式之外，本实施例的脑图文件还可以采用xmind格式。由于xmind格式的文件在VS Code里不能直接进行渲染，因此，在渲染脑图文件之前，可以对xmind格式的文件的数据进行解析和转换，例如在代码编辑器的插件中加入字符串类型转换方法，在获取到脑图文件的源数据之后，插件判断源数据的数据类型是否为字符串类型，在判断到源数据的数据类型为字符串类型的情况下，则执行预设JSON语句，将源数据的数据类型转换为对象类型。在本实施例中，上述的预设JSON语句可以是名为xmind-sdk-javascript的SDK，该SDK用于将xmind格式的文件的数据转换成JSON。

步骤S102，根据源数据，分析与源数据对应的脑图的节点信息。

在得到源数据之后，根据源数据的结构，可以分析得出源数据对应的脑图的节点信息。如上述的km的树形结构所示的源数据结构，遍历该树形结构，可以得到脑图中所有节点的内容和节点之间的层级关系。

步骤S103，根据节点信息，在新建页面中绘制与源数据对应的脑图。

虽然VS Code代码编辑器本身不具备生成脑图的功能，但是在VS Code代码编辑器加载了相应的外部插件之后，可以由VS Code代码编辑器加载的外部插件来执行脑图生成方法，即上述的步骤S101～步骤S103以及其他的优选实施方式均可以由VS Code代码编辑器中加载的外部插件来实现。此外，外部插件还可以方便地分享给其他用户的代码编辑器，以实现为更多的用户提供在代码编辑器中生成脑图的功能。

需要说明的是，代码编辑器还可以是其他可以提供文件目录结构以及可以加载外部插件的代码编辑器，例如Sublime Text、Atom、jEdit等。

在本实施例中，采用SVG绘制脑图。在源数据的数据类型为字符串类型的情况下，可以通过上述的预设JSON语句将源数据转换为对象类型，以方便SVG对脑图文件描述的各个节点的属性或者对象的访问。

例如，可以使用JSON.parse()方法将字符串类型转换为对象类型。对于一个字符串类型'{"a":"Hello","b":"World"}'，通过下列代码即可以将其转换为对象类型{a:'Hello',b:'World'}：

var obj＝JSON.parse('{"a":"Hello","b":"World"}')。

在其中一个实施例中，在步骤S103中代码编辑器或者代码编辑器加载的插件通过执行预设SVG语句，以根据节点信息生成SVG文件；然后将SVG文件发送给浏览器，以供浏览器按照SVG文件渲染出与源数据对应的脑图。由于在节点信息中描述了脑图中所有节点的内容和节点之间的层级关系，因此，在根据源数据获取到节点内容和节点之间的层级关系后，通过SVG技术就可以将这些节点一个一个地绘制在页面中。

SVG提供了各种画图的方法，比如提供了可以画线条的方法，画圆形的方法，画矩形、文本、边框等各种方法。脑图文件中的数据都是有类型的，比如这个节点是文本节点，那么SVG可以先画出一个矩形，然后再把文本注入到这个矩形中；如果这个节点是一个超链接节点，SVG可以先画出一个矩形，然后再把超链接注入到这个矩形中。最后生成的SVG文件被挂载到HTML，HTML就可以将SVG文件渲染在浏览器中，用户就能在代码编辑器提供的浏览器页面中看到对应的脑图。

在本实施例中使用的插件可以使用HTML、CSS和JavaScript语句编写。其中，通过HTML语句用来展现页面的结构，CSS语句用来控制页面的样式，JavaScript用来控制生成脑图的执行逻辑。在其中一个实施例中，根据节点信息，在新建页面中绘制与源数据对应的脑图还包括：执行插件中的预设HTML语句，以展现在新建页面的结构；执行插件中的预设CSS语句，以控制在新建页面的样式；执行插件中的预设JavaScript语句，以控制插件的执行逻辑。

VS Code代码编辑器在运行插件时会启动一个进程，插件代码运行在这个进程中，并且可以调用Node JS提供出来的API，当用户从代码编辑器中打开某个脑图文件时，插件代码可以读取到打开的脑图文件的源数据，并对其进行解析，将解析出来的内容加载进内存，再利用该内容绘制脑图，最终渲染展示在浏览器页面中。

通过本发明提供的上述实施例，采用代码编辑器加载的插件，将测试工程师常用的脑图编辑功能进行整合，在编写测试用例时，不需要切换多个工具而可以直接在代码编辑器中生成和编辑脑图。代码编辑器提供的工作目录管理功能还能使得测试工程目录规范化，测试过程中的输入和输出文件都可以设置指定的位置，便于测试项目的维护和协作。

另外，基于本实施例提供的上述的脑图生成方法，还可以通过在最终展示的浏览器页面上对生成的脑图进行内容编辑操作，编辑完成之后可以对脑图进行保存，保存时同步更新脑图文件。

另外，为了减少测试工程师的重复劳动，提升编辑脑图以及测试工作的工作效率，还可以利用组件化概念，在浏览器页面上增加组件按钮，一些组件按钮可以用于生成用户最常使用的脑图节点片段，用户点击组件按钮就能够在浏览器页面上快速生成节点片段；另一些组件按钮可以集成测试工程师日常会频繁使用的功能，例如通过JIRA快速上报在测试应用过程中出现的问题或BUG等。

在本实施例中还提供了一种脑图生成装置，应用于脑图生产***，脑图生产***至少包括脑图编辑器和代码编辑器。该脑图生成装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”或者“单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的***较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图2是根据本发明实施例的脑图生成装置的结构框图。如图2所示，该脑图生成装置包括：

获取模块21，用于当预设数据格式的脑图文件被代码编辑器运行时，获取脑图文件的源数据；

分析模块22，耦合至获取模块21，用于根据源数据，分析与源数据对应的脑图的节点信息；

绘制模块23，耦合至分析模块22，用于根据节点信息，在新建页面中绘制与源数据对应的脑图。

图3是根据本发明实施例的脑图生成装置的优选结构框图。如图3所示，在其中一个实施例中，脑图生成装置还包括：判断模块31，耦合获取模块21，用于判断源数据的数据类型是否为字符串类型；执行模块32，耦合至判断模块32，用于在判断到源数据的数据类型为字符串类型的情况下，执行预设JSON语句，以将源数据的数据类型转换为对象类型。

在其中一个实施例中，节点信息包括：节点的内容和节点之间的层级关系。

在其中一个实施例中，绘制模块23包括：第一执行单元，用于执行预设SVG语句，以根据节点信息生成SVG文件；发送单元，将SVG文件发送给浏览器，以供浏览器在新建页面中按照SVG文件渲染出与源数据对应的脑图。

在其中一个实施例中，绘制模块23还包括：第二执行单元，用于执行预设HTML语句，以展现新建页面的结构；第三执行单元，用于执行预设CSS语句，以控制新建页面的样式；第四执行单元，用于执行预设JavaScript语句，以控制生成脑图的执行逻辑。

在其中一个实施例中，代码编辑器为VS Code代码编辑器，脑图生成装置被封装成可以由VS Code代码编辑器加载的插件。

另外，结合上述实施例中的脑图生成方法，本发明实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种脑图生成方法。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种脑图生成方法，应用于脑图生产***，所述脑图生产***至少包括脑图编辑器和代码编辑器，其特征在于，所述脑图生成方法包括：

当预设数据格式的脑图文件被所述代码编辑器运行时，获取所述脑图文件的源数据；

根据所述源数据，分析与所述源数据对应的脑图的节点信息；

根据所述节点信息，在新建页面中绘制与所述源数据对应的脑图。

2.根据权利要求1所述的脑图生成方法，其特征在于，在获取所述脑图文件的源数据之后，所述脑图生成方法还包括：

判断所述源数据的数据类型是否为字符串类型；

在判断到所述源数据的数据类型为字符串类型的情况下，执行预设JSON语句，以将所述源数据的数据类型转换为对象类型。

3.根据权利要求1或2所述的脑图生成方法，其特征在于，所述节点信息包括：节点的内容和节点之间的层级关系。

4.根据权利要求3所述的脑图生成方法，其特征在于，根据所述节点信息，在新建页面中绘制与所述源数据对应的脑图包括：

执行预设SVG语句，以根据所述节点信息生成SVG文件；

将所述SVG文件发送给浏览器，以供所述浏览器在所述新建页面中按照所述SVG文件渲染出与所述源数据对应的脑图。

5.根据权利要求4所述的脑图生成方法，其特征在于，根据所述节点信息，绘制与所述源数据对应的脑图还包括：

执行预设HTML语句，以展现所述新建页面的结构；

执行预设CSS语句，以控制所述新建页面的样式；

执行预设JavaScript语句，以控制生成脑图的执行逻辑。

6.根据权利要求1至5中任一项所述的脑图生成方法，其特征在于，所述代码编辑器为VS Code代码编辑器，所述方法是由所述VS Code代码编辑器加载的插件执行的。

7.一种脑图生成装置，应用于脑图生产***，所述脑图生产***至少包括脑图编辑器和代码编辑器，其特征在于，所述脑图生成装置包括：

获取模块，用于当预设数据格式的脑图文件被所述代码编辑器运行时，获取所述脑图文件的源数据；

分析模块，用于根据所述源数据，分析与所述源数据对应的脑图的节点信息；

绘制模块，用于根据所述节点信息，在新建页面中绘制与所述源数据对应的脑图。

8.根据权利要求7所述的脑图生成装置，其特征在于，所述脑图生成装置还包括：

判断模块，用于判断所述源数据的数据类型是否为字符串类型；

执行模块，用于在判断到所述源数据的数据类型为字符串类型的情况下，执行预设JSON语句，以将所述源数据的数据类型转换为对象类型。

9.根据权利要求7所述的脑图生成装置，其特征在于，所述绘制模块包括：

生成单元，用于执行预设SVG语句，以根据所述节点信息生成SVG文件；

发送单元，用于将所述SVG文件发送给浏览器，以供所述浏览器在所述新建页面中按照所述SVG文件渲染出与所述源数据对应的脑图。

10.一种计算机可读存储介质，其上存储有计算机程序指令，其特征在于，当所述计算机程序指令被处理器执行时实现如权利要求1至6中任一项所述的方法。

Images