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

Book cover of "Tips for Compelling Diagrams With draw.io"

Reference

Notes

Readability and color

Black text color

Quote

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

Quote

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

Quote

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

Quote

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

Quote

Avoid creating line curves that are dramatic. This will distract from the visual balance of the diagram.
- No location available
-

Line overlaps

Quote

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
-

Quote

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”

Quote

With diagrams, consider using boxes with rounded corners instead of boxes with square corners.
- No location available
-

Relative size of rounded box edges

Quote

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
-


@tags:: #lit✍/📰️article/highlights
@links::
@ref:: Tips for Compelling Diagrams With draw.io
@author:: medium.com

=this.file.name

Book cover of "Tips for Compelling Diagrams With draw.io"

Reference

Notes

Readability and color

Black text color

Quote

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

Quote

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

Quote

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

Quote

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

Quote

Avoid creating line curves that are dramatic. This will distract from the visual balance of the diagram.
- No location available
-

Line overlaps

Quote

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
-

Quote

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”

Quote

With diagrams, consider using boxes with rounded corners instead of boxes with square corners.
- No location available
-

Relative size of rounded box edges

Quote

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
-