Document Visualization Method and Device Based on the GQL Syntax of a Graph Database

Abstract

The present invention discloses a method and apparatus for document visualization based on the GQL syntax of a graph database, belonging to the technical field of computer document processing and visualization, including: identifying all EBNF code blocks containing GQL syntax definitions in a target document, and establishing a mapping relationship table between each EBNF code block and its predetermined replacement position in the target document; constructing an EBNF parser based on the PEG.js parser generator in combination with a preset syntax structure optimization algorithm, and integrating a style manager, a railroad diagram generation library, and the EBNF parser into a rendering interface; calling the encapsulated rendering interface to process each identified EBNF code block to obtain a number of user-visible interactive railroad diagrams, and inserting each railroad diagram into the corresponding predetermined replacement position in the target document according to the mapping relationship table. This application significantly improves the readability and maintenance efficiency of technical documents by automatically generating, updating, and maintaining railroad diagrams throughout the process.

Description

Technical Field

[0001] The present invention relates to the technical field of computer document processing and visualization, and particularly to a document visualization method and device based on the GQL syntax of a graph database. Background Art

[0002] Currently, the generation of Railroad Diagrams mainly relies on existing open-source tools, such as the @prantlf / railroad-diagrams library. This tool can convert the syntax based on Extended Backus-Naur Form (EBNF) rules into SVG format diagrams, thereby visually displaying the syntax rules.

[0003] However, the existing methods also have obvious limitations, especially in terms of maintenance and update. Specifically, existing Railroad Diagram generation tools usually convert the syntax into non-vector graphics such as PNG or JPEG, which means that every time the syntax is updated, pictures need to be regenerated and manually uploaded to the online environment. This process is not only cumbersome but also error-prone, greatly increasing the maintenance cost; existing tools also fail to provide a complete process for automatically updating the diagrams from syntax updates. Users need to manually operate multiple steps, including downloading, converting, uploading, and publishing. This not only takes time but may also lead to version inconsistencies; at the same time, although existing SVG diagram generation methods support basic visualization, they lack interactivity. Users cannot directly view the diagrams after syntax updates on the web page in real time and need to regenerate and replace the pictures. Summary of the Invention

[0004] The purpose of the present invention is to provide a document visualization method and device based on the GQL syntax of a graph database to solve the problems of high manual maintenance cost and error-proneness caused by the inability of existing Railroad Diagram generation tools to update and maintain Railroad Diagrams through an automated process, as well as the lack of interactivity and real-time performance of the generated Railroad Diagrams.

[0005] To achieve the above object, the present application adopts the following technical solutions:

[0006] A document visualization method based on the GQL syntax of a graph database according to the present application includes the following steps:

[0007] Identify all EBNF code blocks containing GQL syntax definitions in the target document, and establish a mapping relationship table between each EBNF code block and its predetermined replacement position in the target document;

[0008] Based on the PEG.js parser generator, construct an EBNF parser in combination with a preset syntax structure optimization algorithm, and integrate a style manager, a Railroad Diagram generation library, and the EBNF parser into a rendering interface;

[0009] Call the encapsulated rendering interface to process each recognized EBNF code block respectively to obtain a number of user-visible interactive railway diagrams, and insert each railway diagram into the corresponding predetermined replacement position in the target document according to the mapping relation table.

[0010] The EBNF parser, railway diagram generation library, and style manager integrated into the rendering interface are used to convert the EBNF code blocks extracted from the target document into user-visible interactive SVG railway diagrams, and based on the mapping relation table constructed between the EBNF code blocks and the predetermined replacement positions in the target document, the generated railway diagrams are dynamically embedded into the corresponding positions in the target document, significantly improving the readability and maintenance efficiency of technical documents.

[0011] Preferably, recognizing all EBNF code blocks containing GQL syntax definitions in the target document includes:

[0012] Call the fs module for operating the file system and the path module for processing and converting file paths in Node.js to recursively traverse the specified directory, and filter out all Markdown files through file extensions during the traversal process to obtain the target document;

[0013] Use regular expressions to extract all EBNF code blocks from the target document, and each EBNF code block is used to represent the GQL syntax definition of the graph database.

[0014] Preferably, constructing an EBNF parser based on the PEG.js parser generator in combination with a preset syntax structure optimization algorithm includes:

[0015] Use PEG.js syntax to define the parsing rules for each component in the EBNF code block. The components include production, selection structure, sequence, non-terminal, and terminal, and pass the parsing rules to the PEG.js parser generator.

