====== Draw.io ======
===== Introduction =====
Draw.io is a free tool to support creation of various diagrams and figures. It supports collaboration and integrates well with Google Docs and other technologies. You can find more information about it [[https://support.draw.io/blog/DOB|here]].

===== Motivation =====
The main motivations and goals behind using draw.io are following:
  * Express ideas, concepts, designs, processes or anything in a graphical representation
    * A figure is very good mean to communicate or document a thing
    * It makes the documentation more readable and understandable to it's readers
    * It makes the creation of concept, design or architecture easier for the creator
  * Make collaboration easy
    * Creating new diagram/figure
    * Sharing the diagram with others
    * Embedding the diagram in documents
  * Unify on one tool to create diagrams 

===== Installation and Tooling =====

The draw.io can be added to Google Drive using [[https://support.draw.io/pages/viewpage.action?pageId=1310814|these instructions]].

===== Example =====

The figure below depicts a basic diagram created using draw.io. It was exported using File -> Export as -> PNG and included to this wiki.

{{:toolsandtechnologies:screen_shot_2017-02-21_at_16.04.43.png?1280|}}

===== Tips for creating diagrams =====
//These are just general recommendations how to create diagrams. Nothing is set in stone, but the diagrams should be easy to understand generally. More tips might come in future//

  * Try to make the diagram simple and easy to understand
  * Diagram should generally cover one level of abstraction
    * For complex topics do one high-level diagrams and then more diagrams for particular parts of the high-level one (this is common for architecture)
  * Arrows should have the same semantics in one diagram (use different line style to distinguish different semantics or add a description to the line)
  * Color the shapes to differentiate between e.g. more/less important things or different types of things

===== Sharing =====
The diagrams can be shared using the same way as for other Google Docs.

===== Embedding/Exporting =====
The diagram can be exported to various format using the //File -> Export as// Menu.
The diagram can be also embedded to a Google Doc using the draw.io add-on for Google Docs (needs to be installed first).
{{:toolsandtechnologies:screen_shot_2017-02-21_at_16.31.29.png?1280|}}