Customizing rough.js options by diagram or shape

[noamross]

Proposal

In would be great if Mermaid.js could add the ability to modify rough.js options for diagrams using look: handDrawn, so as to customize the hand-drawn look, especially if one if matching diagrams with other visualization produced with rough.js. Options could be set at both the shape and the diagram level.

Example

At the shape level, one could add options using the new flexible shape syntax, perhaps passing all the rough.js options as an object:

A@{ shape: rect, label: "Start", roughjs: {fillStyle: "cross-hatch", roughness: 2.0}}

At the diagram level, one could have a roughjs: configuration to set options.

Ideally it would be possible to set rough.js options separately for nodes or connectors, or in general in a CSS-like way so that one could set them for specific shape or connector types.

Screenshots

No response

[tamaro-skaljic]

Is related to mermaid-js/mermaid-live-editor#1457, #1886 and #2216.