流程图渲染方法及装置、电子设备和介质

技术领域

本公开涉及计算机领域，尤其涉及数据渲染技术领域，具体涉及一种流程图渲染方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

背景技术

流程图被广泛地应用于业务流程分析、计算机程序设计、数据处理系统的开发和管理等领域。正如人们所熟知的，流程图是形式化地表示程序逻辑序列、工作处理过程、组织结构等等的图示。通常，从后端获取的用于生成流程图的数据包括节点信息以及边信息等。然后，通过数据渲染的方式将流程图显示在前端页面中。但是，通常的流程图渲染方法与其他组件的渲染逻辑深度耦合，且很难适应特殊流程图场景的渲染，因此其程序的扩展性较差、兼容性不高。

发明内容

本公开提供了一种流程图渲染方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

根据本公开的一方面，提供了一种流程图渲染方法，包括：获取树结构的待渲染流程图的数据，其中所述树结构包括主树结构；确定主根节点以及所述主根节点的坐标，其中所述主根节点为所述主树结构的根节点；确定所述树结构中的除所述主根节点之外的非主根节点的坐标，其中对于每一个所述非主根节点：基于所述主根节点的坐标、所述非主根节点所在层数以及预设的层间距确定所述非主根节点的第一维坐标；基于所述主根节点的坐标以及所述非主根节点的叶子节点数量确定所述非主根节点的第二维坐标；以及基于所确定的所述树结构节点的坐标对所述待渲染流程图进行渲染。

根据本公开的另一方面，提供了一种流程图渲染装置，包括：获取单元，配置为获取树结构的待渲染流程图的数据，其中所述树结构包括主树结构；第一确定单元，配置为确定主根节点以及所述主根节点的坐标，其中所述主根节点为所述主树结构的根节点；第二确定单元，配置为确定所述树结构中的除所述主根节点之外的非主根节点的坐标，其中对于每一个所述非主根节点：基于所述主根节点的坐标、所述非主根节点所在层数以及预设的层间距确定所述非主根节点的第一维坐标；基于所述主根节点的坐标以及所述非主根节点的叶子节点数量确定所述非主根节点的第二维坐标；以及渲染单元，配置为基于所确定的所述树结构节点的坐标对所述待渲染流程图进行渲染。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；存储器存储有可被至少一个处理器执行的指令，该指令被至少一个处理器执行，以使至少一个处理器能够执行本公开所述的方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该计算机指令用于使计算机执行本公开所述的方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现本公开所述的方法。

根据本公开的一个或多个实施例，该流程图渲染方法通过对树结构的待渲染数据计算节点坐标，可以方便地对多种形式和布局的流程图进行渲染；且扩展性较高，兼容性较好。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图示例性地示出了实施例并且构成说明书的一部分，与说明书的文字描述一起用于讲解实施例的示例性实施方式。所示出的实施例仅出于例示的目的，并不限制权利要求的范围。在所有附图中，相同的附图标记指代类似但不一定相同的要素。

图1示出了根据本公开的实施例的可以在其中实施本文描述的各种方法的示例性系统的示意图；

图2示出了根据本公开的实施例的流程图渲染方法的流程图；

图3示出了根据本公开的实施例的一个示例性流程图的示意图；

图4示出了根据本公开的实施例的包含下钻关系的流程图的示意图；

图5示出了根据本公开的实施例的扁平化结构数据的示意图；

图6示出了图5所示的数据转换为树结构后的示意图；

图7示出了根据本公开的实施例的包含多根节点的流程图示意图；

图8示出了对图7所示的流程图计算节点坐标的示意图；

图9示出了根据本公开的实施例的计算叶子节点高度的示意图；

图10示出了根据本公开的实施例的流程图渲染的结构框图；以及

图11示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

在本公开中，除非另有说明，否则使用术语“第一”、“第二”等来描述各种要素不意图限定这些要素的位置关系、时序关系或重要性关系，这种术语只是用于将一个元件与另一元件区分开。在一些示例中，第一要素和第二要素可以指向该要素的同一实例，而在某些情况下，基于上下文的描述，它们也可以指代不同实例。