[0016] Preferably, the syntax structure optimization algorithm includes a branch merging optimization strategy and a loop structure optimization strategy;

[0017] Among them, the branch merging optimization strategy includes: using the appendNodeToChoices function to convert redundant selection structures with common prefixes or suffixes in the EBNF code block into OptionalSequence components;

[0018] The loop structure optimization strategy includes: using the appendNodeToSequence function to convert composite structures with repeated sequences in the EBNF code block into OneOrMore components.

[0019] Preferably, the method further includes:

[0020] Respectively call the deepEq function and the isRTLCapable function in Node.js to perform equivalence detection and RTL layout direction judgment on the nodes in the railway map.

[0021] Preferably, the style manager is used to define the style rules of the railway map and isolate the theme of the railway map through CSS class names.

[0022] Preferably, the method further includes:

[0023] Integrate a ry-catch block for capturing errors generated during the EBNF code block syntax parsing process and generating error message tags, a console.log tool for outputting document processing logs, and an anafanafo library for calculating the character widths in the railway map in the rendering interface.

[0024] A document visualization device based on the GQL syntax of a graph database, including:

[0025] A building module for identifying all EBNF code blocks containing GQL syntax definitions in the target document and establishing a mapping relationship table between each EBNF code block and its predetermined replacement position in the target document;

[0026] A construction module for constructing an EBNF parser based on the PEG.js parser generator, in combination with a preset branch merging optimization strategy and loop structure optimization strategy, and integrating the style manager, the railway map generation library, and the EBNF parser into the rendering interface;

[0027] An insertion module for calling the encapsulated rendering interface to process each identified EBNF code block to obtain a number of user-visible interactive railway maps, and inserting each railway map into the corresponding predetermined replacement position in the target document according to the mapping relationship table.

[0028] An electronic device includes a memory and a processor, where the memory is used to store one or more computer instructions, and wherein the one or more computer instructions are executed by the processor to implement a document visualization method based on the GQL syntax of a graph database as described in any one of the above.

[0029] A computer-readable storage medium storing a computer program, where the computer program causes a computer to implement a document visualization method based on the GQL syntax of a graph database as described in any one of the above when executed.

[0030] The present invention has the following beneficial effects:

[0031] By automatically parsing the EBNF code blocks marked in the target document and inputting the EBNF code blocks into the render function integrated with a style manager, the @prantlf / railroad - diagrams library, and an EBNF parser to generate a user - visible interactive SVG railroad diagram, and then dynamically embedding it into the target document, the readability and maintenance efficiency of technical documents are significantly improved. Brief Description of the Drawings

[0032] To more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0033] Figure 1 is a flowchart of a document visualization method based on the GQL syntax of a graph database provided by an embodiment of the present application;

[0034] Figure 2 is the original structure of a railroad diagram;

[0035] Figure 3 is Figure 2 the optimized structure of the railroad diagram in

[0036] Figure 4 is a schematic diagram of a railroad diagram generated according to an embodiment of the present application;

[0037] Figure 5 is a schematic structural diagram of a document visualization device based on the GQL syntax of a graph database provided by an embodiment of the present application. Detailed Description of the Embodiments

[0038] To make the technical solutions of the present application clearer, the following further elaborates on the present invention in detail with reference to the drawings and specific embodiments. The terms "first", "second", etc. in the claims and the specification of the present application are used to distinguish similar objects and do not necessarily describe a specific order or sequence. It should be understood that such terms can be interchanged under appropriate circumstances. This is only a way of distinguishing objects with the same attributes in the description of the embodiments of the present application. In addition, the terms "include" and "have" and any variations thereof are intended to cover non - exclusive inclusion, so that a process, method, system, product, or device including a series of units does not have to be limited to those units, but may include other units not clearly listed or inherent to these processes, methods, products, or devices.

[0039] Glossary of Terms:

[0040] Railroad Diagrams: Also known as syntax diagrams or railroad diagrams, they are a graphical tool for representing grammatical rules using graphical tracks and are commonly used to clearly show the structure of programming languages, data formats, or protocols.

[0041] SVG (Scalable Vector Graphics): A two-dimensional vector graphics format based on XML (Extensible Markup Language) used to describe two-dimensional graphics.

[0042] Graph Database: A non-relational database (NoSQL) specifically designed for storing, managing, and querying highly related data. Its core is to directly represent the relationships between data in a graph structure (composed of nodes, edges, and attributes).

[0043] GQL (Graph Query Language): A graph query language designed specifically for the Property Graph model, aiming to provide a unified query and operation standard for graph databases. It helps users efficiently process graph-structured data by supporting complex graph traversal, pattern matching, and data analysis functions.

