docs: added table of contents and introduction document for Studio tool

docs/README.md

@@ -0,0 +1,5 @@
+Table of contents
+
+- [Introduction](introduction.md)
+- [Navigation](navigation.md)
+- [Studio Settings](settings.md)

docs/introduction.md

@@ -0,0 +1,29 @@
+Studio is a tool to develop AsyncAPI documentation. 
+
+Using Studio you can develop an AsyncAPI document, visualize the flow of events, preview, validate, and convert the document to the latest version in one place.
+
+You can use it to view the events, publishers, subscribers, messages, payload as you design your API.
+
+# Studio Use Cases
+
+- Create and visualize event-driven AsyncAPI on the go.
+- Realtime visualization and documentation for your APIs.
+
+
+# Studio Advantages 
+- User-friendly.
+- Visualizing events flow.
+- Interactive AsyncAPI documentation.
+- Straightforward and effortless in building APIs.
+
+
+# Usage
+
+To start using Studio, make sure you have an AsyncAPI file for your API. 
+<Remember>
+
+If you do not have an `asyncapi.yaml` file ready, then generate one by running: 
+`asyncapi new --example=tutorial.yml --no-tty`.
+
+</Remember>
+Use the `Block visualizer` button to toggle the Event Visualizer window from the navigation panel. You will find the navigation panel to the extreme left your screen. 

docs/navigation.md

@@ -0,0 +1,122 @@
+# Navigation panel
+
+This guide will walk you through the functions of each button in navigation panel. 
+
+# Navigation Button
+
+The first button in the navigation panel is the Navigation button. It is one of the default active buttons.
+
+Navigation button is divided into four parts. It provides the following information:
+
+- Servers
+- Operations
+- Messages
+- Schemas
+
+## Servers
+
+The Servers section displays the name and information of the server you are using to build your AsyncAPI.
+
+## Operations
+
+The Operations section lists all the operations that are a part of the AsyncAPI. It adds the perfix `PUB`  for publisher and `SUB` for subscriber to differentiate between both the operations.
+
+## Messages
+
+This Messages section displays the title of each message used to communicate to the API.
+
+## Schemas
+
+The Schemas displays the title of the schemas defined.
+
+
+# Editor
+
+The Editor section is where you edit the AsyncAPI code. As you edit, you will see the changes reflect dynamically in the HTML preview and Block Visualizer section.
+
+Click on the individual elements of the Navigation button to jump to those sections in HTML preview and Block Visualizer section.
+
+## Diagnostics Window
+
+The Editor also has resizeable Diagnostics window. It shows a quick count of number of errors (in red) and warnings (in yellow) by its title. The description of the warnings and errors with line number is displayed in a table.
+
+To the right side of the title bar there are three indicators of the Diagnostics window: 
+
+- Valid/Invalid - It is green if the syntax is green and red when invalid.
+- Autosave - It shows whether Autosave is on or off.
+- Type - Shows the language in which the API is written: `JSON` or `YAML`.
+
+Bwlow the title bar there is a control panel. You can the buttons to:
+
+- Hide and show erros
+- Hide and show warnings
+- Hide and show information messages
+- Hide and show hints
+
+There is also search bar to search that aids in finding issues by their names. You will see Settings icon to the right. It will take you to the governance of Diagnostic window.
+
+# HTML Preview
+
+This section displays the preview of everything you have written in the code editor. It uses different fonts, colors, and styles for readability. Each section has a different card. 
+
+It starts with displaying the title, version, description of the API. It renders the formatting too. You can expand each element too see the `key: value` pair of each element, type, payload, and message.
+
+
+# Blocks visualizer
+
+Blocks visualizer is the USP of this product. It gives you a quick overview of your API. Unlike HTML preview, Blocks visualizer gives a diagrammatic visual of your API. 
+
+Title card is at the top-left corner of the Block visualizer window. Followed by the Operations card.  You can visualize channels, published messages, payload, type,  patterns, and relationship between the components.
+
+The Blocks visualizer has two set of controls:
+
+- In the top right corner of the window you will find the play and reset button. Play to view live relationship between the components and its flow. Reset to get back to the default view.
+
+- To bottom left of the window there are four controls: zoom in, zoom out, full-screen, toogle interactivity. You zoom the cards in and out or view them in full-screen mode. To prevent the cards from shifting use the toggle interactivity control.
+
+
+# New File
+
+To create a new file you can pick one of the available templates.
+
+## Templates
+
+There are 5 available to quick start Studio. 
+
+- _Simple Example - A basic example of a service that is in charge of processing user signups. Great place to start learning AsyncAPI.
+
+- Apache Kafka - A framework implementation of a software bus using stream-processing. Open Source developed by the Apache Software Foundation.
+
+- WebSocket - A framework implementation of a software bus using stream-processing. Open Source developed by the Apache Software Foundation.
+
+- MQTT - A protocol for fetching resources. It is the foundation of any data exchange on the Web and it is a client-server protocol.
+
+- HTTP - A protocol for fetching resources. It is the foundation of any data exchange on the Web and it is a client-server protocol.
+
+## Real World Examples
+
+Studio provides two real world examples templates to help you get started.
+
+- Slack Real Time Messaging API - Slack Real time messaging API. Using HTTP protocol.
+
+- Gitter Streaming API - Gitter Streaming API from https://stream.gitter.im. Using HTTP protocol.
+
+## Tutorials
+
+Studio also provides you with a template of an invalid AsyncAPI document. The purpose of this tutorial is to educate, and learn document validation.
+
+[You can request to add a template](https://github.com/asyncapi/studio/issues/new?assignees=&labels=enhancement&template=enhancement.md&title=Template%20Request:%20{%20template%20name%20and%20type%20}) to the list if you don't find what you are looking for.
+
+
+
+
+
+
+
+
+
+
+
+
+
+