代码结构的可视化方法和装置与流程

1.本公开总体说来涉及计算机技术领域，更具体地讲，涉及一种代码结构的可视化方法和装置。


背景技术：

2.目前作为主流开发工具的各种notebook工具，例如jupyter notebook，可以在网页页面中直接编写代码和运行代码，代码的运行结果会直接在代码块下显示，相较于传统ide(integrated development environment，集成开发环境)由上至下的运行方式而言，为代码编写提供了极大的便利。然而，目前notebook工具的代码编写区域只有垂直方向，缺少代码块的分支管理，代码易覆盖，结果难以复现。即使是在notebook工具中使用目录插件，也只能区分代码块的层级，当层级下有多个分支时，则无法直观体现完整路径。另外，目前notebook工具还缺少以执行路径为基础的结构化视角，尽管少数工具通过上下游依赖关系图帮助用户梳理代码脉络，但是上下游依赖关系图脉络复杂，且无法复现执行路径。


技术实现要素：

3.本公开提供一种代码结构的可视化方法和装置，用于至少解决上述问题，也可不解决上述问题。
4.根据本公开的一方面，提供一种代码结构的可视化方法，所述可视化方法包括：响应于用户创建代码块，生成与所述代码块对应的导图节点；基于所述导图节点，生成具有分支结构的代码结构导图，以使所述代码结构可视化，其中，响应于用户创建代码块，生成与所述代码块对应的导图节点，包括：当用户创建第一代码块时，生成第一导图节点；当用户创建第一子代码块时，生成第一子导图节点，其中，所述第一子代码块是所述第一代码块的子代码块，所述第一子导图节点是所述第一导图节点的子节点；当用户创建第二子代码块时，生成第二子导图节点，其中，所述第二子代码块是所述第一代码块的子代码块，所述第二子导图节点是所述第一导图节点的子节点，以使所述第一导图节点、所述第一子导图节点和所述第二子导图节点之间形成分支结构。
5.可选地，所述代码结构导图包括第一路径和第二路径，所述第一路径的导图节点包括所述第一导图节点和所述第一子导图节点，所述第二路径的导图节点包括所述第一导图节点和所述第二子导图节点。
6.可选地，所述可视化方法还包括：当用户编辑所述第一代码块时，将所述第一导图节点呈现为编辑状态，并且将所述第一路径的其他导图节点呈现为醒目状态。
7.可选地，所述可视化方法还包括：当用户编辑所述第一代码块时，还将所述第二路径的其他导图节点呈现为非醒目状态。
8.可选地，所述可视化方法还包括：当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，将该导图节点切换为编辑状态，以使该导图节点对应的代码块可被用户编辑。
9.可选地，当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，该导图节点切换为编辑状态，包括：当用户选中任意一个呈现为非醒目状态的导图节点时，将所述第二路径的其他导图节点切换为醒目状态，并且将所述第一路径的导图节点切换为非醒目状态。
10.可选地，所述可视化方法还包括：当用户编辑任意一个代码块的标题时，将该代码块对应的导图节点的标题修改为用户编辑的该代码块的标题。
11.可选地，所述可视化方法还包括：当用户将所述第一子导图节点移动至任意一个导图节点所在的位置时，将所述第一子导图节点和所述第一子导图节点后续的所有导图节点进行整体移动，并将所述第一子导图节点作为该导图节点的子节点，以调整所述代码结构。
12.可选地，所述可视化方法还包括：当用户标记任意一个代码块时，对该代码块对应的导图节点进行标记，以通过所述标记定位该代码块或该代码块对应的导图节点。
13.根据本公开的另一方面，提供一种代码结构的可视化装置，所述可视化装置包括：节点生成单元，被配置为：响应于用户创建代码块，生成与所述代码块对应的导图节点；导图生成单元，被配置为：基于所述导图节点，生成具有分支结构的代码结构导图，以使所述代码结构可视化，其中，节点生成单元还被配置为：当用户创建第一代码块时，生成第一导图节点；当用户创建第一子代码块时，生成第一子导图节点，其中，所述第一子代码块是所述第一代码块的子代码块，所述第一子导图节点是所述第一导图节点的子节点；当用户创建第二子代码块时，生成第二子导图节点，其中，所述第二子代码块是所述第一代码块的子代码块，所述第二子导图节点是所述第一导图节点的子节点，以使所述第一导图节点、所述第一子导图节点和所述第二子导图节点之间形成分支结构。
14.可选地，所述代码结构导图包括第一路径和第二路径，所述第一路径的导图节点包括所述第一导图节点和所述第一子导图节点，所述第二路径的导图节点包括所述第一导图节点和所述第二子导图节点。
15.可选地，所述可视化装置还包括：状态呈现单元，被配置为：当用户编辑所述第一代码块时，将所述第一导图节点呈现为编辑状态，并且将所述第一路径的其他导图节点呈现为醒目状态。
16.可选地，所述状态呈现单元被配置为：当用户编辑所述第一代码块时，还将所述第二路径的其他导图节点呈现为非醒目状态。
17.可选地，所述可视化装置还包括：状态切换单元，被配置为：当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，将该导图节点切换为编辑状态，以使该导图节点对应的代码块可被用户编辑。
18.可选地，所述状态切换单元被配置为：当用户选中任意一个呈现为非醒目状态的导图节点时，将所述第二路径的其他导图节点切换为醒目状态，并且将所述第一路径的导图节点切换为非醒目状态。
19.可选地，所述可视化装置还包括：标题编辑单元，被配置为：当用户编辑任意一个代码块的标题时，将该代码块对应的导图节点的标题修改为用户编辑的该代码块的标题。
20.可选地，所述可视化装置还包括：结构调整单元，被配置为：当用户将所述第一子导图节点移动至任意一个导图节点所在的位置时，将所述第一子导图节点和所述第一子导
图节点后续的所有导图节点进行整体移动，并将所述第一子导图节点作为该导图节点的子节点，以调整所述代码结构。
21.可选地，所述可视化装置还包括：节点标记单元，被配置为：当用户标记任意一个代码块时，对该代码块对应的导图节点进行标记，以通过所述标记定位该代码块或该代码块对应的导图节点。
22.根据本公开的另一方面，提供一种存储指令的计算机可读存储介质，其中，当所述指令被至少一个计算装置运行时，促使所述至少一个计算装置执行如上所述的代码结构的可视化方法。
23.根据本公开的另一方面，提供一种包括至少一个计算装置和至少一个存储指令的存储装置的系统，其中，所述指令在被所述至少一个计算装置运行时，促使所述至少一个计算装置执行如上所述的代码结构的可视化方法。
24.根据本公开示例性实施例的代码结构的可视化方法和装置，在用户编写代码时，能够支持创建分支，并实时生成结构化导图，能够支持导图与代码块交互联动，灵活查看上下级或者各层级的分支，能够支持通过操作导图调整代码分支结构，以及能够支持标记代码块或者导图节点，便于复现代码路径的结果。
25.将在接下来的描述中部分阐述本公开总体构思另外的方面和/或优点，还有一部分通过描述将是清楚的，或者可以经过本公开总体构思的实施而得知。
附图说明
26.通过结合附图，从实施例的下面描述中，本公开这些和/或其它方面及优点将会变得清楚，并且更易于理解，其中：
27.图1是示出基于现有notebook工具的代码结构的示意图；
28.图2是示出现有notebook工具的界面演示图；
29.图3是示出另一现有notebook工具的界面演示图
30.图4是示出根据本公开示例性实施例的代码结构的可视化方法的流程图；
31.图5是示出根据本公开示例性实施例的代码结构可视化的演示图；
32.图6是示出根据本公开示例性实施例的代码结构导图的局部示意图；
33.图7是示出根据本公开示例性实施例的代码结构的可视化装置的框图。
具体实施方式
34.提供参照附图的以下描述以帮助对由权利要求及其等同物限定的本发明的实施例的全面理解。包括各种特定细节以帮助理解，但这些细节仅被视为是示例性的。因此，本领域的普通技术人员将认识到在不脱离本发明的范围和精神的情况下，可对描述于此的实施例进行各种改变和修改。此外，为了清楚和简洁，省略对公知的功能和结构的描述。
35.在此需要说明的是，在本公开中出现的“若干项之中的至少一项”均表示包含“该若干项中的任意一项”、“该若干项中的任意多项的组合”、“该若干项的全体”这三类并列的情况。例如“包括a和b之中的至少一个”即包括如下三种并列的情况：(1)包括a；(2)包括b；(3)包括a和b。又例如“执行步骤一和步骤二之中的至少一个”，即表示如下三种并列的情况：(1)执行步骤一；(2)执行步骤二；(3)执行步骤一和步骤二。
36.图1是示出基于现有notebook工具的代码结构的示意图。
37.参照图1，图中左侧区域可表示针对某一项业务的代码探索流程，作为示例，可探索训练销量预测模型的流程，过程之中，在做基本的数据处理时，可以地理位置作为重点，也可从销量的时间周期性入手，这样就出现了两个探索分支。如图1所示，图中右侧区域是基于现有notebook工具的代码结构实现，可以看出，在探索流程出现分支的层级，新分支的代码块可能将旧分支的代码块直接覆盖掉，或者新分支的代码块直接插入到原分支的代码块之间。
38.图2是示出现有notebook工具的界面演示图。
39.参照图2，可以看出，图示notebook工具的代码块之间不分层级，只有垂直方向，缺少分支管理，因此旧分支的代码块容易被新分支的代码块覆盖，导致编程结果难以复现。尽管可以在notebook工具中使用目录插件来区分代码的层级，但是当层级下有多个分支时，则无法通过目录插件来直观体现完整路径。换言之，使用目录插件来区分层级与word文档大纲模式下目录建立的方式类似，虽然可以通过目录定位到不同层级，但是无法复现某个分支是由哪些上游层级的内容得到的。
40.图3是示出另一现有notebook工具的界面演示图。
41.参照图3，图示notebook工具可通过图中右侧区域的上下游依赖关系图来帮助梳理notebook代码脉络，但是基于上下游依赖关系图的代码脉络展示，缺少以代码执行路径为基础的结构化视角，不仅脉络复杂，而且无法复现执行路径。
42.根据本公开示例性实施例的代码结构的可视化方法和装置，在用户编写代码时，能够支持创建分支，并实时生成结构化导图，能够支持导图与代码块交互联动，灵活查看上下级或者各层级的分支，能够支持通过操作导图调整代码分支结构，以及能够支持标记代码块或者导图节点，便于复现代码路径的结果。下面参照图4至图7详细描述根据本公开示例性实施例的代码结构的可视化方法和装置。
43.图4是示出根据本公开示例性实施例的代码结构的可视化方法的流程图。
44.参照图4，在步骤s401中，可响应于用户创建代码块，生成与代码块对应的导图节点。这里，当用户创建第一代码块时，可生成第一导图节点。然后，当用户创建第一子代码块时，可生成第一子导图节点。这里，第一子代码块可以是第一代码块的子代码块，第一子导图节点可以是第一导图节点的子节点。然后，当用户创建第二子代码块时，可生成第二子导图节点。这里，第二子代码块也可以是第一代码块的子代码块，并且第二子导图节点也可以是第一导图节点的子节点，以使第一导图节点、第一子导图节点和第二子导图节点之间形成分支结构。
45.接下来，在步骤s402中，可基于导图节点，生成具有分支结构的代码结构导图，以使代码结构可视化。这里，代码结构导图可包括第一路径和第二路径，第一路径的导图节点可包括第一导图节点和第一子导图节点，第二路径的导图节点可包括第一导图节点和第二子导图节点。
46.在此基础上，根据本公开的示例性实施例，当用户编辑第一代码块时，可将第一导图节点呈现为编辑状态，并且将第一路径的其他导图节点呈现为醒目状态。这里，可以但不限于通过高亮、字体加粗、字号加大或者字体变色等方式将导图节点呈现为醒目状态，本公开在此不做限制。
47.根据本公开的示例性实施例，当用户编辑第一代码块时，还可将第二路径的其他导图节点呈现为非醒目状态，以与第一路径的导图节点进一步作出区分。这里，可以但不限于通过字号减小、字体颜色变浅和半透明蒙板遮罩等方式将导图节点呈现为非醒目状态，本公开在此不做限制。
48.图5是示出根据本公开示例性实施例的代码结构导图的局部示意图。
49.参照图5，作为示例，图示代码结构导图的局部部分包括醒目状态的当前路径分支、非醒目状态的隐藏分支和编辑状态的导图节点(即图示data picker导图节点)，通过对导图节点的状态进行区分，可以方便快捷地实现代码路径复现等功能。
50.根据本公开的示例性实施例，当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，可将该导图节点切换为编辑状态，以使该导图节点对应的代码块可被用户编辑。这里，当用户选中任意一个呈现为非醒目状态的导图节点时，可将第二路径的其他导图节点切换为醒目状态，并且可将第一路径的导图节点切换为非醒目状态。在此基础上，通过导图节点的状态切换，可以查看特定导图节点所对应的代码路径。
51.根据本公开的示例性实施例，当用户编辑任意一个代码块的标题时，可将该代码块对应的导图节点的标题修改为用户编辑的该代码块的标题。另外，作为示例，当用户编辑任意一个导图节点的标题时，可同样将该导图节点对应的代码块的标题修改为用户编辑的该导图节点的标题，从而使代码块的标题和导图节点的标题之间存在联动关系。
52.根据本公开的示例性实施例，当用户将第一子导图节点移动至任意一个导图节点所在的位置时，可将第一子导图节点和第一子导图节点后续的所有导图节点进行整体移动，并且可将第一子导图节点作为该导图节点的子节点，以调整代码结构。这里，通过调整导图节点的位置，进行代码结构的分支调整，从使用角度而言，提高了用户修改和调试代码的效率。
53.根据本公开的示例性实施例，当用户标记任意一个代码块时，可对该代码块对应的导图节点进行标记，以通过标记定位该代码块或该代码块对应的导图节点。另外，作为示例，当用户标记任意一个导图节点时，还可对该导图节点对应的代码块进行标记，通过点击具有标记的代码块或者导图节点，可以查看代码块所对应的代码路径。下面参照图6详细描述根据本公开示例性实施例的代码结构可视化的结果。
54.图6是示出根据本公开示例性实施例的代码结构可视化的演示图。
55.参照图6，根据本公开的示例性实施例，代码结构可视化的主要框架为图中左侧的代码编写区和图中右侧的分支结构导图(即具有分支结构的代码结构导图)。对于代码编写区，可在最大程度保有用户已有使用习惯的基础上，实现添加分支和路径复现等功能，并且可与分支结构导图之间进行联动。具体而言，当用户创建代码块时，可在图中右侧分支结构导图中实时生成相应的导图节点，并且每个代码块还可具有添加分支的按钮，以通过点击该按钮生成与当前代码块层级并列的分支。作为示例，在代码编写区，同一时间只显示一个代码路径，该路径可在分支结构导图中呈现为醒目状态。另外，对于分支结构导图，可基于用户创建的代码块实时生成对应的导图节点，从而生成结构导图。分支结构导图可实现分支结构呈现、分支上下层级移动、路径复现和路径切换等功能。根据本公开的示例性实施例，当用户正在代码编写区编辑某个代码块时，在分支结构导图中对应的导图节点也可呈现编辑态状态，并且代码编写区当前所有代码块所组成的垂直路径可以在分支结构导图中
呈现醒目状态，而当前未在代码编写区呈现的分支路径，则在分支结构导图中呈现非醒目状态。作为示例，当用户点击分支结构导图中不是编辑状态的导图节点时，该导图节点可切换为编辑状态，同时代码编写区对应的代码块可滚动到屏幕中央并自行选中。另外，用户可以点击非醒目状态的导图节点，相应地，代码编写区的显示内容则切换至对应代码块所在整个代码路径的各个代码块。作为示例，用户在代码编写区编辑代码时，如果当前编辑的代码块存在并列的其他分支，那么该其他分支则可通过悬浮窗口的形式提示用户。然后，作为示例，用户在代码编写区编辑代码块的标题或者名称时，分支结构导图中对应的导图节点的标题或者名称则与之联动；反之，编辑分支结构导图中对应的导图节点的标题或者名称时，代码编写区的对应代码块的标题或者名称也相应修改。作为示例，用户可以在分支结构导图中选择某个导图节点，并将连接于该导图节点后面的整个分支移动到目标导图节点的位置，作为目标导图节点的新分支，相应地，代码编写区对应的各个代码块也整体上进同样的结构调整。作为示例，还可提供对代码编写区的代码块进行标记的功能，此功能可与分支结构导图进行联动，即用户可以标记代码块，而后对应的导图节点也具有该标记，反之同理；用户随后可点击具有该标记的代码块或者导图节点，以查看相应代码块所对应的代码路径。
56.根据本公开示例性实施例的代码结构的可视化方法，在用户编写代码时，能够支持创建分支，并实时生成结构化导图，能够支持导图与代码块交互联动，灵活查看上下级或者各层级的分支，能够支持通过操作导图调整代码分支结构，以及能够支持标记代码块或者导图节点，便于复现代码路径的结果。
57.图7是示出根据本公开示例性实施例的代码结构的可视化装置的框图。
58.参照图7，根据本公开示例性实施例的代码结构的可视化装置700可包括节点生成单元710和导图生成单元720。
59.节点生成单元710可响应于用户创建代码块，生成与代码块对应的导图节点。
60.如上所述，当用户创建第一代码块时，节点生成单元710可生成第一导图节点。然后，当用户创建第一子代码块时，节点生成单元710可生成第一子导图节点。这里，第一子代码块可以是第一代码块的子代码块，第一子导图节点可以是第一导图节点的子节点。然后，当用户创建第二子代码块时，节点生成单元710可生成第二子导图节点。这里，第二子代码块可以是第一代码块的子代码块，第二子导图节点可以是第一导图节点的子节点，以使第一导图节点、第一子导图节点和第二子导图节点之间形成分支结构。
61.导图生成单元720可基于导图节点，生成具有分支结构的代码结构导图，以使代码结构可视化。
62.根据本公开的示例性实施例，如上所述，代码结构导图可包括第一路径和第二路径，第一路径的导图节点可包括第一导图节点和第一子导图节点，第二路径的导图节点可包括第一导图节点和第二子导图节点。
63.根据本公开的示例性实施例，可视化装置还可包括状态呈现单元，当用户编辑所述第一代码块时，状态呈现单元可将第一导图节点呈现为编辑状态，并且可将第一路径的其他导图节点呈现为醒目状态。
64.根据本公开的示例性实施例，当用户编辑第一代码块时，状态呈现单元还可将第二路径的其他导图节点呈现为非醒目状态。
65.根据本公开的示例性实施例，可视化装置还可包括状态切换单元，当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，状态切换单元可将该导图节点切换为编辑状态，以使该导图节点对应的代码块可被用户编辑。
66.根据本公开的示例性实施例，当用户选中任意一个呈现为非醒目状态的导图节点时，状态切换单元可将第二路径的其他导图节点切换为醒目状态，并且将第一路径的导图节点切换为非醒目状态。
67.根据本公开的示例性实施例，可视化装置还可包括标题编辑单元，当用户编辑任意一个代码块的标题时，标题编辑单元可将该代码块对应的导图节点的标题修改为用户编辑的该代码块的标题。
68.根据本公开的示例性实施例，可视化装置还可包括结构调整单元，当用户将第一子导图节点移动至任意一个导图节点所在的位置时，结构调整单元可将第一子导图节点和第一子导图节点后续的所有导图节点进行整体移动，并将第一子导图节点作为该导图节点的子节点，以调整代码结构。
69.根据本公开的示例性实施例，可视化装置还可包括节点标记单元，当用户标记任意一个代码块时，节点标记单元可对该代码块对应的导图节点进行标记，以通过标记定位该代码块或该代码块对应的导图节点。
70.根据本公开示例性实施例的代码结构的可视化方法和装置，在用户编写代码时，能够支持创建分支，并实时生成结构化导图，能够支持导图与代码块交互联动，灵活查看上下级或者各层级的分支，能够支持通过操作导图调整代码分支结构，以及能够支持标记代码块或者导图节点，便于复现代码路径的结果。
71.以上已参照图4至图7描述了根据本公开示例性实施例的代码结构的可视化方法和装置。
72.图7所示出的代码结构的可视化装置中的各个单元可被配置为执行特定功能的软件、硬件、固件或上述项的任意组合。例如，各个单元可对应于专用的集成电路，也可对应于纯粹的软件代码，还可对应于软件与硬件相结合的模块。此外，各个单元所实现的一个或多个功能也可由物理实体设备(例如，处理器、客户端或服务器等)中的组件来统一执行。
73.此外，参照图4所描述的代码结构的可视化方法可通过记录在计算机可读存储介质上的程序(或指令)来实现。例如，根据本公开的示例性实施例，可提供存储指令的计算机可读存储介质，其中，当所述指令被至少一个计算装置运行时，促使所述至少一个计算装置执行根据本公开的代码结构的可视化方法。
74.上述计算机可读存储介质中的计算机程序可在诸如客户端、主机、代理装置、服务器等计算机设备中部署的环境中运行，应注意，计算机程序还可用于执行除了上述步骤以外的附加步骤或者在执行上述步骤时执行更为具体的处理，这些附加步骤和进一步处理的内容已经在参照图4进行相关方法的描述过程中提及，因此这里为了避免重复将不再进行赘述。
75.应注意，根据本公开示例性实施例的代码结构的可视化装置中的各个单元可完全依赖计算机程序的运行来实现相应的功能，即，各个单元在计算机程序的功能架构中与各步骤相应，使得整个系统通过专门的软件包(例如，lib库)而被调用，以实现相应的功能。
76.另一方面，图7所示的各个单元也可以通过硬件、软件、固件、中间件、微代码或其
任意组合来实现。当以软件、固件、中间件或微代码实现时，用于执行相应操作的程序代码或者代码段可以存储在诸如存储介质的计算机可读介质中，使得处理器可通过读取并运行相应的程序代码或者代码段来执行相应的操作。
77.例如，本公开的示例性实施例还可以实现为计算装置，该计算装置包括存储部件和处理器，存储部件中存储有计算机可执行指令集合，当计算机可执行指令集合被处理器执行时，执行根据本公开示例性实施例的代码结构的可视化方法。
78.具体说来，计算装置可以部署在服务器或客户端中，也可以部署在分布式网络环境中的节点装置上。此外，计算装置可以是pc计算机、平板装置、个人数字助理、智能手机、web应用或其他能够执行上述指令集合的装置。
79.这里，计算装置并非必须是单个的计算装置，还可以是任何能够单独或联合执行上述指令(或指令集)的装置或电路的集合体。计算装置还可以是集成控制系统或系统管理器的一部分，或者可被配置为与本地或远程(例如，经由无线传输)以接口互联的便携式电子装置。
80.在计算装置中，处理器可包括中央处理器(cpu)、图形处理器(gpu)、可编程逻辑装置、专用处理器系统、微控制器或微处理器。作为示例而非限制，处理器还可包括模拟处理器、数字处理器、微处理器、多核处理器、处理器阵列、网络处理器等。
81.根据本公开示例性实施例的代码结构的可视化方法中所描述的某些操作可通过软件方式来实现，某些操作可通过硬件方式来实现，此外，还可通过软硬件结合的方式来实现这些操作。
82.处理器可运行存储在存储部件之一中的指令或代码，其中，存储部件还可以存储数据。指令和数据还可经由网络接口装置而通过网络被发送和接收，其中，网络接口装置可采用任何已知的传输协议。
83.存储部件可与处理器集成为一体，例如，将ram或闪存布置在集成电路微处理器等之内。此外，存储部件可包括独立的装置，诸如，外部盘驱动、存储阵列或任何数据库系统可使用的其他存储装置。存储部件和处理器可在操作上进行耦合，或者可例如通过i/o端口、网络连接等互相通信，使得处理器能够读取存储在存储部件中的文件。
84.此外，计算装置还可包括视频显示器(诸如，液晶显示器)和用户交互接口(诸如，键盘、鼠标、触摸输入装置等)。计算装置的所有组件可经由总线和/或网络而彼此连接。
85.根据本公开示例性实施例的代码结构的可视化方法可被描述为各种互联或耦合的功能块或功能示图。然而，这些功能块或功能示图可被均等地集成为单个的逻辑装置或按照非确切的边界进行操作。
86.因此，参照图4所描述的代码结构的可视化方法可通过包括至少一个计算装置和至少一个存储指令的存储装置的系统来实现。
87.根据本公开的示例性实施例，至少一个计算装置是根据本公开示例性实施例的用于执行代码结构的可视化方法的计算装置，存储装置中存储有计算机可执行指令集合，当计算机可执行指令集合被至少一个计算装置执行时，执行参照图4所描述的代码结构的可视化方法。
88.以上描述了本公开的各示例性实施例，应理解，上述描述仅是示例性的，并非穷尽性的，本公开不限于所披露的各示例性实施例。在不偏离本公开的范围和精神的情况下，对
于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。因此，本公开的保护范围应该以权利要求的范围为准。