[0044] EBNF (Extended Backus-Naur Form): A text fragment used to formally describe grammatical rules and is widely used in programming language specifications, data format definitions (such as JSON, XML), or protocol documents. Through a standardized symbol system, EBNF can clearly express the logic of combination, branching, repetition, and optionality in the grammatical structure.

[0045] PEG.js: A JavaScript library for generating parsers, also known as a parser generator, which allows developers to define their own parsing rules based on Parsing Expression Grammar (PEG) and automatically generate the corresponding parsers. It is very suitable for application scenarios that need to parse complex data structures or languages.

[0046] Node.js: An open-source, cross-platform JavaScript runtime environment that allows developers to execute JavaScript code on the server side. Based on the Chrome V8 engine, Node.js uses an event-driven, non-blocking I / O model, which makes it very suitable for handling high-concurrency requests and can efficiently execute asynchronous operations.

[0047] Example 1

[0048] A document visualization method based on the GQL syntax of a graph database, such as Figure 1As shown in the figure, it includes the following steps:

[0049] S110. Identify all EBNF code blocks containing GQL grammar definitions in the target document, and establish a mapping relationship table between each EBNF code block and its predetermined replacement position in the target document.

[0050] In the embodiments of the present disclosure, the target document is a Markdown file in a specified directory. Among them, the Markdown file is a text file written in a lightweight markup language. It exists in plain text form and realizes text typesetting and formatting through simple markup syntax.

[0051] Therefore, before identifying the EBNF code blocks in the target document, it is necessary to first find the target document from the specified directory.

[0052] Furthermore, call the fs module for operating the file system and the path module for processing and converting file paths in Node.js to recursively traverse the specified directory, and filter out all Markdown files through file extensions during the traversal process to obtain the target document;

[0053] Use regular expressions to extract all EBNF code blocks from the target document. Each EBNF code block is used to represent the GQL grammar definition of the graph database.

[0054] The fs module is a core module built into Node.js for processing file system operations such as reading, writing, deleting, or directories. It provides a set of powerful APIs that allow developers to easily interact with the file system.

[0055] The path module is another core module built into Node.js for processing and converting file paths. It provides a series of methods and properties to help developers handle path problems in a cross-platform manner, enabling the code to run properly on different operating systems.

[0056] It should be particularly noted here that the main functions of the path module include joining file paths and obtaining the file extension in the path. Among them, joining file paths means that on different operating systems, the path separators may be different (for example, Windows uses \, while Unix / Linux uses / ). The path.join() of the path module can automatically handle these differences to ensure that the generated path is valid under the current operating system; obtaining the file extension in the path is to return the extension part of the path including the dot (.) through path.extname(path) of the path module. If the path has no extension, an empty string is returned.

[0057] In the embodiments of the present disclosure, the fs module and the path module in Node.js are introduced first, and then a recursive function processDirectory is defined. It takes a directory path as a parameter and is used to traverse the specified directory (such as docs-2.0-en and docs-2.0-zh) and its subdirectories by the developer. The logic of reading directories, traversing directory entries, and processing subdirectories and files is also included inside this function. Specifically, fs.readdirSync is used to read the content of the directory specified by the developer, and the {withFileTypes: true} option is used to obtain the Dirent object. Then, the forEach method is used to traverse each directory entry to check whether it is a file or a directory. If the current entry is a directory, path.join is used to concatenate the full path, and processDirectory is called recursively. If the current entry is a file, path.extname is used to check whether its extension is.md. If so, the path module is used to output the file path. Finally, the processDirectory function is called and the starting directory path to be traversed is passed in.

[0058] It should be noted here that Dirent is the abbreviation of "directory entry" and represents a directory entry. When the {withFileTypes: true} option is used, each returned directory entry is a Dirent object, rather than a simple file name string. The Dirent object provides some methods to check the type of the directory entry (for example, file, directory, symbolic link, etc.), which makes it more flexible and efficient to process directory content.

[0059] By automatically adapting to Chinese and English document versions through the directory traversal strategy, not only the synchronous processing of Markdown multi-version (Chinese / English) documents is achieved, but also duplicate development can be avoided.

[0060] All Markdown files filtered out from the specified directory are target documents. Then, all code blocks manually marked as EBNF are found from the target documents using the regular expression / ```ebnf\n([\s\S]*?)``` / g. Each of these EBNF code blocks is used to represent the GQL syntax definition of the graph database.

