quarto-dev / quarto-dev/quarto-cli

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

Open
#14,029 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug diagrams-mermaid
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the mentioned text.qmd and _quarto.yml files, using quarto render and the supplied PDF and Mermaid settings. Compare the rendered diagram with and without the per-diagram Mermaid init block. Done means the fontFamily configured in _quarto.yml is applied during PDF rendering without repeating it in each diagram.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.