在本公开中对各种所述示例的描述中所使用的术语只是为了描述特定示例的目的，而并非旨在进行限制。除非上下文另外明确地表明，如果不特意限定要素的数量，则该要素可以是一个也可以是多个。此外，本公开中所使用的术语“和/或”涵盖所列出的项目中的任何一个以及全部可能的组合方式。

下面将结合附图详细描述本公开的实施例。

图1示出了根据本公开的实施例可以将本文描述的各种方法和装置在其中实施的示例性系统100的示意图。参考图1，该系统100包括一个或多个客户端设备101、102、103、104、105和106、服务器120以及将一个或多个客户端设备耦接到服务器120的一个或多个通信网络110。客户端设备101、102、103、104、105和106可以被配置为执行一个或多个应用程序。

在本公开的实施例中，服务器120可以运行使得能够执行流程图渲染方法的一个或多个服务或软件应用。

在某些实施例中，服务器120还可以提供可以包括非虚拟环境和虚拟环境的其他服务或软件应用。在某些实施例中，这些服务可以作为基于web的服务或云服务提供，例如在软件即服务(SaaS)模型下提供给客户端设备101、102、103、104、105和/或106的用户。

在图1所示的配置中，服务器120可以包括实现由服务器120执行的功能的一个或多个组件。这些组件可以包括可由一个或多个处理器执行的软件组件、硬件组件或其组合。操作客户端设备101、102、103、104、105和/或106的用户可以依次利用一个或多个客户端应用程序来与服务器120进行交互以利用这些组件提供的服务。应当理解，各种不同的系统配置是可能的，其可以与系统100不同。因此，图1是用于实施本文所描述的各种方法的系统的一个示例，并且不旨在进行限制。

客户端设备101、102、103、104、105和/或106可以用来显示渲染后的流程图、接收用户输入等等。客户端设备可以提供使客户端设备的用户能够与客户端设备进行交互的接口。客户端设备还可以经由该接口向用户输出信息。尽管图1仅描绘了六种客户端设备，但是本领域技术人员将能够理解，本公开可以支持任何数量的客户端设备。

客户端设备101、102、103、104、105和/或106可以包括各种类型的计算机设备，例如便携式手持设备、通用计算机(诸如个人计算机和膝上型计算机)、工作站计算机、可穿戴设备、游戏系统、瘦客户端、各种消息收发设备、传感器或其他感测设备等。这些计算机设备可以运行各种类型和版本的软件应用程序和操作系统，例如Microsoft Windows、AppleiOS、类UNIX操作系统、Linux或类Linux操作系统(例如Google Chrome OS)；或包括各种移动操作系统，例如Microsoft Windows Mobile OS、iOS、Windows Phone、Android。便携式手持设备可以包括蜂窝电话、智能电话、平板电脑、个人数字助理(PDA)等。可穿戴设备可以包括头戴式显示器和其他设备。游戏系统可以包括各种手持式游戏设备、支持互联网的游戏设备等。客户端设备能够执行各种不同的应用程序，例如各种与Internet相关的应用程序、通信应用程序(例如电子邮件应用程序)、短消息服务(SMS)应用程序，并且可以使用各种通信协议。

网络110可以是本领域技术人员熟知的任何类型的网络，其可以使用多种可用协议中的任何一种(包括但不限于TCP/IP、SNA、IPX等)来支持数据通信。仅作为示例，一个或多个网络110可以是局域网(LAN)、基于以太网的网络、令牌环、广域网(WAN)、因特网、虚拟网络、虚拟专用网络(VPN)、内部网、外部网、公共交换电话网(PSTN)、红外网络、无线网络(例如蓝牙、WIFI)和/或这些和/或其他网络的任意组合。

