{"id":22957220,"url":"https://github.com/mrminemeet/ebnf_railroad_visualizer","last_synced_at":"2026-03-20T00:03:57.267Z","repository":{"id":225969855,"uuid":"767182442","full_name":"MrMinemeet/ebnf_railroad_visualizer","owner":"MrMinemeet","description":"A Web-Based EBNF Railroad Diagram Visualizer","archived":false,"fork":false,"pushed_at":"2024-04-08T12:10:08.000Z","size":346,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-08T13:26:33.097Z","etag":null,"topics":["ebnf-syntax","railroad-diagrams","visualizer","wsn"],"latest_commit_sha":null,"homepage":"https://wtf-my-code.works/rr-diagram/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MrMinemeet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-04T21:04:51.000Z","updated_at":"2024-04-08T13:26:34.965Z","dependencies_parsed_at":"2024-03-18T13:41:15.679Z","dependency_job_id":"995f4198-194b-444e-a552-5dff9a8bef25","html_url":"https://github.com/MrMinemeet/ebnf_railroad_visualizer","commit_stats":null,"previous_names":["mrminemeet/ebnf_railroad_visualizer"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMinemeet%2Febnf_railroad_visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMinemeet%2Febnf_railroad_visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMinemeet%2Febnf_railroad_visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrMinemeet%2Febnf_railroad_visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrMinemeet","download_url":"https://codeload.github.com/MrMinemeet/ebnf_railroad_visualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246741187,"owners_count":20826063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ebnf-syntax","railroad-diagrams","visualizer","wsn"],"created_at":"2024-12-14T17:15:42.249Z","updated_at":"2026-03-20T00:03:57.258Z","avatar_url":"https://github.com/MrMinemeet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!IMPORTANT]\n\u003e **This repository is no longer actively maintained.**\n\u003e \n\u003e The website at https://wtf-my-code.works/rr-diagram/ will remain available on a best-effort basis, but uptime or functionality cannot be guaranteed.\n\u003e \n\u003e Thank you to everyone who has used and supported the project so far! ❤️\n\u003e \n\u003e Feel free to fork, modify, or build upon it — it's licensed under [CC BY 4.0](./LICENSE).\n\n# EBNF Railroad Diagram Visualizer\nA client-side browser-based tool for visualizing EBNF grammars as railroad diagrams.\nUses the [Wirth Syntax Notation](https://en.wikipedia.org/wiki/Wirth_syntax_notation) (*WSN*) for EBNF, as this is the common format used by the [Institute for System Software](https://ssw.jku.at/) (SSW) at Johannes Kepler University.\n\nThis project is a part of the course [Project in Software Engineering](https://ssw.jku.at/Teaching/Lectures/PSE/2024SS/index.html) at the SSW and is supervised by [Dr. Markus Weninger](https://ssw.jku.at/General/Staff/Weninger/).\n\n\u003e [!TIP]\n\u003e Almost all of the provided images are clickable and bring you to the visualizer with the matching input.\n\n## Implementation expectations\nThe grammar expects a correctly formatted EBNF grammar in WSN. Uppercase identifiers are treated as Non-Terminal Symbols (*NTS*). Lowercase identifiers are treated as Terminal Symbols (*TS*) which cannot be broken down further, e.g. `an` which may stand for a-z, A-Z and 0-9.\n\nThe grammar is automatically parsed and visualized as a railroad diagram when an input is detected. Errors are displayed below the input grammar if any occur.\n\n## Usage on provided website\nI host the project on my own website: https://wtf-my-code.works/rr-diagram/.  \nShould you encounter any issues, please let me know by creating an issue on this repository. In the meantime you can use the mirror hosted via [GitHub Pages](https://mrminemeet.github.io/ebnf_railroad_visualizer/).\n\nIf you want to use the package yourself, you can find the installation [further down](#installation-within-another-project).\n\n## Example\nThe following input results in the railroad diagram below:\n```ebnf\nPath = Dir { Dir } Name .\nDir = ( Name | \".\" [ \".\" ] ) \"/\" .\nName = an { an } .\n```\n[![Example railroad diagram for given grammar](./images/basic_railroad_diagram.svg)](https://wtf-my-code.works/rr-diagram/?grammar=UGF0aCA9IERpciB7IERpciB9IE5hbWUgLgpEaXIgPSAoIE5hbWUgfCAiLiIgWyAiLiIgXSApICIvIiAuCk5hbWUgPSBhbiB7IGFuIH0gLg).\n\n## Features\n* **Error Information:** In the case that an error occurs during scanning or parsing of the input grammar, a small description is written below the grammar as shown:  \n![Example of message for faulty grammar](./images/faulty_grammar_input.jpg)\n\n* **NTS Expansion:** NTS are displayed as rectangles and can be expanded by clicking them. The definition of the NTS is then displayed in a dashed box as shown:  \n[![Example railroad diagram with expanded NTS](./images/expanded_railroad_diagram.svg)](https://wtf-my-code.works/rr-diagram/?grammar=UGF0aCA9IERpciB7IERpciB9IE5hbWUgLgpEaXIgPSAoIE5hbWUgfCAiLiIgWyAiLiIgXSApICIvIiAuCk5hbWUgPSBhbiB7IGFuIH0gLg\u0026expand=MTItMTEtMTAtMi0xfDEyLTExLTEwLTktOA)\n\n* **URL Encoded Grammar:** Grammar is base64URL encoded into the URL. This allows for easy sharing of the current grammar by copying the URL or bookmarking it. The encoding also includes the list of expanded NTS.  \nThe URL encoding also utilizes GZip via `CompressionStream` to compress the grammar and expand parameter in order to reduce their length. Before `lz-string` was used, which is now being phased out in this project and only loaded on demand.  \n A size comparison was performed on the grammar for [MicroJava](https://www.ssw.jku.at/Misc/CC/Handouts.pdf) with the following results:\n\n|                    |Grammar|URL Encoded|Base64 Encoded|lz-string Compressed Base64|gzip Compressed Base64|\n|--------------------|-------|-----------|--------------|---------------------------|----------------------|\n|Size in Chars       |   1003|       1789|          1340|                        792|                   624|\n|Size rel. to Grammar|   100%|     178,4%|        133,4%|                      78,9%|                 62,2%|\n\nThis only includes the grammar length, not the encoded expands. \n\n* **Selectable Start Symbols:** The start symbol can be selected by either choosing the desired NTS in the dropdown menu or by performing a *CTRL + L-Click* on it in the railroad diagram. By default the declared NTS of the first production is used. The selected start symbol is also encoded in the URL for easy sharing.\n\n* **Compacted 0…n Repetition:**\nIf the repetition only contains of TS, then the content is compacted onto the back-edge and the forward-edge is kept empty. This is shown in the following picture:  \n[![Example railroad diagram with compacted repetition](./images/ts_only_optional_loop.svg)](https://wtf-my-code.works/rr-diagram/?start=Example\u0026grammar=RXhhbXBsZSA9IHsgIiwiIHggfSAu)\n\n* **1…n Repetition detection:** \nThe repetition detection has two versions that are applied\n\t1. *Advanced Repetition Detection* - for e.g. `x { \",\" x }`, which removes the `x` in front of the repetition and converts the repetition to a `ZeroOrMore` repetition. The inner `x` is on the forward edge of the repetition and the `\",\"` being on the backward edge as shown in the following picture:  \n\t[![Example railroad diagram with advanced repetition](./images/advanced_repetition.svg)](https://wtf-my-code.works/rr-diagram/?start=Example\u0026grammar=RXhhbXBsZSA9IHggeyAiLCIgeCB9IC4\u0026expand=MTItMTEtMTAtNi01LTQtM3wxMi0xMS0xMC04)\n\n\t2. *Basic Repetition Detection* - for e.g. `x { x }`, which removes the `x` in front of the repetition and converts the repetition to a `OneOrMore` repetition. The inner `x` is on the forward edge of the repetition as shown in the following picture:  \n\t[![Example railroad diagram with basic repetition](./images/basic_repetition.svg)](https://wtf-my-code.works/rr-diagram/?start=Example\u0026grammar=RXhhbXBsZSA9IHggeyB4IH0gLg)\n\n## TODOs\n* Make UI nicer and a bit more user-friendly. Maybe also add some instructions and a dark mode 🌕\n\n## Installation within another project\nFound on [NpmJs](https://www.npmjs.com/package/ebnf-railroad-visualizer)\n\nThe `ebnf-railroad-visualizer` package can be used by importing the `install(…)` function from the package. The function takes a single argument, which is the `Window` object, that the package will use to install the visualizer.\n\n### Installation\nImport the package and it's dependency like shown below:\n```javascript\nimport { install } from 'ebnf-railroad-visualizer';\nimport * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm'; // Optional, but recommended\n\ninstall(window, d3);\n```\n\nThe generated diagrams require some CSS to be displayed correctly. The CSS can be found in the [railroad.css](./css/railroad.css) file, which has been adapted a bit from the [original file](https://github.com/tabatkins/railroad-diagrams/blob/gh-pages/railroad.css).\n\n### Expected HTML Objects\nThe `install`-method expects the following HTML objects on the page:\n* `error_message` - Container for error messages.\n* `visualized-ebnf` - Container for the diagram.\n* `ebnf_grammar` - Textarea for the EBNF grammar.\n* `.start-symbol-drop-down` - Container for the start symbol dropdown.\n* `start-symbol` - Select for the start symbol.\n\n### Provided Functions and Properties\nIn return, the package provides the following functions on the `window` object:\n* `generateDiagram` - Generate the diagram from the entered grammar\n* `handleGenerateDiagram` - Handle the generation of a diagram from the entered grammar\n* `handleStartSymbolSelection` - Handle the selection of the start symbol\n* `onCollapseAll` - Collapse all NTS (e.g. onClick)\n* `onExpandAll` - Expand all NTS (e.g. onClick)\n* `exportSvg` - Export the diagram as SVG (e.g. onClick)\n* `exportPng` - Export the diagram as PNG (e.g. onClick)\n\nFurthermore, the following properties are attached to the `window` object.\nThese can be set from another location to change the extended NTS or the start symbol.\n* `window.chooChoo.toExtend` - List of NTS to extend\n* `window.chooChoo.startSymbol` - Start symbol\n\n**For further information, please check out the [source code](./src/) and the [index.html](./index.html) file.**\n\n## Included Dependencies / Other Resources\n- [railroad.js](https://github.com/tabatkins/railroad-diagrams) by Tab Atkins Jr. et. al (with some modifications, see comment in the file at line ~16)\n\t- Provided as MIT (according to Github Repository) and CC0 (according to file itself)\n- [lz-string.js](https://github.com/pieroxy/lz-string) by pieroxy |\n\t- Provided as MIT (according to Github Repository) and WTFPL (according to file itself)\n \t- Phasing out (replaced by [CompressionStreams](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API))\n- [D3](https://github.com/d3/d3) by Mike Bostock et. al\n\t- Provided as ISC. **Optional dependency**\n- [github-mark.svg](https://github.com/logos) by GitHub. **Only used on website**\n\n## License\nEBNF Railroad Diagram Visualizer © 2024 by Alexander Voglsperger is licensed under CC BY 4.0. To view a copy of this license, see [LICENSE](./LICENSE) or visit https://creativecommons.org/licenses/by/4.0/.\n\n![CC BY 4.0](./images/cc-by.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrminemeet%2Febnf_railroad_visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrminemeet%2Febnf_railroad_visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrminemeet%2Febnf_railroad_visualizer/lists"}