Tips for Compelling Diagrams With draw.io
@tags:: #lit✍/📰️article/highlights
@links::
@ref:: Tips for Compelling Diagrams With draw.io
@author:: medium.com
=this.file.name
Reference
=this.ref
Notes
Readability and color
Black text color
The first thing I like to do when adding text to a diagram is change the black text from the default hex value of #000000. This color presents various readability issues, including eye strain. (More explanation here.) At least one designer recommends using the hex color #212427, but if you find that too difficult to memorize, you can use a value like #222222 and get close-enough results.
- No location available
-
Line color
Box edges and arrows/lines can also achieve better readability by avoiding the pure black color. After selecting your box shapes and lines, go to the “Text” tab in the right-hand navigation menu and click the color picker next to the “Line” label to enter and apply the hex color #222222 (or similar).
- No location available
-
Lines and arrows
Arrowheads
After adding a line/arrow to your diagram (and keeping the line selected), go to the “Style” tab in the right-hand navigation bar and change the arrowhead style to option #8 from the pull-down menu. Change the “Line end” Size value from 6 to 12. The readability improves dramatically:
- No location available
-
Line curves
There are three line curve styles in Draw.io: Sharp, Rounded and Curved. The Sharp style feels rigid but it does get the point across about what flows are happening between diagram components. If in doubt, stay with the “Sharp” style. To make your diagram’s lines aesthetically pleasing, consider using the “Curved” style.
- No location available
-
Depth of curve
Avoid creating line curves that are dramatic. This will distract from the visual balance of the diagram.
- No location available
-
Line overlaps
If your diagram has a lot of line overlaps, consider the Rounded line type for readability. After selecting a line and setting it to the Rounded type, go to the “Line jumps” option and select the Arc setting.
- No location available
-
In the above diagram the line arc is using the default jump size of 6. This arc size is relatively small and not noticeable by audiences that are in a hurry to understand flows between components. Consider bumping the arc size from 6 to 12:
- No location available
-
“Friendly rectangles”
With diagrams, consider using boxes with rounded corners instead of boxes with square corners.
- No location available
-
Relative size of rounded box edges
After you have placed and arranged rounded boxes on your diagram, take care to make sure the rounded edges are visually balanced between larger and smaller boxes. The width and height of boxes (rounded or not) should also be checked and adjusted accordingly.
- No location available
-
dg-publish: true
created: 2024-07-01
modified: 2024-07-01
title: Tips for Compelling Diagrams With draw.io
source: hypothesis
@tags:: #lit✍/📰️article/highlights
@links::
@ref:: Tips for Compelling Diagrams With draw.io
@author:: medium.com
=this.file.name
Reference
=this.ref
Notes
Readability and color
Black text color
The first thing I like to do when adding text to a diagram is change the black text from the default hex value of #000000. This color presents various readability issues, including eye strain. (More explanation here.) At least one designer recommends using the hex color #212427, but if you find that too difficult to memorize, you can use a value like #222222 and get close-enough results.
- No location available
-
Line color
Box edges and arrows/lines can also achieve better readability by avoiding the pure black color. After selecting your box shapes and lines, go to the “Text” tab in the right-hand navigation menu and click the color picker next to the “Line” label to enter and apply the hex color #222222 (or similar).
- No location available
-
Lines and arrows
Arrowheads
After adding a line/arrow to your diagram (and keeping the line selected), go to the “Style” tab in the right-hand navigation bar and change the arrowhead style to option #8 from the pull-down menu. Change the “Line end” Size value from 6 to 12. The readability improves dramatically:
- No location available
-
Line curves
There are three line curve styles in Draw.io: Sharp, Rounded and Curved. The Sharp style feels rigid but it does get the point across about what flows are happening between diagram components. If in doubt, stay with the “Sharp” style. To make your diagram’s lines aesthetically pleasing, consider using the “Curved” style.
- No location available
-
Depth of curve
Avoid creating line curves that are dramatic. This will distract from the visual balance of the diagram.
- No location available
-
Line overlaps
If your diagram has a lot of line overlaps, consider the Rounded line type for readability. After selecting a line and setting it to the Rounded type, go to the “Line jumps” option and select the Arc setting.
- No location available
-
In the above diagram the line arc is using the default jump size of 6. This arc size is relatively small and not noticeable by audiences that are in a hurry to understand flows between components. Consider bumping the arc size from 6 to 12:
- No location available
-
“Friendly rectangles”
With diagrams, consider using boxes with rounded corners instead of boxes with square corners.
- No location available
-
Relative size of rounded box edges
After you have placed and arranged rounded boxes on your diagram, take care to make sure the rounded edges are visually balanced between larger and smaller boxes. The width and height of boxes (rounded or not) should also be checked and adjusted accordingly.
- No location available
-