服务器120可以包括一个或多个通用计算机、专用服务器计算机(例如PC(个人计算机)服务器、UNIX服务器、中端服务器)、刀片式服务器、大型计算机、服务器群集或任何其他适当的布置和/或组合。服务器120可以包括运行虚拟操作系统的一个或多个虚拟机，或者涉及虚拟化的其他计算架构(例如可以被虚拟化以维护服务器的虚拟存储设备的逻辑存储设备的一个或多个灵活池)。在各种实施例中，服务器120可以运行提供下文所描述的功能的一个或多个服务或软件应用。

服务器120中的计算单元可以运行包括上述任何操作系统以及任何商业上可用的服务器操作系统的一个或多个操作系统。服务器120还可以运行各种附加服务器应用程序和/或中间层应用程序中的任何一个，包括HTTP服务器、FTP服务器、CGI服务器、JAVA服务器、数据库服务器等。

在一些实施方式中，服务器120可以包括一个或多个应用程序，以分析和合并从客户端设备101、102、103、104、105和106的用户接收的数据馈送和/或事件更新。服务器120还可以包括一个或多个应用程序，以经由客户端设备101、102、103、104、105和106的一个或多个显示设备来显示数据馈送和/或实时事件。

在一些实施方式中，服务器120可以为分布式系统的服务器，或者是结合了区块链的服务器。服务器120也可以是云服务器，或者是带人工智能技术的智能云计算服务器或智能云主机。云服务器是云计算服务体系中的一项主机产品，以解决传统物理主机与虚拟专用服务器(VPS，Virtual Private Server)服务中存在的管理难度大、业务扩展性弱的缺陷。

系统100还可以包括一个或多个数据库130。在某些实施例中，这些数据库可以用于存储数据和其他信息。例如，数据库130中的一个或多个可用于存储诸如待渲染数据等数据。数据存储库130可以驻留在各种位置。例如，由服务器120使用的数据存储库可以在服务器120本地，或者可以远离服务器120且可以经由基于网络或专用的连接与服务器120通信。数据存储库130可以是不同的类型。在某些实施例中，由服务器120使用的数据存储库可以是数据库，例如关系数据库。这些数据库中的一个或多个可以响应于命令而存储、更新和检索到数据库以及来自数据库的数据。

在某些实施例中，数据库130中的一个或多个还可以由应用程序使用来存储应用程序数据。由应用程序使用的数据库可以是不同类型的数据库，例如键值存储库，对象存储库或由文件系统支持的常规存储库。

图1的系统100可以以各种方式配置和操作，以使得能够应用根据本公开所描述的各种方法和装置。

从后端获取的流程图数据通过渲染显示在前端。但是，通常的渲染坐标算法和graph配置、数据理解部分流程图深度耦合，流行的坐标计算框架(例如ECharts mindmap-layout、antv/hierarchy)并不支持特殊场景的渲染(例如多根节点)，且扩展性较差。

因此，根据本公开的实施例提供了一种流程图渲染方法，如图2所示，包括：获取树结构的待渲染流程图的数据，其中所述树结构包括主树结构(步骤210)；确定主根节点以及主根节点的坐标，主根节点为主树结构的根节点(步骤220)；基于主根节点的坐标确定树结构中的除主根节点之外的非主根节点的坐标，其中对于每一个所述非主根节点：基于所述主根节点的坐标、非主根节点所在层数以及预设的层间距确定非主根节点的第一维坐标；基于所述主根节点的坐标以及非主根节点的叶子节点数量确定所述根节点的第二维坐标(步骤230)；以及基于所确定的节点的坐标对待渲染流程图进行渲染(步骤240)。

根据本公开的实施例，该流程图渲染方法通过对树结构的待渲染数据计算节点坐标，可以方便地对多种形式和布局的流程图进行渲染；且扩展性较高，兼容性较好。

在根据本公开的实施例中，可以对树结构待渲染流程图的数据进行预处理，以确定其各节点的坐标。该树结构可以为一个或多个，并且其中一个为主树结构，主树结构的根节点为主根节点，除该主根节点之外的其他所有节点为非主根节点。主树结构以外的其他树结构为从树结构(如果存在的话)。

