Support for hand-drawn diagrams with rough.js

diagrams.net 23 Jun 2020

Share:

A more relaxed and informal style for shapes, fills and lines is often used in infographics, teaching materials, maps and reports so that the diagrams are little less sterile and boring. The rough style adds a hand drawn shading options, rough outlines and connectors, and handwritten text labels.

We spent a couple of hours integrating rough.js to update our existing, and fairly limited, comic style, and the result is pretty useful.

Note: This rough style is available in version 13.3.1 onwards.

Apply the rough style

  1. Select one or more shapes and connectors that you want to roughen.
  2. In the format panel on the right, click Sketch to apply the rough style to your selected shapes, labels and connectors.

Select shapes, click Sketch in the format panel, and save your diagram to make it more informal

Use the rough=1 URL parameter

Alternatively, add rough=1 as a URL parameter so the whole diagram has that style. For example:

https://app.diagrams.net/?lightbox=1&rough=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fmaster%2Fblog%2Fgitflow-examples.drawio

A sketchy gitflow using the rough style

See a description of all of the supported URL parameters.

The rough style can make flowcharts a little less intimidating in training and onboarding materials.


A flowchart styled by rough.js


A flowchart styled by rough.js

Follow us on GitHub, Twitter, Facebook, YouTube.

Share: