Tip: How to create a hand-drawn sketch with "bold stroke" effect

[Raindrops From Sky]

Hi all,

Here is a tip to create a "hand-drawn" sketch effect while drawing flow-diagram. 

This is just an example to show the effect: It can be used for any other shape/edge/chart type.

Step-by-step process to achieve this effect:

1. Create one rectangle shape (the shape at the top-left corner) 

2. Select the shape

3. In the Properties panel (at right), select the Style tab.

4. Select the Sketch checkbox, and unselect the Rounded checkbox (as shown below).

5. At the bottom, there is a Properties section. 

    Click on the triangle button to expand this section. 

6. There are a lot of properties. We need to change only two of them:

(a) Change the value of Jiggle parameter. Enter a positive value.

      Note that if you leave the Jiggle value to 0, there is no sketch effect at all.

      As you increase the value to 0.1, 0.2.....5.0..., the sketch effect starts appearing.

(b) Select the Disable multi stroke checkbox.

      Now the shape will appear as if it is drawn with four bold strokes. 

      (When this checkbox is unselected, multiple strokes appear on each line, as if we have traced the shape many times.)

*********

In the first figure (above),  I copied the same shape 11 times, and set their Jiggle values to different values, from 0 to 5 in increments of 0.5. The effect can be seen in the first row: As the Jiggle value increases, the strokes become more inaccurate (wild).

Practically, the shape becomes too wild with Jiggle >5.

Now the real fun begins: I selected all 11 shapes in the row, and copied them below.

The shapes in the second row have the same Jiggle values as the row above.

But each of them shows a different shape!

I copied the top row six times below, and each time the shapes changed.

So we conclude that when we copy a shape, Draw.io creates each copy uniquely with the given parameters.

Compare the shapes in each row: All of them have the same Jiggle value.

Then compare any two columns.

Thus this figure demonstrates how the shape look when you increase the Jiggle value.

From this, you can select the value of Jiggle to suit your taste.

Note that a similar effect is created on connecting edges also.

Hope this article was useful.

Regards,

Narayan