Skip to content

mermaid font family definition in config file is not respected during render #14029

@joaomelo

Description

@joaomelo

Bug description

When i set the font of mermaid diagrams for pdf in the _quarto.yml config file, they are not applied in the final output.

project:
  type: default
  output-dir: _output

lang: pt-BR

format:
  html:
    code-fold: true
  pdf:
    pdf-engine: xelatex
    keep-tex: true
    mainfont: "Times New Roman"
    sansfont: "Times New Roman"
    monofont: "Consolas"
    mermaid-format: png
    mermaid:
      theme: default
      themeVariables:
        fontFamily: "Times New Roman"
    geometry:
      - top=3cm
      - left=3cm
      - right=2cm
      - bottom=2cm
  epub: default

i have to embed the configuration in every mermaid diagram to make it work

```{mermaid}
%%{init: {"theme":"default","themeVariables":{"fontFamily":"Times New Roman"}}}%%
%%| label: fig-etapas
%%| fig-align: center
%%| fig-width: 2.5
flowchart TD
  B[Identificar referências] --> C[Analisar referências]
  C --> D[Arquiteturar conteúdo]
  D --> E[Desenvolver conteúdo]
  E --> F[Produto concluído]
  E -. Iterar até concluir .-> B
```

Steps to reproduce

create a text.qmd file with a mermeid diagram like bellow

```{mermaid}
%%| label: fig-etapas
%%| fig-align: center
%%| fig-width: 2.5
flowchart TD
  B[Identificar referências] --> C[Analisar referências]
  C --> D[Arquiteturar conteúdo]
  D --> E[Desenvolver conteúdo]
  E --> F[Produto concluído]
  E -. Iterar até concluir .-> B
```

create a _quarto.yml config file like this:

project:
  type: default
  output-dir: _output

lang: pt-BR

format:
  html:
    code-fold: true
  pdf:
    pdf-engine: xelatex
    keep-tex: true
    mainfont: "Times New Roman"
    sansfont: "Times New Roman"
    monofont: "Consolas"
    mermaid-format: png
    mermaid:
      theme: default
      themeVariables:
        fontFamily: "Times New Roman"
    geometry:
      - top=3cm
      - left=3cm
      - right=2cm
      - bottom=2cm
  epub: default

run quarto render and see that the diagram font will not respect the configuration. but if you introduce the themeVariables in the diagram defition like bellow, it will work.

```{mermaid}
%%{init: {"theme":"default","themeVariables":{"fontFamily":"Times New Roman"}}}%%
%%| label: fig-etapas
%%| fig-align: center
%%| fig-width: 2.5
flowchart TD
  B[Identificar referências] --> C[Analisar referências]
  C --> D[Arquiteturar conteúdo]
  D --> E[Desenvolver conteúdo]
  E --> F[Produto concluído]
  E -. Iterar até concluir .-> B
```

Actual behavior

No response

Expected behavior

No response

Your environment

quarto version: 1.8.27
miktext console: 4.14
so: windows 11

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingdiagrams-mermaidMermaid diagrams

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions