可视化LALR语法

Question

我想可视化一个语法文件(实际上是咖啡脚本的Jison语法)。因此，输入文件是Bison/Yacc样式的语法文件。预期的输出可以是Graphviz点文件或类似的文件。

我不一定要找一个完整的集成开发环境，比如GOLD。但是能够处理LALR输入是很重要的，这就是为什么优秀的ANLTRWorks没有被考虑在内。

我还检查了一个comparison of parsers on Wikipedia，但它只支持集成开发环境，而不是可视化。

这是我真正想要可视化的coffeescript grammar file。

Answer 1

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

grammar.coffee的内容是可执行代码，必须运行它才能获得实际的Jison语法。在用Javascript alert替换了Jison call之后，我使用了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 grammar converter，生成如下语法：

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

从这里我们可以让Railroad Diagram Generator创建一个语法图：

​

​

。。。

请注意，转换器只计算语法的"bnf“部分，因此它不考虑令牌定义。这可以通过对W3C样式的语法进行一些手动后处理来改进。

Answer 2

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

• 在您的文件系统中找到node_modules/coffee-script/lib/coffee-script/grammar.js模块；
• 将该文件的代码复制并粘贴到js2coffee站点上JS->咖啡窗格的源代码窗格中(您可以跳过这一步，但我发现编辑CS比摆弄JS要好得多)。
• 将翻译后的代码保存到JS并定位

exports.parser =新解析器(标记: tokens.join(“") bnf:语法运算符: operators.reverse() startSymbol："Root”)

在代码中；将其替换为

console.log JSON.stringify标记: tokens.join“”bnf:语法运算符: operators.reverse() startSymbol：“根”

在注意使用完全相同的缩进(第一行两个空格，其余行四个空格)的同时，从命令行运行类似coffee node_modules/coffee-script/lib/coffee-script/grammar.coffee > /tmp/coffee.grammar;

• copy的命令，并将结果文件的代码粘贴到the grammar converter;

• copy中，然后将转换器产生的

语法粘贴到railroad diagram generator;

• go上的语法编辑器中，然后移到View Diagram选项卡上，然后- rejoice!

这是一种杂务，做所有这些复制‘n’狂热的东西，但肯定足够好任何一次性可视化。我已经在网络上搜索了很多次，寻找一个合理的RR图生成器，这个特定的生成器绝对是输出最漂亮的之一。当你想到铁路图是多么的简单时，你会感到有点惊讶。