Document visualization method and device based on graph database GQL grammar
Through the document visualization method based on the graph database GQL syntax, EBNF code blocks are automatically identified and processed, interactive SVG railway maps are generated, and dynamically embedded into the target document, which solves the problem that the railway map generation tool in the existing technology cannot achieve automatic update and maintenance, and realizes efficient and highly readable railway map generation and maintenance.
Patent Information
- Application Number
- CN202510486814.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-18
- Publication Date
- 2025-05-23
- Estimated Expiration
- 2045-04-18
AI Technical Summary
Existing railway map generation tools cannot realize the update and maintenance of railway maps through automated processes, resulting in high manual maintenance costs and error-proneness. At the same time, the generated railway maps lack interactivity and real-timeness.
Using a document visualization method based on graph database GQL syntax, an interactive SVG railway map is generated by identifying the EBNF code blocks in the target document, a mapping relationship table is established, and combined with the PEG.js parser generator and syntax structure optimization algorithm is used to generate an interactive SVG railway map and dynamically embed it into the target document.
It realizes automated updates and maintenance of railway maps, significantly reduces manual maintenance costs, improves the readability and maintenance efficiency of technical documents, and provides interactive and real-time update functions.
Smart Images

Figure CN120030083A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer document processing and visualization technology, and in particular to a document visualization method and device based on graph database GQL grammar. Background Art
[0002] Currently, the generation of Railroad Diagrams mainly relies on existing open source tools, such as the @prantlf / railroad-diagrams library, which can convert grammars based on Extended Backus-Naur Form (EBNF) rules into SVG format diagrams to display grammar rules in a visual way.
[0003] However, existing methods also have obvious limitations, especially in terms of maintenance and updating. Specifically, existing railway diagram generation tools usually convert syntax into non-vector images such as PNG or JPEG, which means that after each syntax update, the image needs to be regenerated and manually uploaded to the online environment. This process is not only cumbersome but also prone to errors, greatly increasing the maintenance cost; existing tools also fail to provide a complete process from syntax update to automatic chart update. Users need to manually perform multiple steps, including downloading, converting, uploading and publishing, which is not only time-consuming but may also lead to version inconsistencies; at the same time, although the existing SVG chart generation method supports basic visualization, it lacks interactivity. Users cannot directly view the updated syntax chart in real time on the web page and need to regenerate and replace the image. Summary of the invention
[0004] The purpose of the present invention is to provide a document visualization method and device based on the graph database GQL syntax, so as to solve the problems of high manual maintenance cost and easy errors caused by the inability of railway map generation tools in the prior art to update and maintain railway maps through automated processes, as well as the problem that the generated railway maps lack interactivity and real-time performance.
[0005] To achieve the above objectives, this application adopts the following technical solutions:
[0006] The document visualization method based on the graph database GQL syntax of the present application includes the following steps:
[0007] 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;
[0008] Based on the PEG.js parser generator, an EBNF parser is constructed in combination with a preset grammatical structure optimization algorithm, and a style manager, a railway diagram generation library and the EBNF parser are integrated into a rendering interface;
[0009] The encapsulated rendering interface is called to process the identified EBNF code blocks respectively to obtain a number of user-visible interactive railway diagrams, and each railway diagram is inserted into a corresponding predetermined replacement position in the target document according to the mapping relationship table.
[0010] Through the EBNF parser, railway diagram generation library and style manager integrated into the rendering interface, the EBNF code blocks extracted from the target document are converted into user-visible interactive SVG railway diagrams. Based on the constructed mapping relationship table between the EBNF code blocks and the predetermined replacement positions in the target document, the generated railway diagram is dynamically embedded into the corresponding positions in the target document, which significantly improves the readability and maintenance efficiency of technical documents.
[0011] Preferably, the identifying of all EBNF code blocks containing GQL grammar definitions in the target document includes:
[0012] 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 by file extension during the traversal process to obtain the target document;
[0013] All EBNF code blocks are extracted from the target document using regular expressions, and each EBNF code block is used to represent the graph database GQL syntax definition.
[0014] Preferably, the PEG.js parser generator is used to construct an EBNF parser in combination with a preset grammar structure optimization algorithm, including:
[0015] The parsing rules of each component in the EBNF code block are defined using the PEG.js grammar, wherein the component includes productions, selection structures, sequences, non-terminal symbols and terminals, and the parsing rules are passed to the PEG.js parser generator.
[0016] Preferably, the grammatical structure optimization algorithm includes a branch merging optimization strategy and a loop structure optimization strategy;
[0017] The branch merge optimization strategy includes: using the appendNodeToChoices function to convert the redundant choice structure containing a common prefix or suffix in the EBNF code block into an OptionalSequence component;
[0018] The loop structure optimization strategy includes: using the appendNodeToSequence function to convert the composite structure containing the repeated sequence in the EBNF code block into a OneOrMore component.
[0019] Preferably, the method further comprises:
[0020] The deepEq function and isRTLCapable function in Node.js are called respectively to perform equivalence detection and RTL layout direction judgment on the nodes in the railway diagram.
[0021] Preferably, the style manager is used to define style rules of the railway diagram and to theme-isolate the railway diagram through CSS class names.
[0022] Preferably, the method further comprises:
[0023] The rendering interface integrates the ry-catch block for capturing errors generated during the syntax parsing of EBNF code blocks and generating error information tags, the console.log tool for outputting document processing logs, and the anafanafo library for calculating the character width in railway diagrams.
[0024] A document visualization device based on graph database GQL syntax, comprising:
[0025] Establishing a module for identifying all EBNF code blocks containing GQL grammar 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 is used to construct an EBNF parser based on the PEG.js parser generator, combined with a preset branch merging optimization strategy and a loop structure optimization strategy, and integrate a style manager, a railway diagram generation library and the EBNF parser into a rendering interface;
[0027] The insertion module is used to call the encapsulated rendering interface to process each identified EBNF code block to obtain a number of user-visible interactive railway diagrams, and insert each railway diagram into a corresponding predetermined replacement position in the target document according to the mapping relationship table.
[0028] An electronic device comprises a memory and a processor, wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions are executed by the processor to implement a document visualization method based on a graph database GQL grammar as described in any one of the above.
[0029] A computer-readable storage medium storing a computer program, wherein the computer program enables a computer to implement a document visualization method based on a graph database GQL grammar 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 that integrates the style manager, @prantlf / railroad-diagrams library and EBNF parser to generate user-visible interactive SVG railway diagrams, and then dynamically embedding them into the target document, the readability and maintenance efficiency of technical documents are significantly improved. BRIEF DESCRIPTION OF THE DRAWINGS
[0032] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.
[0033] Figure 1 It is a flowchart of a document visualization method based on the graph database GQL syntax provided in an embodiment of the present application;
[0034] Figure 2 It is the original structure of a railway map;
[0035] Figure 3 yes Figure 2 The optimized structure of the railway diagram in ;
[0036] Figure 4 is a schematic diagram of a railway map generated according to an embodiment of the present application;
[0037] Figure 5 It is a structural diagram of a document visualization device based on the graph database GQL syntax provided in an embodiment of the present application. DETAILED DESCRIPTION
[0038] To make the technical solution of the present application clearer, the present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments. The terms "first", "second", etc. in the claims and specification of the present application are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances. This is only to describe the distinction method used when describing objects with the same attributes in the embodiments of the present application. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, so that a process, method, system, product or device containing a series of units is not necessarily limited to those units, but may include other units that are not clearly listed or inherent to these processes, methods, products or devices.
[0039] Glossary:
[0040] Railroad Diagrams: Also known as syntax diagrams or track diagrams, a diagramming tool that uses graphical tracks to represent grammatical rules, often used to clearly display 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) for describing two-dimensional graphics.
[0042] Graph Database: A non-relational database (NoSQL) specifically designed for storing, managing, and querying highly connected data. Its core is to directly represent the relationship between data with a graph structure (composed of nodes, edges, and attributes).
[0043] GQL (Graph Query Language): A graph query language designed for property graph models, which aims 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. It 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 combination, branching, repetition, and optional logic 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 the Parsing Expression Grammar (PEG) and automatically generate the corresponding parser. 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 perform asynchronous operations.
[0047] Example 1
[0048] A document visualization method based on the GQL syntax of graph databases, such as Figure 1As shown, the following steps are included:
[0049] S110, identifying all EBNF code blocks containing GQL grammar 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.
[0050] In the disclosed embodiment, the target document is a Markdown file in a specified directory, wherein the Markdown file is a text file written in a lightweight markup language, which exists in plain text form and implements text typesetting and formatting through simple markup syntax.
[0051] Therefore, before identifying the EBNF code block in the target document, it is necessary to find the target document from the specified directory.
[0052] Furthermore, the fs module for operating the file system and the path module for processing and converting the file path in Node.js are called to recursively traverse the specified directory, and all Markdown files are filtered out by file extension during the traversal process to obtain the target document;
[0053] Regular expressions are used to extract all EBNF code blocks from the target document. Each EBNF code block is used to represent the GQL syntax definition of the graph database.
[0054] The fs module is a core module built into Node.js that handles 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, which is used to process and convert file paths. It provides a series of methods and properties to help developers handle path problems in a cross-platform way so that the code can run normally on different operating systems.
[0056] It should be noted here that the main functions of the path module include concatenating file paths and obtaining the file extension in the path. Concatenating file paths means that the path separators may be different on different operating systems (such as Windows uses \, while Unix / Linux uses / ). The path module's path.join() 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 use the path module's path.extname(path) to return the extension part of the path, including the dot (.). If the path has no extension, an empty string is returned.
[0057] In the disclosed embodiment, the fs module and the path module in Node.js are first introduced, and then a recursive function processDirectory is defined, which accepts a directory path as a parameter and is used to traverse the directory specified by the developer (such as docs-2.0-en and docs-2.0-zh) and its subdirectories. This function also contains the logic of reading the directory, traversing the directory items, and processing subdirectories and files. Specifically, fs.readdirSync is used to read the directory content specified by the developer, and the {withFileTypes:true} option is used to obtain the Dirent object, and then the forEach method is used to traverse each directory item to check whether it is a file or a directory. If the current item is a directory, path.join is used to concatenate the complete path, and processDirectory is recursively called. If the current item 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", which means directory entry. When the {withFileTypes:true} option is used, each returned directory entry is a Dirent object instead of 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 processing directory contents more flexible and efficient.
[0059] Automatically adapting Chinese and English document versions through directory traversal strategies not only realizes the synchronous processing of Markdown multi-version (Chinese / English) documents, but also avoids repeated development.
[0060] All Markdown files filtered out from the specified directory are the target documents. Then the regular expression / ```ebnf\n([\s\S]*?)``` / g is used to find all code blocks manually marked as EBNF from the target documents. Each EBNF code block here is used to represent the GQL syntax definition of the graph database.
[0061] Regular expressions are used to accurately extract code blocks marked as EBNF in Markdown files to avoid omissions, and all EBNF code blocks can be automatically extracted at one time without manual copying and pasting, which improves processing efficiency. Regular expression constraints are used to require that 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] At the same time, the insertion position of the railway diagram corresponding to each EBNF code block in the target document is determined, where the insertion position is also the predetermined replacement position of each EBNF code block, and then a mapping relationship table between the EBNF code block and the predetermined replacement position is established.
[0063] By binding each EBNF code block to its corresponding railway diagram through a mapping relationship table, automatic insertion of the railway diagram is realized, which can eliminate the risk of "misplacement" or "omission" caused by manual insertion and reduce the probability of human error. When the EBNF rule or railway diagram is modified, only the path in the relationship table needs to be updated without global search and replacement. When a railway diagram is rendered abnormally, the source EBNF code block can be directly traced back through the relationship table without page-by-page inspection, which enhances maintainability.
[0064] S120. Based on the PEG.js parser generator, an EBNF parser is constructed in combination with a preset grammatical structure optimization algorithm, and a style manager, a railway diagram generation library and the EBNF parser are integrated into a rendering interface.
[0065] The main purpose of this step is to combine the grammar structure optimization algorithm to generate an EBNF grammar parsing engine based on PEG.js, and integrate the grammar parsing engine with the style manager and railway diagram generation library to build a more powerful grammar visualization system and improve development efficiency.
[0066] Furthermore, the parsing rules of each component in the EBNF code block are defined using the PEG.js grammar, and the components include productions, selection structures, sequences, non-terminal symbols, and terminals, and the parsing rules are passed to the PEG.js parser generator.
[0067] EBNF code blocks usually contain productions, choice structures, sequences, non-terminals and terminals. Productions are the core rules of EBNF, indicating how a grammatical unit is expanded into other grammatical units; choice structures represent one of multiple options, using vertical bars | to separate different options, indicating an "or" relationship, that is, you can choose one of the options; sequences represent a series of elements connected in order, usually separated by commas or spaces; non-terminals are placeholders in the grammar, indicating a grammatical unit that has not yet been fully defined, usually enclosed in angle brackets <> or directly using identifiers (such as words starting with lowercase letters); terminals are the basic units in the grammar, indicating specific characters or strings, usually using double quotes "" or directly representing specific characters.
[0068] The first step in building an EBNF parser is to use the PEG.js grammar to define the parsing rules of these components. The specific definition can be determined according to the actual needs of the developer.
[0069] Examples of key grammatical 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 rules for parsing productions, which extracts the non-terminal symbol name and the selection structure on the right, and returns an object containing this information.
[0072] choice = f:seq r:(_ '|' _ seq)* { ...}
[0073] / / Defines the rules for parsing the selection structure, that is, extracting all sequences separated by | and returning an array containing these sequences.
[0074] Furthermore, the syntax structure optimization algorithm includes a branch-merge optimization strategy and a loop structure optimization strategy;
[0075] Among them, the branch merge optimization strategy includes: using the appendNodeToChoices function to convert the redundant choice structures containing 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 the composite structure containing repeated sequences in the EBNF code block into a OneOrMore component.
[0077] The functions of the appendNodeToChoices function and the appendNodeToSequence function are directly related to the choices structure and sequence structure in the EBNF grammar rules. Among them, the appendNodeToChoices function adds a new option to the choice branch, which is equivalent to appending |C to the right of A|B to form A|B|C, where A|B|C means either matching A, B or C; the appendNodeToSequence function appends a new element to the sequence structure, which is equivalent to appending C to the right of AB to form ABC, where ABC means matching A first, then B and finally C.
[0078] The OptionalSequence component represents an optional sequence, usually used to describe a situation where a part can be chosen to appear or not appear, 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 an EBNF code block, if multiple options share a common prefix, such as a|a?b, redundancy will result, and repeated structures such as a (ba)* will increase complexity. To solve this problem, in the embodiments of the present disclosure, a grammatical structure optimization algorithm is pre-set, specifically including a branch merging optimization strategy and a loop structure optimization strategy.
[0081] The core idea of the branch merge optimization strategy is to reduce redundant options by detecting common prefixes or suffixes and merge them into a more concise OptionalSequence component.
[0082] A common prefix means that if multiple options share the same beginning part (such as a? b | ac), the common prefix a can be extracted.
[0083] A common suffix means that if multiple options share the same ending part (such as ba? | ca?), the common suffix a can be extracted.
[0084] The specific implementation code of the branch merge 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 grammatical 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] / / Get the last element last in opts (selection structure), which is usually a syntax node that has been processed.
[0094] / ** @type {RRComponent[]?} * /
[0095] let optItems = undefined;
[0096] / / Define a variable optItems to store possible merge items, and its initial value is undefined, indicating that no content that can be merged has been found.
[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 Optional type, 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()), then merge last and the remaining nodes 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 has not been set yet, and the last element b of the sequence is of Optional type, and its content (b.item) is the same as the last element last in opts, then remove the last element in 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 an item that can be merged is found (optItems has been set), replace the last element of opts with a new OptionalSequence node. OptionalSequence contains two sub-items, which are the merged array (optItems). Then return and end the function execution.
[0112] }
[0113] opts.push(node);
[0114] / / If no items that can be merged are found, the node is directly added to opts.
[0115] }
[0116] The core idea of the loop structure optimization strategy is to reduce redundant sequences and optionals by detecting specific nested structures and merging 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 judgment, checking whether the node meets the following conditions one by one:
[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 is repeated one or more times (OneOrMore).
[0131] 3) node.item.repeat.type === "Skip"
[0132] node.item.repeat is a OneOrMore repetition rule, and is of type Skip (probably meaning to skip something).
[0133] 4) node.item.item.type === "Sequence"
[0134] node.item.item is a sequence, which represents the syntax elements connected in sequence.
[0135] 5) node.item.item.items.length === 2
[0136] The sequence contains two elements.
[0137] Only when the above conditions 1), 2), 3), 4) and 5) are met, will the next step be taken.
[0138] const left = items[items.length - 1];
[0139] / / Get the last element in the items array (that is, the last node of the current sequence).
[0140] const [repeat, right] = node.item.item.items;
[0141] / / Deconstruct node.item.item.items and assign its two elements to repeat and right respectively, where repeat represents the first element in the sequence, usually indicating a repetition rule, and right represents the second element in the sequence, usually indicating another syntax node.
[0142] if (isRTLCapable(repeat) && deepEq(left, right)) {
[0143] / / Check whether repeat supports a certain feature (maybe "right to left" or other grammatical rules), and use the deep comparison function deepEq to check whether left and right are equal.
[0144] Only when both of these conditions are met can the merge be performed.
[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 merging conditions are not met, add the node directly to items.
[0156] }
[0157] like Figure 2 and Figure 3 As shown, Figure 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 realized 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. The overall complexity is also reduced accordingly.
[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 graph database GQL syntax, characterized in that: The following steps are involved: 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, an EBNF parser is constructed in combination with a preset grammatical structure optimization algorithm, and a style manager, a railway diagram generation library and the EBNF parser are integrated into a rendering interface; The encapsulated rendering interface is called to process the identified EBNF code blocks respectively to obtain a number of user-visible interactive railway diagrams, and each railway diagram is inserted into a corresponding predetermined replacement position in the target document according to the mapping relationship table.
2. According to claim 1, a document visualization method based on graph database GQL syntax is characterized in that: The identification of 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 by file extension during the traversal process to obtain the target document; All EBNF code blocks are extracted from the target document using regular expressions, and each EBNF code block is used to represent the graph database GQL syntax definition.
3. According to claim 1, a document visualization method based on graph database GQL syntax is characterized in that: The PEG.js parser generator is used to construct an EBNF parser in combination with a preset grammar structure optimization algorithm, including: The parsing rules of each component in the EBNF code block are defined using the PEG.js grammar, wherein the component includes productions, selection structures, sequences, non-terminal symbols and terminals, and the parsing rules are passed to the PEG.js parser generator.
4. The document visualization method based on graph database GQL syntax according to claim 1, characterized in that: The grammatical structure optimization algorithm includes a branch merging optimization strategy and a loop structure optimization strategy; The branch merge optimization strategy includes: using the appendNodeToChoices function to convert the redundant choice structure containing a common prefix or suffix in the EBNF code block into an OptionalSequence component; The loop structure optimization strategy includes: using the appendNodeToSequence function to convert the composite structure containing the repeated sequence in the EBNF code block into a OneOrMore component.
5. According to the document visualization method based on graph database GQL syntax described in claim 4, it is characterized in that: The method further comprises: The deepEq function and isRTLCapable function in Node.js are called respectively to perform equivalence detection and RTL layout direction judgment on the nodes in the railway diagram.
6. A document visualization method based on graph database GQL syntax according to claim 1, characterized in that: The style manager is used to define the style rules of the railway diagram and to isolate the railway diagram by themes through CSS class names.
7. The document visualization method based on graph database GQL syntax according to claim 1, characterized in that: The method further comprises: The rendering interface integrates the ry-catch block for capturing errors generated during the syntax parsing of EBNF code blocks and generating error information tags, the console.log tool for outputting document processing logs, and the anafanafo library for calculating the character width in railway diagrams.
8. A document visualization device based on graph database GQL syntax, characterized in that: include: Establishing a module for identifying all EBNF code blocks containing GQL grammar 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; A construction module is used to construct an EBNF parser based on the PEG.js parser generator, combined with a preset branch merging optimization strategy and a loop structure optimization strategy, and integrate a style manager, a railway diagram generation library and the EBNF parser into a rendering interface; The insertion module is used to call the encapsulated rendering interface to process each identified EBNF code block to obtain a number of user-visible interactive railway diagrams, and insert each railway diagram into a corresponding predetermined replacement position in the target document according to the mapping relationship table.
9. An electronic device, characterized in that: It includes a memory and a processor, the memory is used to store one or more computer instructions, wherein the one or more computer instructions are executed by the processor to implement a document visualization method based on the graph database GQL syntax as described in any one of claims 1 to 7.
10. A computer-readable storage medium storing a computer program, characterized in that: The computer program enables a computer to implement a document visualization method based on graph database GQL syntax as described in any one of claims 1 to 7 when executed.
Citation Information
Patent Citations
Visualized drifting algorithm of Gif warehouse file annotation system
CN108228231A
Analysis method for converting graphical code block into executable program
CN112015400A
Code visualization analysis method and device based on abstract syntax
CN112306479A
Visual programming method and device, equipment and storage medium
CN113961183A
Language mixed writing analysis method and device, equipment and storage medium
CN114626358A