<commit_before># Generating Syntax Diagrams for a grammar.

It is often useful to visually inspect a grammar's syntax diagrams during development
or for documentation purposes.

This document contains instructions on how to generate Syntax railroad diagrams for a Chevrotain
grammar using the [railroad-diagrams](https://github.com/tabatkins/railroad-diagrams)
library by @tabatkins.

## Examples

-   [JSON Syntax diagrams](https://sap.github.io/chevrotain/diagrams_samples/json.html).
-   [CSS Syntax diagrams](https://sap.github.io/chevrotain/diagrams_samples/css.html).

## Features

-   Highlight usages and definitions on mouse hover.
-   Scroll to definition of non-terminal on mouse click.

## Instructions

Chevrotain provides an the [**createSyntaxDiagramsCode**](https://sap.github.io/chevrotain/documentation/3_7_1/globals.html#createsyntaxdiagramscode) API to generate the **html source code**
of syntax diagrams. This html source code can then be used by an end user in either node.js or a browser:

1.  By writing it directly to the disk in a pure node.js runtime scenario.
2.  By inserting it dynamically into an iframe in a browser scenario.

**Examples:**

-   [Generating syntax diagrams to disk](https://github.com/SAP/chevrotain/blob/master/examples/parser/diagrams/gen_diagrams.js)

    -   Self contained, no need for Chevrotain or the grammar when running the html.

-   [Generating syntax diagrams dynamically into an iframe](https://github.com/SAP/chevrotain/blob/master/examples/parser/diagrams/diagrams_browser.html)
    -   Requires loading **both** Chevrotain and the grammar when running the html.
<commit_msg>Update generating_syntax_diagrams.md<commit_after># Generating Syntax Diagrams for a grammar.

It is often useful to visually inspect a grammar's syntax diagrams during development
or for documentation purposes.

This document contains instructions on how to generate Syntax railroad diagrams for a Chevrotain
grammar using the [railroad-diagrams](https://github.com/tabatkins/railroad-diagrams)
library by @tabatkins.

## Examples

-   [JSON Syntax diagrams](https://sap.github.io/chevrotain/diagrams_samples/json.html).
-   [CSS Syntax diagrams](https://sap.github.io/chevrotain/diagrams_samples/css.html).

## Features

-   Highlight usages and definitions on mouse hover.
-   Scroll to definition of non-terminal on mouse click.

## Instructions

Chevrotain provides the [**createSyntaxDiagramsCode**](https://sap.github.io/chevrotain/documentation/3_7_1/globals.html#createsyntaxdiagramscode) API to generate the **html source code**
of syntax diagrams. This html source code can then be used by an end user in either node.js or a browser:

1.  By writing it directly to the disk in a pure node.js runtime scenario.
2.  By inserting it dynamically into an iframe in a browser scenario.

**Examples:**

-   [Generating syntax diagrams to a file](https://github.com/SAP/chevrotain/blob/master/examples/parser/diagrams/gen_diagrams.js)

    -   Self contained, no need for Chevrotain or the grammar when rendering the html.

-   [Generating syntax diagrams dynamically into an iframe](https://github.com/SAP/chevrotain/blob/master/examples/parser/diagrams/diagrams_browser.html)
    -   Requires loading **both** Chevrotain and the grammar (and dependencies!) when rendering the html.

{'fraction_non_alphanumeric': 0.08713942307692307, 'fraction_numerical': 0.0030048076923076925, 'mean_word_length': 4.576214405360134, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5311821', 'n_tokens_mistral': 1027, 'n_tokens_neox': 938, 'n_words': 333}