#DesignNotes: Draw.io — very slick design tool for your cloud hosted applications and infrastructure.
Number of tools are available in the market but this tool stands out for the options it makes available for top three public cloud platforms viz. Amazon Web Services(AWS), Microsoft Azure and Google Cloud Platform(GCP). In this article, I will be discussing how architects and designers can start using Draw.io right away available here as a webapp or you can install it on your workstation. Experience in both the modes is very consistent and same.
Please note that I do not have any commercial association with the company offering this tool. This is article is merely my user experience with this tool for my last 4–5 project designs in the span of last 6–7 months. Always remember this:
"A picture is worth a thousand words"
At the end of this article I have added other options as well which can be evaluated.
Following are main reasons I can think of adopting this tool:
- Cost: The tool was totally free at the time of this writing.
2. Availability: As its browser based it available everywhere, on any device of your choice. I have mostly used this from my surface pro with windows 10 and Chrome or Firefox browsers. You will not be asked to install any special browser plugin , neither you will be required to register with your personal details. The tool will offer very rich capabilities for day to day design and architecture tasks. You can also opt for a desktop version of this tool.
3. Lightweight: Despite being browser hosted application is very light and almost drag free, offers wide range of design options for standard applications and feels like a breeze to draw standard diagrams.
4. Portable Designs: Saving your design is easy, you get number of options to start your design by saving your design files at number of locations like — on your workstation, cloud storage options or in version control system. Once saved you can share files with your peers on collaboration platforms like Teams, Slack or Sharepoint Server. Files are lightweight and are only few kilobytes for most medium to complex designs.
5. Rich Design UX: Draw.io offers simple, neat slick surface to architects and designers. For large and complex systems components can be segregated on separate tabs for clear segregation and representation
6. Design Types: Once design draft document is saved, you can just get started with standard designs like:
- Flowchart
- Business Flows
- UML — Class and Sequence Diagram
- Cloud Architecture for — Azure, AWS and GCP.
- Mobile App Designs
- Business Designs, Value Stream Mappings, etc.
- and my favorite these days — Machine Learning diagrams — yes they even have shapes for ML workloads ;)
- Mindmaps
7. Ready made Templates: Draw.io also offers you some starter designs for common cloud native scenarios which you can extend and get started very quickly, helping in quick response times.
8. Design Versioning: Since the design can be extracted as an XML file, designing on Draw.io offers easier maintenance, open for extension in the future, can be easily version controlled on standard code versioning services like GitHub.com. You will use standard Git commands to push your design artifacts to the design repo. This make it easier for you to keep your design documents live as you can continue to enhance you application landscape sprint after sprint. Hence helping you in avoiding Big Upfront Design approach.
Sharing to stakeholders outside organization is also simple, just export as PDF or share via Google Drive or OneDrive.
Developing Architecture Practice: As an architecture practice lead you may be interested at developing your you teams software and service design knowledge and experience and in those cases Draw.io can help your teams immensely to learn different types of designs without paying hefty license costs. Although, I have listed this option almost at the end but for me this will be one of the biggest factor for looking at this tool.
Following are some of the example design’s I have created for for my technical blogging on the medium platform.
I have created fairly simple to complex design diagrams using Draw.io and I was able to represent them really well. Some of the examples are as follows:
Sketched Mind map:
Very simple example for Azure AI services offerings
On Prem Hosted App:
Azure Hosted Cloud App:
For this example I have hosted above examples in my GitHub subscription and you may want to fork my repo and feel free to extend above diagrams based on your special needs. Link will be shared shortly at this location.
In the end I will say kudos to #Draw.io guys.
Other Options at your disposal are:
- Mermaid Live
- Sparx EA
- Miro.com
- CloudSkew
- Lucidchart
Will elaborate on above options in another blog in future.