[0061] By accurately extracting the code blocks marked as EBNF in Markdown files through regular expressions, omissions can be avoided, and all EBNF code blocks can be automatically extracted at one time without manual copying and pasting, which improves the processing efficiency. And through regular expression constraints, all EBNF code blocks must be explicitly marked as ebnf to avoid mixing other formats (such as bnf or unmarked code blocks) in the document.

[0062] Meanwhile, determine the insertion positions of the railway diagrams corresponding to each EBNF code block in the target document. Here, the insertion positions are also the predetermined replacement positions for each EBNF code block, and then establish a mapping relationship table between the EBNF code blocks and the predetermined replacement positions.

[0063] By binding each EBNF code block to its corresponding railway diagram through the mapping relationship table, the automatic insertion of the railway diagram is realized, which can eliminate the risks of "misalignment" or "omission" caused by manual insertion, reduce the probability of human errors, and when the EBNF rules or railway diagrams are modified, only the paths in the relationship table need to be updated, without global search and replacement. And when a certain railway diagram is rendered abnormally, the source EBNF code block can also be directly traced through the relationship table, without page-by-page investigation, enhancing the maintainability.

[0064] S120. Based on the PEG.js parser generator, construct an EBNF parser by combining a preset syntax structure optimization algorithm, and integrate the style manager, the railway diagram generation library, and the EBNF parser into the rendering interface.

[0065] The main purpose of this step is to generate an EBNF syntax parsing engine based on PEG.js by combining the syntax structure optimization algorithm, and integrate this syntax parsing engine with the style manager and the railway diagram generation library, so as to construct a more powerful syntax visualization system and improve the development efficiency.

[0066] Furthermore, use the PEG.js syntax to define the parsing rules for each component in the EBNF code block. The components include productions, choice structures, sequences, non-terminals, and terminals, and pass the parsing rules to the PEG.js parser generator.

[0067] The EBNF code block usually contains productions, choice structures, sequences, non-terminals, and terminals. Among them, the production is the core rule of EBNF, indicating how a syntax unit is expanded into other syntax units; the choice structure represents one of multiple options, and different options are separated by the vertical bar |, indicating the "or" relationship, and one of the options can be selected; the sequence represents a series of elements connected in sequence, usually separated by a comma, or a space; the non-terminal is a placeholder in the syntax, indicating a syntax unit that has not been fully defined, usually enclosed in angle brackets <> or directly using an identifier (such as a word starting with a lowercase letter); the terminal is the basic unit in the syntax, indicating a specific character or string, usually enclosed in double quotes "" or directly represented as a specific character.

[0068] The first step in constructing an EBNF parser is to use the PEG.js syntax to define the parsing rules for these components. How to define them specifically can be determined according to the actual needs of the developer.

[0069] Examples of key syntax rules defined in the embodiments of the present disclosure are as follows:

[0070] production = n:nonTerminal _ '::=' _ content:choice { return {name:n.text, content}}

[0071] / / Defines the rule for parsing production, that is, extracts the non-terminal name and the choice structure on the right side, and returns an object containing this information.

[0072] choice = f:seq r:(_ '|' _ seq)* { ...}

[0073] / / Defines the rule for parsing the choice structure, that is, extracts all sequences separated by |, and returns an array containing these sequences.

[0074] Furthermore, the syntax structure optimization algorithm includes a branch merging optimization strategy and a loop structure optimization strategy;

[0075] Among them, the branch merging optimization strategy includes: using the appendNodeToChoices function to convert redundant choice structures with common prefixes or suffixes in the EBNF code block into OptionalSequence components;

[0076] The loop structure optimization strategy includes: using the appendNodeToSequence function to convert composite structures with repeated sequences in the EBNF code block into OneOrMore components.

[0077] The functions of the appendNodeToChoices function and the appendNodeToSequence function are directly related to the choice and sequence structures in the EBNF syntax rules. Among them, the appendNodeToChoices function adds a new option in the choice branch, which is equivalent to appending |C to the right side of A|B, forming A|B|C, and A|B|C means either matching A or matching B or matching C; the appendNodeToSequence function appends a new element in the sequence structure, which is equivalent to appending C to the right side of A B, forming A B C, and A B C means matching A first, then B, and finally C.

[0078] The OptionalSequence component represents an optional sequence, which is usually used to describe the situation where a certain part can be optionally present or absent. For example, OptionalSequence("b","c") is equivalent to ("b"|"c").

[0079] The OneOrMore component indicates that a sequence can be repeated one or more times. For example, OneOrMore("z") is equivalent to {"z"}.

