joeylemon / nfa-to-dfa

a visual NFA to DFA converter

Visual NFA to DFA Converter

https://joeylemon.github.io/nfa-to-dfa/

Overview

This tool is used to convert non-deterministic finite automata (NFA) to deterministic finite automata (DFA) through an interactive and visual interface. More specifically, you can:

• Create an NFA interactively or from a saved JSON file
• Export an NFA to a JSON file
• View the description of both the NFA and the DFA, including a full delta transition table
• Convert the NFA to an equivalent DFA in three possible ways:
  • Step-by-step: the DFA is constructed in controlled increments
  • All at once: completely convert the NFA to the DFA in one leap
  • Animated: watch the conversion process take place automatically

Technology

Originally created by Alex Klibisz and Connor Minton, COSC 312, Spring 2015, University of Tennessee, Knoxville.

Rewritten and enhanced by Joey Lemon and Camille Williford, COSC 493, Fall 2021, University of Tennessee, Knoxville.

Contributing

Prerequisites

You must have Node.js v12.19.0+ and npm installed to run the application locally. Node versions below v12.19.0 are unable to run the unit tests.

Running Application

To set up the application locally, first clone this repository:

> git clone https://github.com/joeylemon/nfa-to-dfa.git

Then, install the dependencies:

> cd nfa-to-dfa
> npm install

Then, simply run the start script to create a local webserver:

> npm start

Running this script should give an output similar to below:

> [email protected] start ~/Desktop/nfa-to-dfa
> browser-sync start -s -f . --no-notify --host localhost --port 8000

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:8000
    External: http://192.168.1.127:8000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

You can now navigate to http://localhost:8000 in the browser to view the application. The website will automatically reload upon changes to the code.

Linting

Prior to adding changes to the repository, you should run the linter on the code to ensure there are no syntax errors and to maintain a uniform coding style:

> npm run lint

To automatically lint files before committing them, you should add a pre-commit hook. Copy the pre-commit.sample file to .git/hooks/pre-commit:

> cp pre-commit.sample .git/hooks/pre-commit

Now, git will automatically lint all changed files before committing them to the repository.

Testing

You should also test your changes before committing them to the repository:

> npm test

This will run all unit tests in the src/js/test directory and report any errors.

nfa-to-dfa's Issues

About the Import file

Also one more thing. I can see at the index.js file that you have a querySelector about the import button. You are saving what the file has in a variable named “contents”. I can understand that the file has a specific type and format. Where do you define both of them?
I am trying to understand how we are going from the information of file (reading and analysing the information of the file) to the illustration of the NFA.
Thank you very much in advance!

How you add the ε from the keyboard

I like this tool however I cannot find a way to add the epsylon ε when adding a new transition. Can you help?

Cannot see entire NFA output

do input from the table below

let user do input from table. i think it wil be really useful and fast to make the nfa by typing the state, transition, start, accept state, symbol from the table. First input the state name, then transition name, then select the start state from the list of state(using select or radio), then input the accept state from list of state. after that input the state transition direction in the table.

sorry if you confused with what i wrote here, i can't put words together well. you can ask for more detail. thank you

Object "transitions"

Hello, i wnat ask this:
I can only see that is the fa.js file in the constructor you have written in the comments that transitions is an object, but where do you define the properties of this object and where do you define what the form of the transition look like (for example [starting stete][symbol]=>[final states])?

Τhank you very much in advance.

Recursive / Multiple epsilon transitions can result in incorrect DFAs

While tinkering with the program, I noticed that an NFA representing the regex string a*b*c* is not transcribed correctly.

Specifically, the program does not recursively check what states can be reached by epsilon transitions; in this case, 1,2,3 should be reachable, but the program believes that 1,2 is correct:

This not only results in redundant states, but also means the resulting DFA can be incorrect. In this case, the DFA rejects the string ccccc, even though it is valid according to the original regex rule.

It seems the error stems from the lack of recursion in the epsilon closure function.

How to zoom in and out in respective NFA and DFA viewport

Cannot see entire final DFA visual

I input my NFA but when it completes the DFA, the visual is off the screen and I cannot see the entire output. My NFA has 8 states.