待渲染的数据可以通过渲染等操作以相应的布局展示在前端，例如显示的流程图可以如图3所示。通常，待渲染的数据可能并非直接以树结构进行存储，而是以扁平化结构进行存储，即边信息和节点信息分开存储。在如图3所示的示例中，获取到的该流程图所对应的扁平化结构数据中的部分节点信息和边信息可以如下所示：

在获取到的待渲染数据为扁平化结构的情况下，需要先将其转换为树结构。因此，根据一些实施例，获取树结构的待渲染流程图的数据可以包括：获取扁平化结构的待渲染流程图的数据；确定扁平化结构的数据中的节点信息和边信息；基于节点信息和边信息确定根节点；将节点信息和边信息分别转换为键值对；以及基于键值对和根节点，通过深度优先遍历将获得的数据转换为树结构。

在获取到该扁平化结构的数据之后，可以将其转换为键值对，即key-value格式。例如，上述节点信息转换后的key-value格式可以如下所示：trigger：{id:"trigger",label:"trigger",shape:"flow-chart-circle",text:"",x:0,…}；上述边信息转换后的key-value格式可以如下所示：trigger：["source"]。

通过将所获取的数据转换为key-value格式，可以清晰地获得父子节点、兄弟节点等关系，从而更有利于节点和边信息的获取，无需多次遍历，减少了算法的时间复杂度。

根据一些实施例，将节点信息和边信息分别转换为键值对可以包括：响应于确定包括表示节点映射关系的边信息，不将该边信息转换为键值对。

具有映射关系的节点之间并不是真正的父子节点，节点映射关系仅仅用于表示节点之间在一定意义上可能存在某种关联。如图3所示的示例中的节点“数据清洗”以及节点“CDSS Schema转换”之间存在映射关系(在图中以虚线表示)。在将节点信息和边信息分别转换为键值对的过程中，可以识别表示节点映射关系的边信息的关键字，例如关键字“dashed-edge”表示节点映射关系。如果边信息中存在映射关系(edge.shape＝＝＝‘dashed-edge’)，则不在边的键值对中保存该表示映射关系的边信息，以使得该映射关系不对后续的坐标计算以及数据渲染产生影响。

在一些示例中，还可以进一步确定节点信息中的根节点，以建立根节点数组。根节点(root)是树结构的一个组成部分，在所有非空树结构中，有且仅有一个根节点。根节点是同一棵树中除本身外所有节点的祖先，没有父节点。在根据本公开的实施例中，根节点可以为一个或多个，即所获取的待渲染数据可以转换为一个或多个树结构。

根据一些实施例，如果确定包括表示节点下钻关系的边信息，则不将该边信息所对应的目标节点确定为根节点。下钻用于表示从当前数据往下展开下一层数据，例如：某数据的分类下面分为品名的情况下，从分类列表展开到品名列表。为了使得下钻关系不影响根节点的判断，可以通过维护一个临时变量来保存下钻关系所对应的目标节点标识。例如，可以识别表示节点下钻关系的边信息的关键字，例如关键字“arrow-edge”表示节点下钻关系。如果边信息中存在下钻关系(edge.shape＝＝＝'arrow-edge')，则将下钻关系所对应的目标节点的标识(例如节点ID)保存在临时变量中。在确定根节点的过程中，可以通过读取该临时变量来将相应的目标节点从根节点中排除。

如图4所示，table1和table2分别表示两个流程图的第一个节点，table1和table2之间存在下钻关系(如图4所示的field2节点和table1节点之间，以包含菱形块的箭头示出)。因此，在转换为树结构的过程中，可以不将table1确定为根节点，而仅将其识别为field2的子节点，从而防止在坐标计算以及渲染过程中出现节点布局混乱。

根据一些实施例，在将待渲染数据转换为键值对之后，可以通过深度优先遍历将待渲染数据转换为树结构。在该转换树结构的过程中，记录已遍历节点的信息，以使得已遍历过的节点不再进行重复遍历。这样，在存在环状的情况下，防止节点的重复遍历，避免了无限循环情况的发生；并且，不对流程图的经纬度坐标的计算产生影响。