[0080] In the EBNF code block, if multiple alternatives share a common prefix, such as a|a?b, it will cause redundancy, and repetitive structures such as a (b a)* will increase complexity. To solve this problem, in the embodiments of the present disclosure, a syntax structure optimization algorithm is preset, which specifically includes a branch merging optimization strategy and a loop structure optimization strategy.

[0081] Among them, the core idea of the branch merging optimization strategy is to detect common prefixes or suffixes, reduce redundant alternatives, and merge them into a more concise OptionalSequence component.

[0082] A common prefix means that if multiple alternatives share the same starting part (such as a? b | a c), the common prefix a can be extracted.

[0083] A common suffix means that if multiple alternatives share the same ending part (such as b a? | c a?), the common suffix a can be extracted.

[0084] The specific implementation code of the branch merging optimization strategy is as follows:

[0085] function appendNodeToChoices(opts, node) {

[0086] if (node.type === "Sequence" && node.items.length >= 2) {

[0087] / / Check if node is a Sequence type and it contains at least two elements. Sequence represents a series of syntactic elements connected in sequence.

[0088] const a = node.items[0];

[0089] / / Get the first element a of the sequence.

[0090] const b = node.items[node.items.length - 1];

[0091] / / Get the last element b of the sequence.

[0092] const last = opts[opts.length - 1];

[0093] / / Obtain the last element last in opts (selection structure), which is usually a processed syntax node.

[0094] / ** @type {RRComponent[]?} * /

[0095] let optItems = undefined;

[0096] / / Define a variable optItems to store possible merged items, and its initial value is undefined, indicating that no mergeable content has been found yet.

[0097] if (a.type === "Optional" && deepEq(a.item, last)) {

[0098] node.items.shift();

[0099] optItems = [last, node];

[0100] }

[0101] / / If the first element a of the sequence is of type Optional and its content (a.item) is the same as the last element last in opts, first use the deepEq function to compare whether a.item and last are equal. If they are equal, remove the first element in the sequence (node.items.shift()), and then merge last and the remaining node into an array [last, node], and assign it to optItems.

[0102] if (!optItems && b.type === "Optional" && deepEq(b.item, last)) {

[0103] node.items.pop();

[0104] optItems = [node, last];

[0105] }

[0106] / / If optItems is still not set, and the last element b of the sequence is of type Optional, and its content (b.item) is the same as the last element last in opts, then remove the last element from the sequence (node.items.pop()), and then merge the remaining node and last into an array [node, last], and assign it to optItems.

[0107] if (optItems) {

[0108] opts[opts.length - 1] = { type: "OptionalSequence", items: optItems};

[0109] return;

[0110] }

[0111] / / If items that can be merged are found (optItems has been set), then replace the last element of opts with a new OptionalSequence node. The OptionalSequence contains two sub-items, and the items are the merged array (optItems), and then return to end the function execution.

[0112] }

[0113] opts.push(node);

[0114] / / If items that can be merged are not found, then directly add node to opts.

[0115] }

[0116] The core idea of the loop structure optimization strategy is to detect specific nested structures, reduce redundant sequences and options, and merge them into a more concise OneOrMore component.

[0117] The specific implementation code of the loop structure optimization strategy is as follows:

[0118] function appendNodeToSequence(items, node) {

[0119] if (

[0120] node.type === "Optional" &&

[0121] node.item.type === "OneOrMore" &&

[0122] node.item.repeat.type === "Skip" &&

[0123] node.item.item.type === "Sequence" &&

[0124] node.item.item.items.length === 2

[0125] ) {

[0126] / / This is a multi - condition check, checking one by one whether node meets the following conditions:

[0127] 1) node.type === "Optional"

[0128] node is an optional syntax node (Optional).

[0129] 2) node.item.type === "OneOrMore"

[0130] node.item is a syntax node that repeats one or more times (OneOrMore).

[0131] 3) node.item.repeat.type === "Skip"

[0132] node.item.repeat is the repetition rule of OneOrMore and its type is Skip (which may mean skipping some content).

[0133] 4) node.item.item.type === "Sequence"

[0134] node.item.item is a sequence (Sequence), representing syntax elements connected in sequence.

[0135] 5) node.item.item.items.length === 2

[0136] The sequence contains two elements.

[0137] Only when the conditions 1), 2), 3), 4) and 5) above are all met, will the next step be entered.

[0138] const left = items[items.length - 1];

[0139] / / Get the last element of the items array (i.e., the last node of the current sequence).

[0140] const [repeat, right] = node.item.item.items;

