Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rework syntax diagrams creation for ease of use and simplicity.

See original GitHub issue

I’ve been messing with chevrotain a lot lately and it’s quite amazing, so thanks for all your hard work.

The demo has those great railroad diagrams, but getting all that set up seems a bit tedious (mucking with HTML and what not). I wrote a pretty simple script that does pretty much the same thing, and was thinking you guys could benefit from it. You just provide a chevrotain.Parser instance to the exported function and it generates the HTML to a tmp file, then uses open to render it in the browser of your own preference.

import {gast, Parser} from 'chevrotain';
import {buildSyntaxDiagramsText} from 'chevrotain/diagrams/src/diagrams_builder';
import {serializeGrammarToFile} from 'chevrotain/diagrams/src/diagrams_serializer';
import {writeFile} from 'fs';
// tslint:disable-next-line:no-require-imports
import open = require('open');
import {resolve} from 'path';
import {tmpName} from 'tmp';

type DiagramsTextBuilder = (serializedGasts: gast.ISerializedGast[]) => string;

export default function createDiagram (parserInstance: Parser): void {
    const links: string[] = [
        resolve(__dirname, '../../node_modules/chevrotain/diagrams/diagrams.css')
    ];
    const scripts: string[] = [
        resolve(__dirname, '../../node_modules/chevrotain/diagrams/src/diagrams_behavior.js')
    ];
    const serializedGasts: gast.ISerializedGast[] = parserInstance.getSerializedGastProductions();
    const innerHtml: string = (<DiagramsTextBuilder> buildSyntaxDiagramsText)(serializedGasts);
    // tslint:disable-next-line:no-multiline-string
    const html: string = `
        <!DOCTYPE html>
        <meta charset="utf-8">
        <head>
            ${links.map((link: string) => `<link rel='stylesheet' href="${link}"/>`).join('\n\t')}
        </head>
        <body>
            <div id="diagrams" align="center">
                ${innerHtml}
            </div>
            ${scripts.map((script: string) => `<script src="${script}"></script>`).join('\n\t')}

            <script type="text/javascript">
                diagrams_behavior.initDiagramsBehavior();
            </script>
        </body>
    `;
    tmpName({postfix: '.html'}, (tmpNameError: Error, path: string): void => {
        writeFile(path, html, (): void => {
            open(path);
        });
    });
}

Right now the usage is like:

import createDiagram from './createDiagram';
import MyParser from './MyParser';
import tokens from './tokens';

const myParser: MyParser = new MyParser([], tokens);
createDiagram(myParser);

It would be pretty cool to have a chevrotain bin script that could take a file path to a module and do the same if the module exported a Parser class or instance; just a thought.

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

bd82commented, Oct 14, 2017

Updated Docs already up at: https://github.com/SAP/chevrotain/tree/master/diagrams

0reactions

bd82commented, Oct 19, 2017

Thank you for providing the feedback 👍

Top Results From Across the Web

The Art of Crafting Architectural Diagrams - InfoQ

Designing architectural diagrams might not be an easy task; it can be tricky or error prone, even for the simplest ones. Creating consistent ......

Sequence Diagram Tutorial - Complete Guide with Examples

This sequence diagram tutorial is to help you understand sequence diagrams better; to explain everything you need to know, from how to draw...

The Practices of Agile Modeling (AM)

Depict Models Simply. When you consider the potential diagrams that you could apply (UML diagrams, user interface diagrams, data models, and so on)...

Creating and reconciling diagrams after executing model ...

In this paper we discuss how to create and update diagrams after the execution of a model transformation. This is achieved by creating...

Grokking the Low Level Design Interview Using OOD Principles

Grokking the Low Level Design Interview Using OOD Principles ... Learn to design class, use case, sequence and activity diagrams of the interview...