图5示出了扁平化结构的节点信息和边信息的示例。可以通过深度优先遍历(递归)的方式将其转换为树结构。例如，首先可以判断边的键值对集合中是否存在对应于根节点的关键字。若存在，则说明该扁平化结构存在父子节点关系，可转化为树结构。在边的键值对集合中，遍历包含根节点关键字的边信息，即确定根节点的子节点信息；并且，可以记录相应的层数、兄弟节点等信息。递归调用函数，直到遍历完所有节点为止。在此过程中，通过全局变量标记各节点是否已被遍历过，若已遍历过则不再重复遍历，以在存在环状时避免无限循环情况的发生。图5所示的扁平化结构数据转换后的树结构可以如图6所示。

在一些实施例中，可以基于后端获取的原始数据以及计算得到的节点坐标进行流程图的渲染。这样，例如环形、映射关系等边信息在渲染时可以得以保留。

在一些实施例中，可以设置主树结构的主根节点的坐标，例如默认主根节点的坐标为坐标原点(0,0)，以基于该主根节点的坐标进一步确定树结构中的其他节点的坐标。可以理解，主根节点的坐标也可以设置为其他任意坐标点的形式，例如(1,1)、(4,6)等。

根据一些实施例，根据本公开的方法200还可以包括：在确定非主根节点的坐标之前，确定树结构的渲染方向，以基于渲染方向确定所述第一维坐标和第二维坐标。

可以理解的是，第一维坐标和第二维坐标是相对的。即，在某一种渲染方向下，第一维坐标可以为X坐标、第二维坐标可以为Y坐标；在另一种渲染方向下，第一维坐标可以为Y坐标、第二维坐标为可以X坐标。

根据一些实施例，渲染方向可以包括从上到下、从下到上、从左到右、从右到左等。

在一些示例中，用户可以根据需要设置流程图的渲染方向，其中包括主流程图(对应于主树结构)的渲染方向以及从流程图(对应于从树结构)的渲染方向。在只包含主流程图的示例中，该渲染方向可以包括：从上到下、从下到上、从左到右、从右到左中的任意一种。在包括主流程图和至少一个从流程图的示例中，从流程图的渲染方向可以与主流程图的渲染方向一致，也可以不一致。示例地，用户可以根据需要设置多种可能的渲染规则，每种规则对应一种流程图布局方式，其中可包含一种或多种渲染方向。例如，渲染规则direction:lr可以表示主流程图从左向右渲染、从流程图(如果存在)从右向左渲染；渲染规则direction:rl表示主流程图从右向左渲染、从流程图(如果存在)从左向右渲染；渲染规则direction:tb表示主流程图从上向下渲染、从流程图(如果存在)从上向下渲染，主从流程图并排排列、不同的从流程图沿竖直方向排列)；渲染规则direction:bt表示主流程图从下向上渲染、从流程图(如果存在)从下向上渲染，主从流程图并排排列、不同的从流程图沿竖直方向排列。可以理解的是，对应其他流程图布局的渲染规则也是可以的，上述描述仅仅是示例性的。

根据一些实施例，根据本公开的方法还可以包括：响应于树结构还包括至少一个从树结构，确定每一个树结构的最大层数。即，在转换后的树结构不止一个时(即包括多个根节点)，确定每一个树结构的最大层数。从而，基于所确定的最大层数以及渲染方向确定从树结构中的各节点的第一维坐标。

示例地，如图7所示的场景下，左侧的根节点为“出院记录”的流程图为主流程图，右侧的根节点为“db1 table1”和“db2 table2”的流程图为从流程图。图7中所示出的流程图渲染方向对应于上面所述的渲染规则direction:lr，即主流程图从左向右渲染、从流程图(如果存在)从右向左渲染。假设图7中水平方向对应于X方向，竖直方向对应于Y方向，则最大层数对于右侧流程图(从树结构)的根节点的位置产生影响。最大层数越多，右侧流程图的根节点位置就会越向右侧移动，反之越向左侧移动。因此，通过确定树结构的最大层数可以进一步确定右侧流程图的X坐标(即第一维坐标)

