diff --git a/README.md b/README.md index c8851c4..e4c31ba 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Installing only a javascript library and with four lines of code. ## Table of contents - [Features](#features) +- [Getting Started for Beginners] - [Installation](#installation) - [Running](#running) - [Mouse and Keys](#mouse-and-keys) @@ -56,6 +57,60 @@ Installing only a javascript library and with four lines of code. - NPM - Vue Support component nodes && Nuxt +## Getting Started for Beginners +1. Download or clone the repository. + Copy and paste this link in the terminal. + ``git clone https://github.com/jerosoler/Drawflow.git`` + +3. Use the terminal to enter into the Drawflow folder (run all the following commands in the Drawflow folder). + ``cd Drawflow`` + +4. Install necessary dependencies. + ``npm run install`` + +5. Build the project. + ``npm run build`` + +6. Start the development server. + ``npm run dev`` + +7. Open the project in your browser. + It might automatically open, or you can manually navigate to ``http://localhost:8080`` in your browser of choice. + + The code that is displayed is in *index.html*. + +8. Explore Drawflow by dragging the elements on the left bar to the main working area. Drag one circle to another to create connection lines. + +9. To start with a blank diagram, you can replace the code in index.html with: +``` + + + + + + Drawflow Example + + + + +
+ + + + +``` +See the documentation below for more options on how to add/remove Nodes, customize options, add connections, and more. + ## Installation Download or clone repository and copy the dist folder, CDN option Or npm. #### Clone