removed technical overview

docs/01-motivation.md

@@ -10,21 +10,22 @@ Various approaches were adopted by my peers to address this challenge.
 Some persevered with Structorizer, while others turned to graphic design tools such as [Figma](https://www.figma.com/).
 Some even resorted to hand-drawing diagrams on paper and capturing them with a camera.
 
-In my case, I proactively addressed the challenge by developing a [React](https://react.dev/) [UI component library](https://github.com/Eurydia/project-nassi-shneiderman-diagram-builder) to construct diagrams, initially meant for my personal use. As my proficiency in diagram creation became evident, several of my peers approached me for assistance, highlighting a clear need for a more accessible and user-friendly alternative.
+In my case, I proactively addressed the challenge by developing a [React](https://react.dev/) [UI component library](https://github.com/Eurydia/project-nassi-shneiderman-diagram-builder) to construct diagrams, initially meant for my personal use.
+As my proficiency in diagram creation became evident, several of my peers approached me for assistance, highlighting a clear need for a more accessible and user-friendly alternative.
 
-Recognizing the inefficiency of personally creating diagrams for others on an individual basis, I keenly observed the widespread need for a more accessible and user-friendly alternative.
+Recognizing the inefficiency of personally creating diagrams for others on an individual basis, I observed the widespread need for a more accessible and user-friendly alternative.
 This realization became the driving force behind taking the initiative to create this project.
 
 ## Mission statement
 
 > "MermaidJS for Nassi–Shneiderman diagrams."
 
 [MermaidJS](https://mermaid.js.org/) is a well-established [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript) library in the frontend web development community which excels at dynamically constructing diagrams and charts.
-This project adopts a similar methodology to create Nassi–Shneiderman diagrams from code snippets.
+The project adopts a similar methodology to create Nassi–Shneiderman diagrams from code snippets.
 
 ## Scopes and goals
 
-In addition to the core functionality of diagram creation, the project encompasses several much-needed features:
+In addition to the core functionality of diagram creation, the project encompasses several features:
 
 - **Device Compatibility**: Ensuring seamless functionality across various devices.
 - **Diagram Sharing and Export**: Facilitating the easy sharing and exportation of created diagrams.

docs/02-quick-start.md

@@ -2,23 +2,21 @@
 
 ## Getting started
 
-To embark on your [Nassi–Shneiderman diagramming](https://en.wikipedia.org/wiki/Nassi%E2%80%93Shneiderman_diagram) journey, head over to the live editor at [https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/](https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/).
+To begin, head over to the live editor at [https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/](https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/).
 
 ## Interface overview
 
-The editor presents two fundamental components:
+The editor presents two components:
 
 - **Code Editor**: This is where the magic happens. A piece of code written here will be interpreted and transformed into a diagram.
 - **Live Preview**: The resulting diagrams are displayed here in real-time.
 
 ## Hello World
 
-For those using smaller screens like smartphones or tablets, the code editor might be tucked away initially.
-If you find it hidden, simply tap on the "SHOW CODE" button to reveal it.
+For those using smaller screens like smartphones or tablets, the code editor might be hidden initially.
+If you find it hidden, tap on the "SHOW CODE" button to reveal it.
 
-Now, let's create a simple diagram.
-
-In the code editor, type `Hello World!;`.
+In the code editor, type "Hello World!;."
 The project should generate the corresponding diagram:
 
 <iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=Hello+World%21%3B"></iframe>
@@ -28,9 +26,3 @@ The project should generate the corresponding diagram:
 Once you are satisfied with the diagram, you can use the export feature to save your diagram in three different file formats: PNG, JPEG, and SVG.
 
 Moreover, sharing is made seamless with the ability to generate a unique link for your diagram.
-
-## Advanced syntax
-
-As you grow more comfortable with the basics, delve into advanced features.
-Experiment with different diagram structures; loops, branches, and functions.
-The editor adapts to your coding style, offering a dynamic representation of diverse programming constructs.

docs/03-supported-syntax.md

@@ -1,12 +1,12 @@
 # Supported syntax
 
-The syntax draws inspiration from the [C progamming language](<https://en.wikipedia.org/wiki/C_(programming_language)>) with more flexibility to suit the dynamic nature of our project.
+The syntax draws inspiration from the C-style language with more flexibility to suit our use cases.
 
 The project delivers a comprehensive syntax for various programming constructs, including process blocks, for and while loops, do-while loops, if-else blocks, functions, and comments.
 
-It's worth noting that two structures from the [orignal diagram design](https://www.cs.umd.edu/hcil/members/bshneiderman/nsd/Yoder-Schrag-nassi_schart.pdf) are currently not supported: parallel blocks and switch blocks, the latter being if-else blocks with more than two branches.
+It is worth noting that two structures from the [orignal diagram design](https://www.cs.umd.edu/hcil/members/bshneiderman/nsd/Yoder-Schrag-nassi_schart.pdf) are currently not supported: parallel blocks and switch blocks, the latter being if-else blocks with more than two branches.
 
-> The examples are fully interactive, so do feel free to play around and experiment with them.
+> The examples are fully interactive, as such, do feel free to play around and experiment with them.
 
 ## Process
 
@@ -41,16 +41,16 @@ Both types of loops consist of two components:
 
 ### For loop
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=for+%28Condition%29+%7B%0A++Hello+World%21%3B%0A%7D"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=for+%28Condition%29+%7B%0A++Hello+World%21%3B%0A%7D"></iframe>
 
 Additionally, it's worth noting that a test-first loop can be invoked with either "for" or "while."
 The project generates the same diagram for both variations, making no distinction between the keywords.
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=while+%28Condition%29+%7B%0A+++Hello+World%21%3B%0A%7D"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=while+%28Condition%29+%7B%0A+++Hello+World%21%3B%0A%7D"></iframe>
 
 ### Do-while loop
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=do+%7B%0A+++Hello+World%21%3B%0A%7D+while+%28Condition%29%3B"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=do+%7B%0A+++Hello+World%21%3B%0A%7D+while+%28Condition%29%3B"></iframe>
 
 ## If-else block
 
@@ -63,25 +63,23 @@ If-else blocks consist of two components:
 - **Condition Component**: Enclosed within parentheses, this component comprises elements directly derived from the code, and pasted onto the diagram.
 - **Body Component**: Enclosed within curly braces, this component defines the processes to be performed when the condition is fulfilled.
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=if+%28Condition%29+%7B%0A++Hello+World%21%3B%0A%7D"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=if+%28Condition%29+%7B%0A++Hello+World%21%3B%0A%7D"></iframe>
 
 The "else" keyword is used to access the other branch.
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=if+%28Condition%29+%7B%0A++Hello+World%21%3B%0A%7D+else+%7B%0A++Hello+Space%21%3B%0A%7D"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=if+%28Condition%29+%7B%0A++Hello+World%21%3B%0A%7D+else+%7B%0A++Hello+Space%21%3B%0A%7D"></iframe>
 
 ## Function
 
 > "Functions encapsulate specific sets of processes.
 > They promote clarity and reusability."
 
-Functions and procedures within the project are characterized by four essential components:
+Functions and procedures within the project are characterized by two components:
 
-- **Return Type Element**: The first element denotes the return type, a mandatory specification even for procedures.
-- **Name Element**: The second element designates the name of the function or procedure.
-- **Parameter Component**: Enclosed within parentheses, this component comprises elements directly derived from the code, faithfully pasted onto the diagram.
+- **Declaration Components**: From the beginning of the statement up to the opening curly braces, this component comprises elements directly derived from the code, and pasted onto the diagram.
 - **Body Component**: Enclosed within curly braces, this component encapsulates the procedural elements of the function or procedure, defining the processes to be executed.
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=Return_type+Name%28Parameters%29+%7B%0A+Hello+World%21%3B%0A%7D"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=Return_type+Name%28Parameters%29+%7B%0A+Hello+World%21%3B%0A%7D"></iframe>
 
 ## Comment
 
@@ -90,4 +88,46 @@ Comments within the project are invoked with two forward slashes. When a line is
 Importantly, comments are preserved when a diagram is shared through a link.
 This ensures that the explanatory remarks remain intact, contributing to the collaborative and communicative nature of the shared diagrams.
 
-<iframe width="100%" style="aspect-ratio: 16/9; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=%2F%2F+The+three+hardest+things+for+people+to+say%3A%0A%2F%2F+I+was+wrong%0A%2F%2F+I+need+help%0A%2F%2F+W-worches%2C+w-wirhest%2C+wooster-shire+sauce%0A%0AI+have+a+hidden+message%3B%0A%0A"></iframe>
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=%2F%2F+The+three+hardest+things+for+people+to+say%3A%0A%2F%2F+I+was+wrong%0A%2F%2F+I+need+help%0A%2F%2F+W-worches%2C+w-wirhest%2C+wooster-shire+sauce%0A%0AI+have+a+hidden+message%3B%0A%0A"></iframe>
+
+## Context-free grammar
+
+Note that:
+
+- a star `*` means zero or more repetitions of the preceding element.
+- a plus `+` means one or more repetitions of the preceding element.
+- a verticle bar `|` means only one of the elements can be present.
+- element enclosed by square brackets `[]` is optional.
+- characters enclosed by single quotes `'` is a literal.
+
+```bnf
+<diagram> ::= <statement>+
+
+<statement> ::= <token>* ';'
+            |   <for-statement>
+            |   <while-statement>
+            |   <do-while-statement>
+            |   <if-statement>
+            |   <function>
+
+<for-statement> ::= 'for' '(' <token>* ')' '{' <statement>* '}'
+
+<while-statement> ::= 'while' '(' <token>* ')' '{' <statement>* '}'
+
+<do-while-statement> ::= 'do' '{' <statement>* '}' 'while' '(' <token>* ')' ';'
+
+<if-statement> ::= 'if' '(' <token>* ')' '{' <statement>* '}' ['else' '{'<statement>* '}']
+
+<function> ::= <non-keyword-token>+ <token>* '{' <statement>* '}'
+
+<keyword-token> ::= 'for'
+                |   'while'
+                |   'do'
+                |   'if'
+
+<token> ::= <any-character>+
+
+<any-character> ::= <letter>
+                |   <digits>
+                |   <non-whitespace-character>
+```