通过对树结构中根节点的深度优先遍历，可以确定不同根节点所对应的层数。具体地，在如图7所示的示例中，可以通过设置相应的参数以标记相应的根节点是左侧节点或者右侧节点。例如，参数isRightRoot＝true表示右侧节点、isRightRoot＝false表示左侧节点。通过遍历，可以获得左侧流程图所对应的树结构和右侧流程图所对应的树结构的各自的最大层数。在该示例中，从树结构在右侧沿竖直方向排列，其中层数最多的从树结构的最大层数作为右侧根节点的最大层数。即，如果某个根节点为右侧节点，且其他右侧节点的最大层数小于该右侧节点的最大层数，则将该右侧节点的最大层数标记为右侧节点的最大层数。如图7所示，左侧流程图最大层数为3，右侧流程图(Db流程图)最大层数为2。

在一些示例中，如果根节点无子节点，其最大层数可以为0。

在一些示例中，可以通过深度遍历递归算法，在将扁平化结构转为树结构的同时，得到各节点的层数以及相应树结构的最大层数。

应当理解，在其他渲染方向或渲染规则下，通过相应的最大层数确定从树结构的第一维坐标的方式将是可以预测的，其与上述操作类似，在此不再赘述。

根据一些实施例，根据本公开的方法还包括获取层间距的步骤，以进一步基于层间距(即树结构中的父子节点之间的间距)确定节点的第一维坐标。

根据一些实施例，根据本公开的方法还可以包括：响应于所述树结构包括至少一个从树结构，获取排列间距，以基于该排列间距确定从树结构中的节点的第一维坐标和第二维坐标中的相应一个。排列间距用于表示主树结构和至少一个从树结构之间的间距。

参考图8，在设置了主根节点(节点：出院记录)的坐标后，通过主流程图的最大层数maxtier、从流程图(右侧)的最大层数dbmaxtier以及获取的排列间距rankGap和层间距LayerWidth即可进一步确定从流程图的节点的第一维坐标和第二维坐标中的相应一个。在图8所示的渲染方向下，可以进一步确定从流程图的第一维坐标，在此示例中为X坐标。

进一步地，在节点宽度不为0时，还可以进一步获取节点宽度nodeWidth。因此，继续参考图8，通过主流程图的最大层数、从流程图(右侧)的最大层数dbmaxtier、节点宽度nodeWidth、层间距layerWidth、排列间距rankGap可以确定D和C点的X坐标。同理，其他节点的X坐标也可进一步确定。

根据一些实施例，基于非主根节点的叶子节点数量确定非主根节点的第二维坐标可以包括：响应于树结构包括至少一个从树结构，基于主根节点的坐标确定从根节点的第二维坐标，从根节点即为从树结构的根节点。对于每一个树结构：依次对除根节点外的每一层进行节点遍历，以确定所述每一层中的每一个节点的第二维坐标。

在一些实施例中，还可以进一步获取节点间距，如图8中的节点间距nodeGap。因此，可以进一步基于获得的节点间距确定非主根节点的第二维坐标。

进一步地，在节点高度不为0时，还可以进一步获取节点高度nodeHeight。但是应该理解，这里的节点高度和节点宽度仅仅用于示例性地描述相应节点的坐标计算方法，高度并不一定仅仅用于表示竖直方向距离，宽度也不一定仅仅用于表示水平方向距离。

继续参考图8，D点的Y坐标可以通过从树结构的总叶子节点数量和各个从根节点的叶子节点数量确定。基于从树结构的总叶子节点数量，可以确定从树结构的总叶子节点的总高度dbheight。该示例中从树结构沿主根节点“出院记录”所在X轴对称展示因此可以基于总高度dbheight确定C节点的Y坐标，即总高度dbheight的一半。第一从树结构db1包含3个叶子节点，因此可以在C点的基础上进一步确定D点的Y坐标。同理，也可确定从树结构db2的Y坐标。

