Drawio- a VS extension for visual coders.
After finding out that “awwapp.com” was transitioning to “miro” I felt a bit sad since “awwapp” was great. This website was first introduced to me at my coding boot-camp by my instructor Greg (thanks Greg!). This site made creating/drawing mock-ups and relationships databases very easy. However, after doing some digging and looking around I came across a great VS extension that does a very similar job, it’s called “Draw.io integration.”
Installation
In your “Visual Studio Code” go to the extension section and search for “Draw.io integration.” Once you find it, click install. You are now on your way to do some great tables and mock-ups!
Once installed, all you need to do is create a new file and name it but, make sure that after you give it name make sure you add “.drawio” after the name.
After the file has been created and properly named, you have yourself a whiteboard app(or blackboard) that is user-friendly and makes drawing/sketching easy. This extension will help so much whenever you want to visualize how your tables or web-apps are going to look.
As you can see the user interface is very clean and simple to use; you have a toolbar on your left, a detailed tab on your right, an app menu at the top, and an “add page” at the bottom.
Here, you can pick whatever you want to draw or use, and as you can see they have many options. From arrows to tables, they pretty much have most of the things you need when creating mock-ups!
Below are some examples of the things you can do and everything here is editable, you can add text and make things bigger or smaller. Not only that, but you can also import your own images/icons!
They also have built-in relationship tables which are also editable, so you can expand them by linking two or three tables together, you can also add arrows and link to other figures or images.
Finally, after you have created many beautiful mock-ups you can save it and even export it. This way you can send it to a friend/coworker that is working on the same project, making collaboration super easy and simple!
