allow theming & styling Mermaid diagrams

[das-g]

Mermaid allows theming / styling diagrams with

• ready-made built-in themes
• user-provided CSS
• combination of both above

If this can already be used through Quarto, please document how. (I didn't find anything about it in the documentation.)

If not, please consider adding a possibility to do so. (Best probably as YAML options as suggested at https://github.com/quarto-dev/quarto-cli/discussions/1521#discussioncomment-3225243, as that would allow project-wide, file-level and diagram-level control.)

[das-g]

Thanks to https://github.com/quarto-dev/quarto-cli/discussions/1521#discussion-4243981 I noticed, that this is already possible on a per-diagram basis by including a special (to Mermaid, not to Quarto) comment like this:

```{mermaid}
%%|label: fig-generalization
%%|fig-cap: generalization of classes without shown attributes or methods

%%{init: {
  "theme": "forest",
  "themeCSS": ".extension { fill: white !important; }; .divider { display: none; };"
}}%%

classDiagram
    Vehicle <|-- Car

to produce something like
[![](https://mermaid.ink/img/pako:eNpljk1qw0AMha-iCrxzcoBJd2lPYOiizEZ45FowozEzctvg-u51mh8C3Ul8H--9BfscGB02zSIq5mDxCuDRRk7s0W3nkAtX89g-kGPXXeCev421SlZYYJAYHXyNYgxPkqZcjNQOsB5gH-RTApfNClKnSCcHmpXP0KPXdW0ar177SLW-CH0USuc-gDcepY8Mzz-7HRypYIuJSyIJ2-z_awMPNEf7y9zUeQpk_BrEckE3UKzcIs2Wu5P26KzMfJOurXdrIn3P-favvwPAZO4)](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpljk1qw0AMha-iCrxzcoBJd2lPYOiizEZ45FowozEzctvg-u51mh8C3Ul8H--9BfscGB02zSIq5mDxCuDRRk7s0W3nkAtX89g-kGPXXeCev421SlZYYJAYHXyNYgxPkqZcjNQOsB5gH-RTApfNClKnSCcHmpXP0KPXdW0ar177SLW-CH0USuc-gDcepY8Mzz-7HRypYIuJSyIJ2-z_awMPNEf7y9zUeQpk_BrEckE3UKzcIs2Wu5P26KzMfJOurXdrIn3P-favvwPAZO4)

However, especially for more involved CSS, this gets rather clumsy, so I'm not sure whether this should be documented until proper YAML options for this exist.

[kmasiello]

+1. Watching with great interest.

[kmasiello]

For reference, here is the mkdocs implementation of mermaid. They have a default theme that is not horrid. https://squidfunk.github.io/mkdocs-material/reference/diagrams/

[cscheid]

Lots of testing to be done, but sneak peak of mermaid diagrams automatically themed against quarto's bootswatch themes:

Sandstone

Cerulean

Solar