quarto-dev / quarto-dev/quarto-cli

dot/graphviz diagrams are chopped with typst

Open
#10,641 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Bug description

Diagrams using dot are chopped when rendered with typst. fig-width is insufficient.

Note: Without fig-width, mermaid diagrams are also chopped in this example.

---
title: workflows
format:
  html: {}
  typst: {}
---

```{mermaid}
%%| fig-width: 6
sequenceDiagram
  participant Alice Adams
  participant Barbara Boxer
  participant Carmen Castille
  participant Danielle Davis
  
  Alice Adams->>Barbara Boxer: Honestly, everything is fine
  Barbara Boxer->>Carmen Castille: Everything is still fine and you should trust us
  Carmen Castille->>Danielle Davis: We have questions and doubts
```


```{dot}
//| fig-width: 6
digraph G {
    // Actors in the sequence diagram (top)
    {
        rank = same;
        node [shape=box];

        alice_top [label="Alice Adams"]
        barbara_top [label="Barbara Boxer"]
        carmen_top [label="Carmen Castille"]
        danielle_top [label="Danielle Davis"]

        edge [style=invis];
        alice_top -> barbara_top -> carmen_top -> danielle_top
    }

    // Actors in the sequence diagram (bottom)
    {
        rank = same;
        node [shape=box];

        alice_bottom [label="Alice Adams"]
        barbara_bottom [label="Barbara Boxer"]
        carmen_bottom [label="Carmen Castille"]
        danielle_bottom [label="Danielle Davis"]

        edge [style=invis];
        alice_bottom -> barbara_bottom -> carmen_bottom -> danielle_bottom
    }

    node [shape=point];
    edge [arrowhead=none];

    alice_to_barbara
    barbara_from_alice
    barbara_to_carmen
    carmen_from_barbara
    carmen_to_danielle
    danielle_from_carmen

    alice_top -> alice_to_barbara -> alice_bottom
    barbara_top -> barbara_from_alice -> barbara_to_carmen -> barbara_bottom
    carmen_top -> carmen_from_barbara -> carmen_to_danielle -> carmen_bottom
    danielle_top -> danielle_from_carmen -> danielle_bottom

    {rank=same; alice_to_barbara barbara_from_alice}
    {rank=same; barbara_to_carmen carmen_from_barbara}
    {rank=same; carmen_to_danielle danielle_from_carmen}

    edge [constraint=false, arrowhead=normal];
    alice_to_barbara -> barbara_from_alice [xlabel="Honestly, everything is fine"];
    barbara_to_carmen -> carmen_from_barbara [xlabel="Everything is still fine and you should trust us"];
    carmen_to_danielle -> danielle_from_carmen [xlabel="We have questions and doubts"];
}
```

Rendered PDF:

image

small.pdf

Steps to reproduce
quarto render workflows.qmd
Expected behavior

Dot diagrams are rendered to fit in the PDF page width.

Actual behavior

Dot diagrams are not rendered to fit in the PDF page width.

Your environment

OS: macOS Sonoma 14.6.1

Quarto check output
Quarto 1.6.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.6.9
      Path: /Users/aron/quarto/quarto-1.6.9-macos/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /opt/homebrew/opt/python@3.12/bin/python3.12
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.3
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
      knitr: 1.48
      rmarkdown: 2.27

[✓] Checking Knitr engine render......OK

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

Start with workflows.qmd and reproduce the issue using quarto render workflows.qmd, then inspect the Typst PDF output and the Quarto diagram-rendering path. Done means the provided dot diagram, and the comparable mermaid case, render within the PDF page width without being chopped.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.