Anish Sachdeva

State Diagram Generator

2020-04-23T18:07:00+00:00

State Diagram Generator

See project on GitHub :octocat: and deployed here 🌐.

This project has been created to display the deterministic finite state automata (DFA) or the Non-Deterministic Finite State Automata (NFA) of any given valid regular expression.

A deterministic automata along with it’s transmission table will be generated for the given regular expression and the user can also check whether any given string is recognized by that particular regular language.

Motivation

The first purpose of building this web application was to show to the user the synonymity of the regular expression, the finite state machine and the transition table and how they can be used to recognize the same language.

The application aims to provide the user with a visual representation for all valid regular expressions in the form of deterministic or nondeterministic automata as this helps the user (even me, the author) - better understand machines and their corresponding regular languages.

This also helps the user understand how to build finite state machines from regular expressions better. The instantaneous state transition diagram tool also shows the states and next states for all possible symbols. The regular expression parser and string checker tool can then be used to check strings against the regular expression and the finite state machine and this text box was added to provide the user with a way to parse and check presence of strings in any given language in linear time.

Another motivation behind this application was to provide a visual interface that clearly shows the difference between the deterministic and non-deterministic finite state automata for the same regular expression (same regular language) and this difference seen visually can help users learn better how different machines with different number of states and different transitions can represent the same language.

Another motivation of building this web application was to provide future developers an interface over the DotScript Language that can be used to create finite state automatas. This web application is open source and can be viewed and extended by other developers. Other developers can build on this application and further extend it by adding features such as support for push-down automata, compiling and lexical parsing directly using the textbox for string checking to compile entire projects in different languages.

Finite Automata

A finite automaton is a 5-tuple (Q, Σ, δ, q, F) where

Q is a finite set called the states
Σ is a finite set called the alphabet.
δ : Q × Σ → Q is the transition function.
q ∈ Q is the start state.
F ⊂ Q are the acceptance states.

Markdown Extra Components

2016-02-24T22:48:00+00:00

Summary:

You can pick as item to see how to apply in markdown.

External Elements

Gist
Codepen
Slideshare
Videos

Evidence

You can try the evidence!

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

<span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span>

Side-by-side

Like the Medium component.

Image on the left and Text on the right:

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="https://anishLearnsToCode.github.io/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Photo by John Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text on the left and Image on the right:

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="https://anishLearnsToCode.github.io/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

Photo by John Doe

Star

You can give evidence to a post. Just add the tag to the markdown file.

star: true

Especial Breaker

You can add a especial hr to your text.

<div class="breaker"></div>

Spoiler

You can add an especial hidden content that appears on hover.

<div class="spoiler"><p>your content</p></div>

Gist

You can add Gists from github.

{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }

Codepen

You can add Pens from Codepen.

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class='codepen'>
    See the Pen <a href='https://codepen.io/chriscoyier/pen/gfdDu/'>Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href='https://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='https://codepen.io'>CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

See the Pen Crappy Recreation of the Book Cover of *The Flame Alphabet* by Chris Coyier (@chriscoyier) on CodePen.

Slideshare

Add your presentations here!

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

Videos

Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!

Example

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen></iframe>

Markdown Common Elements

2016-02-24T22:44:00+00:00

Basic formatting

This note demonstrates some of what Markdown is capable of doing.

And that’s how to do it.

This note **demonstrates** some of what [Markdown][some/link] is *capable of doing*.

Headings

There are six levels of headings. They correspond with the six levels of HTML headings. You’ve probably noticed them already in the page. Each level down uses one more hash character. But we are using just 4 of them.

Headings can be small

# Heading
## Heading
### Heading
#### Heading

Lists

Ordered list

Item 1
A second item
Number 3

1. Item 1
2. A second item
3. Number 3

Unordered list

An item
Another item
Yet another item
And there’s more…

* An item
* Another item
* Yet another item
* And there's more...

Paragraph modifiers

Quote

Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.

> Here is a quote. What this is should be self explanatory.

URLs

URLs can be made in a handful of ways:

A named link to Mark It Down.
Another named link to Mark It Down
Sometimes you just want a URL like https://google.com/.

* A named link to [MarkItDown][3].
* Another named link to [MarkItDown](https://google.com/)
* Sometimes you just want a URL like <https://google.com/>.

Horizontal rule

A horizontal rule is a line that goes across the middle of the page. It’s sometimes handy for breaking things up.

---

Images

Markdown can also contain images. I’ll need to add something here sometime.

![Markdowm Image][/image/url]

Figure Caption?

![Markdowm Image][/image/url]
<figcaption class="caption">Photo by John Doe</figcaption>

Photo by John Doe

Bigger Images?

![Markdowm Image][/image/url]{: class="bigger-image" }

Code

A HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Just a test</h1>
</body>
</html>

A CSS Example:

pre {
    padding: 10px;
    font-size: .8em;
    white-space: pre;
}

pre, table {
    width: 100%;
}

code, pre, tt {
    font-family: Monaco, Consolas, Inconsolata, monospace, sans-serif;
    background: rgba(0,0,0,.05);
}

A JS Example:

// Sticky Header
$(window).scroll(function() {

    if ($(window).scrollTop() > 900 && !$("body").hasClass('show-menu')) {
        $('#hamburguer__open').fadeOut('fast');
    } else if (!$("body").hasClass('show-menu')) {
        $('#hamburguer__open').fadeIn('fast');
    }

});