[0141] / / Destructure node.item.item.items and assign its two elements to repeat and right respectively. Here, repeat represents the first element in the sequence, usually representing the repetition rule, and right represents the second element in the sequence, usually representing another syntax node.

[0142] if (isRTLCapable(repeat) && deepEq(left, right)) {

[0143] / / Check if repeat supports a certain feature (possibly "right-to-left" or other syntax rules), and use the deep comparison function deepEq to check if left and right are equal.

[0144] Merger can only be performed when both of these conditions are met.

[0145] items[items.length - 1] = {

[0146] type: "OneOrMore",

[0147] item: left,

[0148] repeat,

[0149] };

[0150] return;

[0151] / / If the merge condition is met, replace the last element of items with a new OneOrMore node.

[0152] }

[0153] }

[0154] items.push(node);

[0155] / / If the merge condition is not met, directly add node to items.

[0156] }

[0157] As Figure 2 and Figure 3 shownFigure 2 It is the original structure of a certain railway diagram. Figure 3 It is the structure of the railway diagram optimized by the branch merging optimization strategy and the loop structure optimization strategy. The intelligent structure compression of EBNF to the railway diagram is achieved through the branch merging optimization strategy and the loop structure optimization strategy. Compared with traditional tools (such as Bottlecape DE), the number of graphic nodes is reduced by 30%. The layout is also clearer, easier to understand, and the readability is improved, and the overall complexity is also reduced.

[0158] Use the API in PEG.js to send the parsing rules generated based on the PEG.js grammar, the branch merging optimization strategy, and the loop structure optimization strategy to the PEG.js parser generator, and finally output the EBNF parser.

[0159] In the embodiments of the present disclosure, the obtained EBNF parser will also be integrated with the style manager and the railroad diagram generation library @prantlf / railroad-diagrams into a rendering interface such as the render function. Among them, the style manager can be dynamically injected <style>标签以定义铁路图颜色、字体、边距规则，其还支持通过CSS类名（如.railroad-diagram-output）实现主题隔离，使得生成的图表能够在不同的上下文中使用不同的样式，而不会相互干扰；render函数的核心作用是将程序内部的数据或状态转化为可视化的形式展示给用户，不论是在网页上还是在游戏中，或者是其他任何需要视觉输出的应用场景。

[0160] 在集成的render函数中，解析器可将EBNF代码块转换为AST抽象语法树，样式管理器则可根据AST节点类型自动应用样式规则，铁路图生成库则可直接消费AST生成精准可视化图形，从而形成"文本→AST→可视化"的零人工干预流程，实现了铁路图的全自动可视化，且支持实时同步更新，当EBNF代码块修改时，解析器→样式管理器→铁路图生成器的链式反应可在毫秒级完成，并支持交互式编辑场景，当用户在IDE中修改语法规则时，铁路图立即刷新显示最新结构，还增强了错误可视化，极大提升了语法设计和文档编写的效率与准确性。

[0161] 进一步地，分别调用Node.js中的deepEq函数和isRTLCapable函数对铁路图中的节点进行等价性检测和RTL布局方向判断。

[0162] 在Node.js中，deepEq和isRTLCapable是两个不同的工具函数。

[0163] 具体地，deepEq函数是常见的深度比较函数，用于检查两个对象或数据结构是否完全等价，它通常可以递归地比较嵌套的对象、数组和其他复杂数据类型，在本公开实施例中，其用于检测铁路图中两个节点的结构和内容是否完全一致，从而确定铁路图中是否存在重复或冗余的节点。

[0164] isRTLCapable函数是一个假设的函数，用于判断某个节点是否支持RTL布局方向即从右到左，因为某些铁路图节点可能包含特定的语言或符号，这些符号可能不支持RTL布局，而开发者需要确保每个节点的内容能够在RTL模式下正确显式，isRTLCapable函数可以帮助开发者识别并调整铁路图中的RTL不兼容节点。

[0165] 将deepEq函数和isRTLCapable函数结构起来，可对铁路图中的节点进行全面检查，从而全面评估铁路图节点的特性和兼容性，这不仅提高了铁路图的质量，还增强了其在多语言环境中的适应性。

[0166] 进一步地，在渲染接口中集成用于捕获EBNF代码块语法解析过程中产生的错误并生成错误信息标签的ry-catch块、用于输出文档处理日志的console.log工具以及用于计算铁路图中字符宽度的anafanafo库。

[0167] render函数中还集成了ry-catch块、console.log工具以及anafanafo库。

