Mermaid chart font/format

[mjfrigaard]

The mermaid chart in the Document chapter needs help. The code below creates the following chart in Quarto in the IDE:

```{=html}

<style>

.codeStyle span:not(.nodeLabel) {
  font-family: monospace;
  font-size: 1.5em;
  font-weight: bold;
  color: #9753b8 !important;
  background-color: #f6f6f6;
  padding: 0.2em;
}

</style>
```

```{mermaid}
%%| fig-width: 6.5
%%| fig-align: center
%%| fig-cap: '`roxygen2` creates the `NAMESPACE` and `man/` documentation'
%%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': 'Inconsolata', 'primaryColor': '#33a02c', 'edgeLabelBackground':'#02577A'}}}%%

flowchart TD
  X1(Code in <code>R/</code> Folder) --> X2(<code>roxygen2</code> Comments and Tags in <code>.R</code> Files)
  X2 --> X3(Run <code>devtools::document</code>)
  X3 --> X4(Parse <code>roxygen2</code> Comments and Tags)
  X4 --> X5(Generate <code>.Rd</code> Files in <code>man/</code> Folder)
  X4 --> X6(Generate <code>NAMESPACE</code> File)
  
  style X1 fill:#8dd38d,stroke:none,rx:10,ry:10;
  style X2 fill:#8dd38d,stroke:none,rx:10,ry:10;
  style X3 fill:#89D6FB,stroke:none,rx:10,ry:10;
  style X4 fill:#89D6FB,stroke:none,rx:10,ry:10;
  style X5 fill:#89D6FB,stroke:none,rx:10,ry:10;
  style X6 fill:#89D6FB,stroke:none,rx:10,ry:10;
```

But creates the following chart on the deployed version: