It's nice how the diagram is remembered even when I navigate away from the page and back. However, the downside of this is that whenever I want to start a new diagram, the only way to do it seems to be manually deleting each element.

I really thing that this is an amazing project, mostly because it is embedded in the browser and thus it can possibly be used from everywhere, and for its simplicity, apart from the fact that there seem to be some bugs, at least when used directly from the server, but not locally. It seems however that you are not providing the deserved support to it.

I really would like to contribute with more functionalities, but first it would be nice to have a documentation which allow us to understand more or less the structure of your code, etc, even if the amount of code is still relatively small.

It is already possible to store and later load back in a diagram by manipulating the data stored in the browser's local storage. However, doing it through the interface would make it easier.

I would like to suggest adding an export function for JSON (practically dumping the local storage data to a file), in combination with an import function (simply loading this data from a file back into local storage).

If you need any more info please comment

It would be cool to be able to change the size of the circles :)

I have a few suggestions:

1. We could use the tikz library automata, and then instead of \draw, we use \node and \path, which will yield much cleaner latex, and more importantly, more easily customisable.
2. I suggest we add an option to resize the nodes. I tried a few things on the exported latex but nothing worked. But it is much easier with the automata library.

Would it be permissable to use the code of the fsm in my bachelor's thesis? I aim to recognize handdraw finite automatons and then convert them to some object notation but it would also be great to display the recognized automaton.

Of course I will implement a visualization myself if it is not possible but it would be a nice hommage to my studies since we used your fsm in almost every semester for modeling all kinds of transition systems.

Thank you very much.

It appears that the code running at madebyevan.com/fsm is more current than this repository. Has the FSM code been relocated to a different repository? Has the licensing changed?

Because I had trouble re-finding the site when I wanted to give the
link to my students for their assignment.

<meta name="keywords" content="DFA,NFA,FSM,Finite Automata,Deterministic Finite Automata,Nondeterministic Finite Automata">

I tried to do a pull request but it wouldn't let me (note haven't contributed to a git project that I don't have full access to before).

Let's say there are two states, q0 and q1. If I have a transition arrow from q0 -> q1 and I also want a transition arrow from q1 -> q0, the transition arrows overlap each other and it is unclear which transition goes with which input. It would be nice if the one of the arrows curved or something.

Any text including $, _ will not be escaped when exporting as LaTeX.

Probably easy fix in latex.js

When trying to export a drawing in Chrome the page doesn't load and the console says "Not allowed to navigate top frame to data URL".

Steps to reproduce: click the Export as PNG option.

Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)

Downloaded the FSM Designer today from the repository and tried to run it from the local box. The FSM Designer comes up and the canvas displays but nothing else happens. Double-clicking does not add a state, etc. Tried it with IE, Edge, Chrome, FireFox.

I'm hoping to extend fsm into a more general graph web application.
I certainly will cite you and your work.

Any changes/additions that I make I plan to release under the Peer Production License:
https://wiki.p2pfoundation.net/Peer_Production_License

The general idea is to enable the math department at my University (and beyond) to have a simple interface for diagramming graphs and to be able to perform computer-assisted analysis upon same.

Please advise as to your permission, as I was unable to determine existing licensing.

Press a button to clear the current FSM, since it's tedious to delete every element individually.

The instructions outlined: "Delete something: click it and press the delete key (not the backspace key)". There's isn't a delete button on mac, just backspace. Can ya add another delete command too (b/c it sometimes doesn't work, even when one presses the function (fn) and backspace key at the same time on mac)?

I'm currently trying to design a Moore FSM with your tool, but it is not very easy to add the output in the state circle. Maybe having the option to add it would be nice? I might get around sending a PR if that is an addition that makes sense to you.

Thanks for the tool!

Adding & in text does not escape it when producing Latex output.

I had to discover on my mac laptop that delete is fn + backspace, and confusingly backspace is labeled "delete"

Helo.
I've just discoverd your great old project.

There is something missing which is the possibility to indicate initial states. This states are traditionnaly indicated by using an arrow starting nowhere and pointing to the state, but you can add the possibilty to have square state (this should be easy to code) : one click --> double cricle, one more click --> square.

Thanks for all !

if there are two states and a transition from either one to the other, the arrows overlap each other

e.g. by using ctrl+z

You have on the page to use the actual Delete not Backspace to remove items. On some keyboards such as my Macbook pro, there isn't one. I'm opening an issue to suggest adding there for Macs to use "FN+Backspace" (It's actually named delete on my keyboard but it's just a backspace.)

I thought we can preserve the information of a FSM to import later by using a simple format like aut, explained here. The import would be trickier than the export, but not hard at all. For the export, I wrote the following function:

function saveAsAUT() {
  var autData = '';
    autData += 'des (0,'+ links.length +','+ nodes.length +')\n';
    for(var i = 0; i < links.length; i++) {
      autData += '('+ links[i].nodeA.text +','+ links[i].text +','+ links[i].nodeB.text +')\n';
    }
  output(autData);
}