[0168] try-catch块用于捕获和处理运行时错误，确保即使发生异常，程序也不会崩溃，而是能够优雅地处理错误并记录相关信息。本公开实施例中利用ry-catch块来捕获语法解析错误，并生成带错误信息的<pre>标签。

[0169] console.log是开发中常用的调试工具，用于输出运行时的信息，帮助开发者理解程序的行为。本公开实施例中利用console.log工具输出文件处理日志如Inserted SVGinto file: ${filePath}，实现了处理过程的可视化追踪。

[0170] anafanafo是一个用于生成铁路图（Railroad Diagrams）的JavaScript库，支持将抽象语法树（AST）转换为可视化的铁路图，并提供丰富的布局选项和样式控制，还支持动态生成和渲染复杂的语法规则。本公开实施例中使用anafanafo库替代固定宽度估算，anafanafo库基于FreeType库可以提供非常精确的文本宽度测量结果，确保在生成铁路图时，各元素能够根据其内容的宽度进行精确对齐，从而使终端 / 非终端符号的显式宽度误差小于1像素。

[0171] 在render函数中还集成ry-catch块、console.log工具和anafanafo库，不仅提高了代码的健壮性和可维护性，还增强了用户体验，使语法规则更加清晰易懂。

[0172] 本公开实施例中还通过indentedSvg变量添加双空格缩进，提升了代码可读性。

[0173] S130、调用封装好的渲染接口对识别出的各个EBNF代码块分别进行处理得到若干用户可见交互式铁路图，并根据映射关系表将各个铁路图插入到目标文档中相应的预定替换位置。

[0174] 将识别出的EBNF代码块逐个输入到封装好的render函数中以利用render函数中集成的各个工具对EBNF代码块进行处理，最后输出用户可见交互式铁路图，如图4所示，然后按照映射关系表中EBNF代码块与其预定替换位置间的关系将得到的铁路图一一插入到对应的位置。

[0175] 本公开实施例通过自动化解析目标文档中标注的EBNF代码块，并将EBNF代码块输入集成了样式管理器、@prantlf / railroad-diagrams库和EBNF解析器的render函数中进行用户可见交互式SVG铁路图的生成，然后将其动态嵌入到目标文档中，显著提高了技术文档的可读性与维护效率。

[0176] 实施例2

[0177] 一种基于图数据库GQL语法的文档可视化装置，如图5所示，包括：

[0178] 建立模块，用于识别目标文档中所有包含GQL语法定义的EBNF代码块，并建立各EBNF代码块与其在目标文档中预定替换位置间的映射关系表；

[0179] 构建模块，用于基于PEG.js解析器生成器，结合预设的分支合并优化策略和循环结构优化策略构建EBNF解析器，并将样式管理器、铁路图生成库与EBNF解析器集成到渲染接口中；

[0180] 插入模块，用于调用封装好的渲染接口对识别出的各个EBNF代码块分别进行处理得到若干用户可见交互式铁路图，并根据映射关系表将各个铁路图插入到目标文档中相应的预定替换位置。

[0181] 本实施例用于实现上述实施例所提供的方法，具备上述方法相应的有益效果。未在本实施例中详尽描述的技术细节，可参见本发明前述所有实施例所提供的方法。

[0182] 实施例3

[0183] 一种电子设备，包括存储器和处理器，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现上述的一种基于图数据库GQL语法的文档可视化方法。

[0184] 所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的电子设备的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

[0185] 一种存储有计算机程序的计算机可读存储介质，所述计算机程序使计算机执行时实现如上述的一种基于图数据库GQL语法的文档可视化方法。

[0186] 示例性的，计算机程序可以被分割成一个或多个模块 / 单元，一个或者多个模块 / 单元被存储在存储器中，并由处理器执行，并由输入接口和输出接口完成数据的I / O接口传输，以完成本发明,一个或多个模块 / 单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述计算机程序在计算机设备中的执行过程。

[0187] 计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。计算机设备可包括，但不仅限于，存储器、处理器,本领域技术人员可以理解，本实施例仅仅是计算机设备的示例，并不构成对计算机设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件，例如计算机设备还可以包括输入器、网络接入设备、总线等。

[0188] 处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

[0189] 存储器可以是计算机设备的内部存储单元，例如计算机设备的硬盘或内存。存储器也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘，智能存储卡（Smart Media Card,SMC），安全数字（Secure Digital,SD）卡，闪存卡（Flash Card）等,进一步地，存储器还可以既包括计算机设备的内部存储单元也包括外部存储设备,存储器用于存储计算机程序以及计算机设备所需的其他程序和数据,存储器还可以用于暂时地存储在输出器，而前述的存储介质包括U盘、移动硬盘、只读存储器ROM、随机存储器RAM、碟盘或光盘等各种可以存储程序代码的介质。

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

