ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

如何用 Mermaid 绘制铁路图(railroad diagram)文档化文法语法

如何用 Mermaid 绘制铁路图(railroad diagram)文档化文法语法 如何用 Mermaid 绘制铁路图railroad diagram文档化文法语法【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid铁路图railroad diagram也称语法图用图形方式表示上下文无关文法适合把语言或格式的语法规则画成文档典型应用如 JSON.org 上对 JSON 语法的说明。当你的任务是用 Mermaid 把一个文法EBNF、ABNF 或 PEG写成图并嵌入文档时从 Mermaid v11.16.0 开始可以直接使用内置的 railroad 图类型在 Mermaid 代码块中写入对应的文法文本Mermaid 会渲染出带起止标记、分支和回环路径的 SVG 图。适用前提是环境中使用的 Mermaid 版本不低于 11.16.0当前仓库 packages/mermaid/package.json 中的版本为 11.17.2。本文的完整语法参考以 docs/syntax/railroad.md 为准。选择与文法记法匹配的图类型关键字Mermaid 支持四种 railroad 关键字第一行写哪个关键字就用哪种记法解析后续规则。写图前先确定手里的文法是哪种记法图类型关键字记法EBNFrailroad-ebnf-betaExtended Backus–Naur FormW3C 与 ISO 14977 风格ABNFrailroad-abnf-betaAugmented Backus–Naur FormRFC 5234PEGrailroad-peg-betaParsing Expression GrammarIR原始构造器railroad-betaMermaid 的 railroad 中间表示直接写显式构造器如果文法记法不确定EBNF 是最常见的选择文档中也给出了最多示例railroad-beta则用于想完全控制渲染结构、不套任何文法记法的场景。写出一条符合共同结构的规则四种类型共享同一外层结构写任何关键字前都需要满足这几点第一行写图类型关键字例如railroad-ebnf-beta可选用title后跟一个字符串给图加标题可选用accTitle:和accDescr:提供无障碍元数据每条语句定义一条文法规则每条规则以分号;结尾。规则赋值操作符和定义内部使用的运算符随记法不同下面按记法分别说明。主路径用 EBNFrailroad-ebnf-beta画一个完整文法EBNF 规则的写法是rule_name definition ;文档同时接受::赋值运算符。规则内部的基本元素终结符带引号的字面字符串text或text非终结符不加引号的标识符引用其他规则如identifier。各运算符的两种记法对照同一关键字下两种风格都可用功能W3C 记法ISO 14977 记法说明终结符text或texttext或text字面字符串非终结符identifieridentifier规则引用顺序A BA , B拼接选择A \| BA \| B备选可选A?[ A ]零次或一次重复0A*{ A }零次或多次重复1A-一次或多次分组( A B )( A B )组合元素注释/* text */(* text *)注释解析时忽略特殊序列-? text ?特殊序列用于 EBNF 难以表达的元素例外A - BA - B匹配 A 但排除 B下面这个算术表达式文法来自 docs/syntax/railroad.md 的示例用到了分组、选择、重复和非终结符引用可直接作为模板改写成自己的文法railroad-ebnf-beta title Arithmetic Expression Grammar expression term ( ( | - ) term )* ; term factor ( ( * | / ) factor )* ; factor number | ( expression ) ; number digit ; digit 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 ;如果文法本身就是 JSON 这类格式规范文档给出的 JSON 文法示例展示了 ISO 14977 风格下的可选组[ ... ]用法同样可直接参照railroad-ebnf-beta title JSON Grammar json element ; element object | array | string | number | true | false | null ; object { [ member ( , member )* ] } ; array [ [ element ( , element )* ] ] ; member string : element ;用其他记法写规则如果文法不是 EBNF保留文法原文的记法并换用对应关键字即可四种关键字共享上面的共同结构。ABNFrailroad-abnf-beta规则仍写为name definition ;但与 EBNF 的关键差异是备选使用/而不是|A / B拼接直接按空白分隔A B重复用前缀*A零次或多次、1*A一次或多次、2*4A2 到 4 次、3A恰好 3 次可选组用方括号[ A ]分组用括号( A B )终结符可以是带引号字符串text或数值形式%x41、%d65、%b1000001支持%x30-39这类范围注释以;开头并持续到行尾。文档中的邮箱地址示例展示了1*、( ... )与/的组合railroad-abnf-beta title Email Address address local-part domain ; local-part 1*( ALPHA / DIGIT / . / - ) ; domain label *( . label ) ; label 1*( ALPHA / DIGIT / - ) ;PEGrailroad-peg-beta规则写为Name - definition ;使用有序选择/先试A再试B后缀运算符A?、A*、A前缀谓词Aand-predicate前瞻和!Anot-predicate负向前瞻.匹配任意单个字符终结符用引号字符串注释以#开头持续到行尾railroad-peg-beta title Identifiers (keywords excluded) Identifier - !Keyword Letter Letter* ; Keyword - if / else / while ; Letter - a / b / c / _ ;IR 原始构造器railroad-beta不写文法记法而是把每个构造写成显式函数式构造器规则写为rule_name expression ;。可用构造器如下构造器含义terminal(text)终结符字面字符串nonterminal(name)非终结符规则引用sequence(a, b, ...)元素顺序连接choice(a, b, ...)备选optional(a)零次或一次zeroOrMore(a)零次或多次oneOrMore(a)一次或多次special(text)特殊序列文档给出的表达式文法 IR 示例与前面 EBNF 的算术文法等价适合需要精确控制渲染结构的场景railroad-beta title Expression Grammar expression sequence( nonterminal(term), zeroOrMore(sequence( choice(terminal(), terminal(-)), nonterminal(term) )) ) ; term sequence( nonterminal(factor), zeroOrMore(sequence( choice(terminal(*), terminal(/)), nonterminal(factor) )) ) ; factor choice( nonterminal(number), sequence(terminal((), nonterminal(expression), terminal())) ) ; number oneOrMore(nonterminal(digit)) ; digit choice(terminal(0), terminal(1), terminal(2), terminal(3), terminal(4), terminal(5), terminal(6), terminal(7), terminal(8), terminal(9)) ;验证渲染结果渲染成功后图中的视觉元素应能对上文法规则终结符渲染为圆角矩形非终结符渲染为普通矩形两者颜色均继承当前 Mermaid 主题每条规则首尾有小圆圈起止标记选择对应弯曲的分支路径重复对应回环路径。仓库的端到端测试 e2e/rendering/railroad/railroad.spec.ts 对渲染产物的判断条件是渲染结果根节点是svg且其中.railroad-rule与.railroad-line元素数量均大于 0。可以照这个思路自查如果写入了规则但图中没有出现规则轨道或连接线说明规则文本没被正确解析。该测试文件同时覆盖了四种关键字各自的典型规则含 EBNF 的 W3C 与 ISO 14977 两种风格可对照确认你的写法属于哪种记法。主题、限制与写作建议铁路图默认继承当前 Mermaid 主题的颜色与字体需要针对铁路图单独调整样式时可通过railroad配置块覆盖该配置块在 MermaidConfig 接口中以可选的RailroadDiagramConfig形式声明。手绘风格look: handDrawn目前不支持铁路图不要在该场景下启用。文档给出的最佳实践把复杂规则拆成更小、可复用的子规则非终结符使用有描述性的名字用title为文法提供上下文相关的规则放在一起定义整张图只使用一种记法和它对应的关键字。完成一条文法图后可回到 docs/syntax/railroad.md 核对 EBNF/ABNF/PEG 的运算符对照表确认所用记法与关键字一致若文法规模增大按文档建议先拆分规则再渲染避免单条规则过长导致图难以阅读。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表