技术特征：
1.一种代码结构的可视化方法，其中，所述可视化方法包括：响应于用户创建代码块，生成与所述代码块对应的导图节点；基于所述导图节点，生成具有分支结构的代码结构导图，以使所述代码结构可视化，其中，响应于用户创建代码块，生成与所述代码块对应的导图节点，包括：当用户创建第一代码块时，生成第一导图节点；当用户创建第一子代码块时，生成第一子导图节点，其中，所述第一子代码块是所述第一代码块的子代码块，所述第一子导图节点是所述第一导图节点的子节点；当用户创建第二子代码块时，生成第二子导图节点，其中，所述第二子代码块是所述第一代码块的子代码块，所述第二子导图节点是所述第一导图节点的子节点，以使所述第一导图节点、所述第一子导图节点和所述第二子导图节点之间形成分支结构。2.如权利要求1所述的可视化方法，其中，所述代码结构导图包括第一路径和第二路径，所述第一路径的导图节点包括所述第一导图节点和所述第一子导图节点，所述第二路径的导图节点包括所述第一导图节点和所述第二子导图节点。3.如权利要求2所述的可视化方法，其中，所述可视化方法还包括：当用户编辑所述第一代码块时，将所述第一导图节点呈现为编辑状态，并且将所述第一路径的其他导图节点呈现为醒目状态。4.如权利要求3所述的可视化方法，其中，所述可视化方法还包括：当用户编辑所述第一代码块时，还将所述第二路径的其他导图节点呈现为非醒目状态。5.如权利要求4所述的可视化方法，其中，所述可视化方法还包括：当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，将该导图节点切换为编辑状态，以使该导图节点对应的代码块可被用户编辑。6.如权利要求5所述的可视化方法，其中，当用户选中任意一个呈现为醒目状态或非醒目状态的导图节点时，该导图节点切换为编辑状态，包括：当用户选中任意一个呈现为非醒目状态的导图节点时，将所述第二路径的其他导图节点切换为醒目状态，并且将所述第一路径的导图节点切换为非醒目状态。7.如权利要求1所述的可视化方法，其中，所述可视化方法还包括：当用户编辑任意一个代码块的标题时，将该代码块对应的导图节点的标题修改为用户编辑的该代码块的标题。8.一种代码结构的可视化装置，其中，所述可视化装置包括：节点生成单元，被配置为：响应于用户创建代码块，生成与所述代码块对应的导图节点；导图生成单元，被配置为：基于所述导图节点，生成具有分支结构的代码结构导图，以使所述代码结构可视化，其中，节点生成单元还被配置为：当用户创建第一代码块时，生成第一导图节点；当用户创建第一子代码块时，生成第一子导图节点，其中，所述第一子代码块是所述第一代码块的子代码块，所述第一子导图节点是所述第一导图节点的子节点；当用户创建第二子代码块时，生成第二子导图节点，其中，所述第二子代码块是所述第一代码块的子代码块，所述第二子导图节点是所述第一导图节点的子节点，以使所述第一导图节点、所述第一子导图
节点和所述第二子导图节点之间形成分支结构。9.一种存储指令的计算机可读存储介质，其中，当所述指令被至少一个计算装置运行时，促使所述至少一个计算装置执行如权利要求1至7中的任一权利要求所述的代码结构的可视化方法。10.一种包括至少一个计算装置和至少一个存储指令的存储装置的系统，其中，所述指令在被所述至少一个计算装置运行时，促使所述至少一个计算装置执行如权利要求1至7中的任一权利要求所述的代码结构的可视化方法。

技术总结
公开一种代码结构的可视化方法和装置，所述可视化方法包括：响应于用户创建代码块，生成与代码块对应的导图节点；基于导图节点，生成具有分支结构的代码结构导图，以使代码结构可视化，其中，响应于用户创建代码块，生成与代码块对应的导图节点，包括：当用户创建第一代码块时，生成第一导图节点；当用户创建第一子代码块时，生成第一子导图节点，其中，第一子代码块是第一代码块的子代码块，第一子导图节点是第一导图节点的子节点；当用户创建第二子代码块时，生成第二子导图节点，其中，所述第二子代码块是第一代码块的子代码块，第二子导图节点是第一导图节点的子节点，以使第一导图节点、第一子导图节点和第二子导图节点之间形成分支结构。分支结构。分支结构。


技术研发人员：王雨萱 戴振衡 王蔚 梁赵军
受保护的技术使用者：第四范式（北京）技术有限公司
技术研发日：2021.12.31
技术公布日：2023/7/13