GrammKit is a tool for generating syntax diagrams (also known as railroad diagrams) for parser grammars. Check out the online version.
Currently these grammar formats are supported:
- PEG.js - it is parsed into internal AST of PEG.js which is then translated using peg-rd.js.
- EBNF defined in W3C standards - it parsed into AST using parse-ebnf.pegjs
- Ohm - translation is done using semantic actions in ohm-rd.js
Is uses the railroad-diagrams library to generate SVG images.
npm install -g grammkit
To generate static html page run grammkit yourgrammar.peg.
To generate markdown file run grammkit -t md yourgrammar.peg.
This will generate separate SVG files and a markdown file that includes them.
npm install grammkit
var grammkit = require('grammkit');
var parse = require('pegjs/lib/parser').parse;
var grammar = parse('start = left ("+" / "-") right');
grammkit.diagram(grammar.rules[0]);
// => '<svg>...</svg>'The SVG renders as:
Clone repo and install dependencies with npm install.
Run npm run dev and open browser at http://localhost:3000/dist/ .
Here is an overview how the format conversion works:
- Add support for ohm grammars
- Choose different formats in web app and cli
List of other project worth checking out.
- jison debugger - interesting visualization of a parse tree for jison grammars
- ohm interactive editor - online editor for ohm grammars that also visualizes parse tree