Claims

1. A document visualization method based on the GQL syntax of a graph database, characterized in that, It includes the following steps: Identify all EBNF code blocks containing GQL grammar definitions in the target document, and establish a mapping relationship table between each EBNF code block and its predetermined replacement position in the target document; Based on the PEG.js parser generator, construct an EBNF parser in combination with a preset grammar structure optimization algorithm, and integrate the style manager, railway diagram generation library, and the EBNF parser into the rendering interface; Call the encapsulated rendering interface to process each identified EBNF code block respectively to obtain a number of user-visible interactive railway diagrams, and insert each railway diagram into the corresponding predetermined replacement position in the target document according to the mapping relationship table; The grammar structure optimization algorithm includes a branch merging optimization strategy and a loop structure optimization strategy; Among them, the branch merging optimization strategy includes: using the appendNodeToChoices function to convert redundant choice structures containing common prefixes or suffixes in the EBNF code block into OptionalSequence components; The loop structure optimization strategy includes: using the appendNodeToSequence function to convert composite structures containing repeated sequences in the EBNF code block into OneOrMore components.

2. The document visualization method based on the GQL syntax of the graph database according to claim 1, wherein, The identifying all EBNF code blocks containing GQL grammar definitions in the target document includes: Call the fs module in Node.js for operating the file system and the path module for processing and converting file paths to recursively traverse the specified directory, and filter out all Markdown files through file extensions during the traversal process to obtain the target document; Use regular expressions to extract all EBNF code blocks from the target document, and each EBNF code block is used to represent the GQL grammar definition of the graph database.

3. The document visualization method based on the GQL syntax of the graph database according to claim 1, wherein, The constructing an EBNF parser based on the PEG.js parser generator in combination with a preset grammar structure optimization algorithm includes: Use PEG.js grammar to define the parsing rules for each component in the EBNF code block. The components include production rules, choice structures, sequences, non-terminals, and terminals, and pass the parsing rules to the PEG.js parser generator.

4. A document visualization method based on the GQL syntax of a graph database according to claim 1, characterized in that, The method further includes: Call the deepEq function and isRTLCapable function in Node.js respectively to perform equivalence detection and RTL layout direction judgment on the nodes in the railway diagram.

5. A document visualization method based on the GQL syntax of a graph database according to claim 1, characterized in that The style manager is used to define the style rules of the railway diagram and isolate the theme of the railway diagram through CSS class names.

6. The document visualization method based on the GQL syntax of the graph database according to claim 1, wherein, The method further includes: Integrate a ry-catch block for capturing errors generated during the syntax parsing of the EBNF code block and generating error message labels, a console.log tool for outputting document processing logs, and an anafanafo library for calculating the character width in the railway diagram in the rendering interface.

7. A document visualization device based on the GQL syntax of a graph database, characterized in that, It includes: A building module, configured to identify all EBNF code blocks containing GQL grammar definitions in a target document, and establish a mapping relationship table between each EBNF code block and its predetermined replacement position in the target document; A construction module, configured to construct an EBNF parser based on a PEG.js parser generator, in combination with a preset branch merging optimization strategy and loop structure optimization strategy, and integrate a style manager, a railroad diagram generation library and the EBNF parser into a rendering interface; An insertion module, configured to call the encapsulated rendering interface to process each identified EBNF code block respectively to obtain a plurality of user-visible interactive railroad diagrams, and insert each railroad diagram into the corresponding predetermined replacement position in the target document according to the mapping relationship table; The syntax structure optimization algorithm includes a branch merging optimization strategy and a loop structure optimization strategy; Among them, the branch merging optimization strategy includes: using the appendNodeToChoices function to convert redundant choice structures containing common prefixes or suffixes in the EBNF code block into OptionalSequence components; The loop structure optimization strategy includes: using the appendNodeToSequence function to convert composite structures containing repeated sequences in the EBNF code block into OneOrMore components.

8. An electronic device, characterized in that, It includes a memory and a processor, where the memory is used to store one or more computer instructions, and wherein the one or more computer instructions are executed by the processor to implement a document visualization method based on the GQL grammar of a graph database as described in any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that, The computer program, when executed by a computer, implements a document visualization method based on the GQL grammar of a graph database as described in any one of claims 1 to 6.

Images