可视化 LALR 语法

Question

我想可视化一个语法文件（实际上是咖啡脚本的 Jison 语法）。所以输入文件是Bison/Yacc风格的语法文件。预期的输出可能是 Graphviz 点文件或类似的文件。

我不一定要寻找完整的 IDE，例如 GOLD。但能够处理 LALR 输入非常重要，这就是为什么优秀的 ANLTRWorks 不这样做的原因t 考虑在内。

我还检查了 Wikipedia 上解析器的比较，但它仅包含 IDE 支持，但不是可视化。

这是我实际上想要可视化的 coffeescript 语法文件 。

Answer 1

以下是创建语法图的说明。

grammar.coffee 的内容是可执行代码，其中必须运行才能获取实际的 Jison 语法。在用 Javascript 警报替换 Jison 调用后，我使用 Try CoffeeScript 页面来编译它。然后运行生成的 Javascript 来获取语法，其中
看起来像这样：

{
  "tokens":" TERMINATOR TERMINATOR TERMINATOR STATEMENT INDENT OUTDENT INDENT OUTDENT IDENTIFIER NUMBER STRING JS REGEX BOOL = = INDENT OUTDENT : : INDENT OUTDENT RETURN RETURN HERECOMMENT PARAM_START PARAM_END -> =>  ,  , ... = ... . ?. :: :: INDEX_START INDEX_END INDEX_SOAK { }  , TERMINATOR INDENT OUTDENT CLASS CLASS CLASS EXTENDS CLASS EXTENDS CLASS CLASS CLASS EXTENDS CLASS EXTENDS SUPER SUPER  FUNC_EXIST CALL_START CALL_END CALL_START CALL_END THIS @ @ [ ] [ ] .. ... [ ] , TERMINATOR INDENT OUTDENT INDENT OUTDENT , TRY TRY TRY FINALLY TRY FINALLY CATCH THROW ( ) ( INDENT OUTDENT ) WHILE WHILE WHEN UNTIL UNTIL WHEN LOOP LOOP FOR FOR FOR OWN , FORIN FOROF FORIN WHEN FOROF WHEN FORIN BY FORIN WHEN BY FORIN BY WHEN SWITCH INDENT OUTDENT SWITCH INDENT ELSE OUTDENT SWITCH INDENT OUTDENT SWITCH INDENT ELSE OUTDENT LEADING_WHEN LEADING_WHEN TERMINATOR IF ELSE IF ELSE POST_IF POST_IF UNARY - + -- ++ -- ++ ? + - MATH SHIFT COMPARE LOGIC RELATION COMPOUND_ASSIGN COMPOUND_ASSIGN INDENT OUTDENT EXTENDS",
  "bnf":
  {
    "Root":
    [
      ["","return $ = new yy.Block;",null],
      ["Body","return $ = $1;",null],
      ["Block TERMINATOR","return $ = $1;",null]
    ],
    "Body":
    [
      ["Line","$ = yy.Block.wrap([$1]);",null],
      ["Body TERMINATOR Line","$ = $1.push($3);",null],
      ["Body TERMINATOR","$ = $1;",null]
    ],
    "Line":
    [
      ["Expression","$ = $1;",null],
      ["Statement","$ = $1;",null]
    ],
    ...

上面的内容可以输入到 Jison-to-W3C 语法转换器，结果
在这样的语法中：

Root     ::= ( Body | Block TERMINATOR )?
Body     ::= Line ( TERMINATOR Line | TERMINATOR )*
Line     ::= Expression
           | Statement
...

从这里我们可以让铁路图生成器创建一个语法图：

. 。 。

请注意，转换器仅评估语法的“bnf”部分，因此它不会考虑标记定义。这可以通过对 W3C 风格语法进行一些手动后处理来改进。

Answer 2

所以我再次尝试，立即发现了我最明显的错误 - 我发布的 json 错误地使用了单引号而不是双引号。让我详细介绍一下工作流程；这很简单，如果您已经在 NodeJS 上运行 CoffeeScript，那么您就可以开始了：

• 找到 node_modules/coffee-script/lib/coffee-script/grammar.js 模块您的文件系统；

• 复制并复制将该文件的代码粘贴到 js2coffee 站点上 js->coffee 窗格的源窗格中（您可以跳过那个，但我发现编辑 CS 比摆弄 JS 更令人愉快）。

• 将翻译后的代码保存到node_modules/coffee-script/lib/coffee-script/grammar.coffee；

• 去定位

  exports.parser = new Parser(
    令牌：tokens.join(" ")
    bnf：语法
    运算符：operators.reverse()
    开始符号：“根”
  ）
  

  在代码中；将其替换为

  console.log JSON.stringify
    令牌：tokens.join“”
    bnf：语法
    运算符：operators.reverse()
    开始符号：“根”
  

  同时注意使用完全相同的缩进（第一行两个空格，其余四个空格）。

• 从命令行运行coffee node_modules/coffee-script/lib/coffee-script/grammar.coffee > /tmp/coffee.grammar;

• 将生成的文件的代码复制并粘贴到语法转换器中；

• 将生成的 EBNF 语法从转换器复制并粘贴到 铁路图生成器 上的语法编辑器中;

• 转到“视图图”选项卡，然后 - 高兴！

做所有这些复制和模仿的事情有点苦差事，但对于任何一次性可视化来说肯定足够好了。我一直在网上搜索一个合理的 RR 图生成器，这个特定的生成器绝对是输出最漂亮的生成器之一。当您想到铁路图实际上是多么简单时，您会感到有点惊讶。