可以理解的是，上述描述仅仅是示例的，在其他渲染方向下从根节点的第二维坐标的计算方法是可以预测的，其与上述操作类似，在此不再赘述。

在确定从根节点的坐标后，可以进一步通过遍历获取除根节点外的每一个节点的第二维坐标。

根据一些实施例，依次对除根节点外的每一层进行遍历可以包括：对于除根节点外的每一层：基于所述层中的第一节点的父节点的第二维坐标以及所述父节点的叶子节点在所述第二维坐标方向上的高度值初始化指针；以及基于所述指针以及所述每一个节点的叶子节点数量确定所述每一个节点的第二维坐标。其中，每确定一个节点的第二维坐标后对所述指针进行更新。

根据一些实施例，基于指针以及每一个节点的叶子节点数量确定每一个节点的第二维坐标包括：基于所述指针的值以及所述每一个节点的叶子节点在所述第二维坐标方向上高度值确定所述每一个节点的第二维坐标；响应于当前节点的第二维坐标已确定，基于所述当前节点的叶子节点在所述第二维坐标方向上的高度值更新所述指针的值；以及基于更新后的所述指针确定所述层中的下一个节点的第二维坐标。

在一些实施例中，可以设置例如父节点在其叶子节点的中心位置、子节点按照指定的顺序依次排列、同层节点沿相应方向对齐等前置条件，由此可方便地基于非主根节点的叶子节点数量确定其相应的第二维坐标。

继续参考图8，在确定了主流程图的根节点“出院记录”——A点的坐标后，可以基于其叶子节点的数量(8个)确定B点的高度。即，通过根节点(A)的叶子节点数量确定叶子节点的总高度childrenHeight，进而确定B点的Y坐标，即A点Y坐标减去总高度childrenHeight的一半。在B点所对应的层中(即节点“患者ID”所在层)，基于B点的高度值初始化一个指针。节点“患者ID”无叶子节点，其高度值即为当前指针的值。然后，在确定该层的下一个节点“姓名”的Y坐标之前，需要对该指针的值进行更新。其中，基于当前节点(即节点“患者ID”)的叶子节点在第二维坐标方向上高度值更新指针的值。因为节点“患者ID”无叶子节点，所以将该指针加上nodeGAp以及nodeHeight的和之后作为新的指针来进一步确定下一个节点——即“姓名”节点的Y坐标。同理，依次确定“性别”节点、“诊疗经过”节点、以及“就诊ID”节点的Y坐标。

可以看出，在确定了节点“就诊ID”的Y坐标后，因为节点“就诊ID”无叶子节点，则将对应节点“就诊ID”的指针加上nodeGAp以及nodeHeight的和之后作为新的指针来进一步确定“诊断”节点的Y坐标，此时指针指示“诊断”节点的第一个子节点“诊断类型”的高度。因“诊断”节点包含3个叶子节点，因此“诊断”节点的Y坐标＝当前指针值+3个叶子节点的高度值/2。可以基于节点高度和节点间距确定叶子高度。如果“诊断”节点还存在其他兄弟节点(图中未示出)，即“诊断”节点下方还包括另一个节点时，在确定该节点的Y坐标之前，更新指针的值。因“诊断”节点包含3个叶子节点，所以更新后指针＝当前指针值(对应于“诊断”节点，其指示“诊断”节点的第一个子节点“诊断类型”的高度)+3个叶子节点的高度值+nodeGAp。

可以理解的是，上述描述仅仅是示例的，在其他渲染方向下第二维坐标的计算方法是可以预测的，其与上述操作类似，在此不再赘述。

进一步地，图9中示出了基于叶子节点数量确定叶子节点的总高度childrenHeight的示意图。图9中示出了图3中所示流程图的一部分，其中节点“Schema校验”包括4个叶子节点，即节点“sink1”、节点“nlu”、节点“sink3”以及节点“CDSS Schema转换”，因此节点“Schema校验”所对应的childrenHeight＝节点高度*4+节点间隔*3。

