1,090
edits
Changes
Jump to navigation
Jump to search
mLine 22:
Line 22: − + Line 31:
Line 31: − + − + − 1. Open terminal by clicking "Applications->System Tools->Terminal" or through keyboard shortcut "Ctrl+Alt+T".+ + + + − 2. In the terminal window, type below command and press enter key.+ − sudo snap install drawio+ + + − 3. Enter your Administrator password to install and press "Enter".+ − + − − If you are using Windows OS, [https://github.com/jgraph/drawio-desktop/releases/tag/v20.2.8 click here] Download the "Windows Installer" file Click on the downloaded Installer file A Window appears and asks to choose the Destination folder to install the "Application --> Choose the Destination --> Click Install" Tick the option "Run Draw.io" if you want to run the application and click "Finish". − − − Line 61:
Line 61: − + − + − + Line 82:
Line 82: − + + + + + + + + − Depending on your requirement you can insert shape to the workspace. − − * To insert a shape, you can type the shape name in the "Search Shapes" box or click on the appropriate tab if you are sure of. <br> − * There are General, Basic, Arrows, Entity Relations and many other tabs that allows you to drop the respective shapes to the workspace. − + − If you could not find the proper shape for your diagram then you can search and locate those as well. + Line 103:
Line 106: − + − If you want to draw something in a freehand you can do so in Draw. To do this, Click on "+" icon in the toolbar and choose "Freehand" option. Alternatively you can press 'x' on the keyboard as shortcut. You can choose the size of the brush and can freely move the cursor on the sheet.+ − + − File:Addingimage1.jpg|Adding the Image − + − + + + + Line 132:
Line 137: + Line 143:
Line 149: − ====Advanced features====+ + + − # Explore Swim lane diagrams to use it for official purposes. Swim lane usually shows the responsibility or works needs to be done for each step or a process. This is in-built feature in Draw.io. + − − # Templates are ready-to-use syntax that can be inserted into a diagram for more convenience. − − ====Ideas for resource creation==== − ====References====+ Line 159:
Line 163: + +
Learn Diagrams (Draw.io) (view source)
Revision as of 10:33, 19 October 2022
, 10:33, 19 October 2022added Category:Explore an application using HotCat
|The application on mobiles and tablets
|The application on mobiles and tablets
|You can install [https://play.google.com/store/apps/details?id=com.lucidchart.android.chart&hl=en_IN&gl=US Lucidchart]
|You can install [https://play.google.com/store/apps/details?id=com.lucidchart.android.chart&hl=en_IN&gl=US Lucidchart]
You can also use the web based platform of Draw.io here [https://app.diagrams.net]
You can also use the web based platform of Draw.io [https://app.diagrams.net here]
|-
|-
|Development and community help
|Development and community help
Draw.io can be used to generate variety of diagrams or in a better term called as "charts", that may represent any form data. With Draw.io you can drag and drop variety of symbols, shapes, flowchart icons, Entity relations, UML diagrams in the canvas. There is a huge collection of other symbols that are helpful in implementing the required diagrams. It also focuses on arrangement of symbols, spelling checking, It contains a ready-to-apply set of styles making the entire diagrams more attractive and readable.
Draw.io can be used to generate variety of diagrams or in a better term called as "charts", that may represent any form data. With Draw.io you can drag and drop variety of symbols, shapes, flowchart icons, Entity relations, UML diagrams in the canvas. There is a huge collection of other symbols that are helpful in implementing the required diagrams. It also focuses on arrangement of symbols, spelling checking, It contains a ready-to-apply set of styles making the entire diagrams more attractive and readable.
==Installation==
====Installation====
====For Ubuntu OS====
=====For Ubuntu OS=====
If you want to install Draw.io in your Ubuntu OS, follow the below steps:
If you want to install Draw.io in your Ubuntu OS, follow the below steps:
# Open terminal by clicking "Applications->System Tools->Terminal" or through keyboard shortcut "Ctrl+Alt+T".
# In the terminal window, type below command and press enter key.
#* <code> sudo snap install drawio </code>
# Enter your Administrator password to install and press "Enter".
=====For Windows OS=====
# If you are using Windows OS, [https://github.com/jgraph/drawio-desktop/releases/tag/v20.2.8 click here] to download the "Windows Installer" file.
# Click on the downloaded Installer file. A Window appears and asks to choose the Destination folder to install the application.
# Choose the Destination --> Click "Install". Check the option "Run Draw.io" if you want to run the application and click "Finish".
=====For MAC OS=====
If you using MAC OS, [https://github.com/jgraph/drawio-desktop/releases/download/v20.2.8/draw.io-universal-20.2.8.dmg Click here]. This link downloads the .dmg file into your system, double click on the downloaded .dmg file. This will install the application on your system.
====For Windows OS====
====For MAC OS====
If you using MAC OS, [https://github.com/jgraph/drawio-desktop/releases/download/v20.2.8/draw.io-universal-20.2.8.dmg Click here]. This link downloads the .dmg file into your system, click on the downloaded .dmg file.
===Working with the application===
===Working with the application===
====Creating new diagram====
====Creating new diagram====
If you already have an idea of what needs to be done and what ways the things needs to be done then based on your requirement you can choose the template. The templates provided here not only gives you the structure of diagram but also gives you more idea of how your final outcome may look like. If you are not having an idea of how your diagram should look like then it would be better to choose "Blank Diagram-->Create".
If you already have an idea of what needs to be done and what ways the things needs to be done then based on your requirement you can choose the template. The templates provided here not only gives you the structure of diagram but also gives more idea of how your final outcome may look like. If you are not having an idea of how your diagram should look like then it would be better to choose "Blank Diagram-->Create".
====Important elements in the application====
====Basic interface of application====
<gallery mode="packed" heights=400>
The interface of Drawio looks like the below image:<gallery mode="packed" heights="400">
File:Drawio interface.png|Diagram interface
File:Drawio interface.png|Diagram interface
</gallery>
</gallery>
====Adding a Shape to the workspace====
====Adding a Shape to the workspace====
<gallery mode="packed" heights=300>
Usually shapes in a particular context gives respective meaning. In a flowchart, oval represents the beginning or end of a process whereas in use case diagram it represents a process. Therefore be sure of which diagram you want to use in your case.
Depending on your requirement you can insert shape to the workspace.
* To insert a shape, you can type the shape name in the "Search Shapes" box or click on the appropriate tab if you are sure of.
* There are General, Basic, Arrows, Entity Relations and many other tabs that allows you to drop the respective shapes to the workspace.
<gallery mode="packed" heights=250>
File:Dragging shapes.jpg|Dragging the shapes
File:Dragging shapes.jpg|Dragging the shapes
File:Adding text to Shapes.jpg|Writing text inside a shape
File:Adding text to Shapes.jpg|Writing text inside a shape
</gallery>
</gallery>
* If you simply click on a shape, it will be put into the workspace where you can expand or shrink the size of the shape by simply dragging the points. Whenever it shows "Hand" when the cursor is highlighted on the shape, you can simply drag and drop the shape wherever required. * If you want to type text inside any shapes double click inside the shape. When you choose a particular shape, the properties related to that shape will appear in the Format Panel window. Color, border thickness, style for the shape such as Shadow, Sketch can be set here.
* If you simply click on a shape, it will be put into the workspace where you can expand or shrink the size of the shape by simply dragging the points. Whenever it shows "Hand" when the cursor is highlighted on the shape, you can simply drag and drop the shape wherever required. * If you want to type text inside any shapes double click inside the shape. When you choose a particular shape, the properties related to that shape will appear in the Format Panel window. Color, border thickness, style for the shape such as Shadow, Sketch can be set here.
* If you have entered some text inside the text, Format Panel shows you Font related settings where you can format the font. "Arrange" tab shows you how you can arrange or placements related to that shape in your workspace.
* If you have entered some text inside the text, Format Panel shows you Font related settings where you can format the font. "Arrange" tab shows you how you can arrange or placements related to that shape in your workspace.
====Adding more Shapes====
====Adding more Shapes====
Even though most of the shapes are available on the shape panel if you could not find the proper shape for your diagram then you can search and locate those as well.
<gallery mode="packed" heights=300>
<gallery mode="packed" heights=300>
File:Searchingforshapes.jpg|Adding more shapes to Shapes toolbox
File:Searchingforshapes.jpg|Adding more shapes to Shapes toolbox
====Freehand Drawing====
====Freehand Drawing====
<gallery mode="packed" heights=300>
In Draw, other than shapes you can also freely draw something by using the Freehand feature. Freehand feature may look like the below image:<gallery mode="packed" heights="300">
File:UsingFreehandtool.jpg|Using Freehand option
File:UsingFreehandtool.jpg|Using Freehand option
</gallery>
</gallery>
To do this, Click on "+" icon in the toolbar and choose "Freehand" option. Alternatively you can press 'x' on the keyboard as shortcut. You can choose the size of the brush and can freely move the cursor on the sheet.
====Adding Notes and Images====
====Adding Notes and Images====
<gallery mode="packed" heights=300>
A note can be added near any node in draw. Note may give additional information regarding the node. <gallery mode="packed" heights="300">
File:Adding notes.jpg|Notes added to the diagrams
File:Adding notes.jpg|Notes added to the diagrams
</gallery>
</gallery>
Note can be added in the worksheet to give a description to the node. Note can be resized according to your requirement. Once you add the note to the workspace you can move it wherever required.
Note can be added in the worksheet to give a description to the node.
<gallery mode="packed" heights=300>
Note can be resized according to your requirement. Once you add the note to the workspace you can move it wherever required.
<gallery mode="packed" heights="300">
File:Addingimage1.jpg|Adding the Image
File:Addingimage3.jpg|Image added to the diagram
File:Addingimage3.jpg|Image added to the diagram
</gallery>
</gallery>
====Selecting the paper size====
====Selecting the paper size====
Paper size play important role if you are expecting it be on a paper as printout.
* If your plan is to print the chart on a paper and use it for some purpose then better if you select the page size at the starting. There is an option in the diagram panel to change the default Paper size.
* If your plan is to print the chart on a paper and use it for some purpose then better if you select the page size at the starting. There is an option in the diagram panel to change the default Paper size.
* Click on the drop down menu present in Page size. You will get number of options that you can select for your requirement.
* Click on the drop down menu present in Page size. You will get number of options that you can select for your requirement.
* You can also export your diagrams into pdf, png, jpg, svg and other formats. You can do this by clicking on File--> Export As option. This shows a list of file extensions with which you can save your work.
* You can also export your diagrams into pdf, png, jpg, svg and other formats. You can do this by clicking on File--> Export As option. This shows a list of file extensions with which you can save your work.
===Advanced features===
# Shape library is a huge collection of shapes that are having specific way of representing the data.
# Shape library is a huge collection of shapes that are having specific way of representing the data.
# Explore Swim lane diagrams to use it for official purposes. Swim lane usually shows the responsibility or works needs to be done for each step or a process. This is in-built feature in Draw.io.
# Templates are ready-to-use syntax that can be inserted into a diagram for more convenience.
===Ideas for resource creation===
* With Draw.io you can create any kind of tables, charts, diagrams that takes less time and more specific to your requirement.
* With Draw.io you can create any kind of tables, charts, diagrams that takes less time and more specific to your requirement.
===References===
[https://en.wikipedia.org/wiki/Diagrams.net Wikipedia]
[https://en.wikipedia.org/wiki/Diagrams.net Wikipedia]
[https://app.diagrams.net/ Draw.io]
[https://app.diagrams.net/ Draw.io]
[[Category:Explore an application]]