根据一些实施例，根据本公开的方法200还包括：响应于至少一个节点所对应的折叠按钮被触发，重新确定所述树结构的节点坐标；以及基于重新确定后的坐标重新进行流程图的渲染。其中，折叠按钮被触发后，其所对应的节点下的所有子节点将被隐藏。

继续参考图8，“出院记录”等节点下设置有折叠按钮(在附图中以符号“+”示出)。当“出院记录”节点的折叠按钮被触发后，该节点下的所有子节点将被隐藏。此时，可以重新调用根据本公开的流程图渲染方法，以在去除树结构中的“出院记录”节点下的所有子节点的情况下重新进行节点坐标的计算，以基于重新计算后的坐标进行流程图的渲染。

根据本公开的实施例，还提供了一种流程图渲染装置1000，如图10所示，包括：获取单元1010，配置为获取树结构的待渲染流程图的数据，其中所述树结构包括主树结构；第一确定单元1020，配置为确定主根节点以及所述主根节点的坐标，其中所述主根节点为所述主树结构的根节点；第二确定单元1030，配置为确定所述树结构中的除所述主根节点之外的非主根节点的坐标，其中对于每一个所述非主根节点：基于所述主根节点的坐标、所述非主根节点所在层数以及预设的层间距确定所述非主根节点的第一维坐标；基于所述主根节点的坐标以及所述非主根节点的叶子节点数量确定所述非主根节点的第二维坐标；以及渲染单元1040，配置为基于所确定的所述树结构节点的坐标对所述待渲染流程图进行渲染。

这里，流程图渲染装置1000的上述各单元1010～1040的操作分别与前面描述的步骤210～240的操作类似，在此不再赘述。

根据本公开的示例性实施例还提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述流程图渲染方法。

根据本公开的示例性实施例还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行上述流程图渲染方法。

根据本公开的示例性实施例还提供了一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现上述流程图渲染方法。

参考图11，现将描述可以作为本公开的服务器或客户端的电子设备1100的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图11所示，设备1100包括计算单元1101，其可以根据存储在只读存储器(ROM)1102中的计算机程序或者从存储单元1108加载到随机访问存储器(RAM)1103中的计算机程序，来执行各种适当的动作和处理。在RAM1103中，还可存储设备1100操作所需的各种程序和数据。计算单元1101、ROM 1102以及RAM 1103通过总线1104彼此相连。输入/输出(I/O)接口1105也连接至总线1104。

设备1100中的多个部件连接至I/O接口1105，包括：输入单元1106、输出单元1107、存储单元1108以及通信单元1109。输入单元1106可以是能向设备1100输入信息的任何类型的设备，输入单元1106可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入，并且可以包括但不限于鼠标、键盘、触摸屏、轨迹板、轨迹球、操作杆、麦克风和/或遥控器。输出单元1107可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元1108可以包括但不限于磁盘、光盘。通信单元1109允许设备1100通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、1302.11设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元1101可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1101的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元1101执行上文所描述的各个方法和处理，例如方法200。例如，在一些实施例中，方法200可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1108。在一些实施例中，计算机程序的部分或者全部可以经由ROM 1102和/或通信单元1109而被载入和/或安装到设备1100上。当计算机程序加载到RAM 1103并由计算单元1101执行时，可以执行上文描述的方法200的一个或多个步骤。备选地，在其他实施例中，计算单元1101可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行方法200。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行、也可以顺序地或以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

虽然已经参照附图描述了本公开的实施例或示例，但应理解，上述的方法、系统和设备仅仅是示例性的实施例或示例，本发明的范围并不由这些实施例或示例限制，而是仅由授权后的权利要求书及其等同范围来限定。实施例或示例中的各种要素可以被省略或者可由其等同要素替代。此外，可以通过不同于本公开中描述的次序来执行各步骤。进一步地，可以以各种方式组合实施例或示例中的各种要素。重要的是随着技术的演进，在此描述的很多要素可以由本公开之后出现的等同要素进行替换。