Styling a mermaid Gantt chart used in format typst

[cgoo4]

Description

When using format typst, is there a way to use custom css with a mermaid Gantt chart?

I tried the following minimal example:

---
title: "Mermaid Gantt Chart with Custom CSS"
format:
  typst: default
---

# Example using Mermaid in Typst

```{=css}
.mermaid {
    width: 400px;
    height: 200px;
}
```

```{=html}
<div class="mermaid">
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-07-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-08-12  , 12d
    another task     : 24d
</div>
```

[mcanouil]

Typst is not HTML.

See https://quarto.org/docs/authoring/diagrams.html

I don't know what you are trying to do, but you should use mermaid as described in the documentation.

Note that outside of HTML, a "screenshot" of the diagram is used.

[cgoo4]

Thanks Mickaël.

The mermaid theme gives me much of what I'm trying to achieve for a Gantt chart embedded within a typst document.

But there are other adjustments I would ideally like to make. For example, I'd like to make the vertical lines a lighter grey in this toy example, and also increase the height of the rows, i.e. either add space between the horizontal bars or increase the height of each bar.

Are these changes possible? I couldn't see what I need in the documentation.

---
format:
  typst:
    papersize: a4
    mainfont: "STIX Two Text"
    fontsize: 10pt
    mermaid:
      theme: neutral
---

```{mermaid}
%%| fig-width: 7

gantt
    title gantt chart
    dateFormat  YYYY-MM
    axisFormat %y-%b
    todayMarker off
    
    section Long Phase Description
     Task 1              :a1,  2025-01, 2025-02
     Task 2              :a2,  2025-02, 2025-03
     Task 3              :a1,  2025-03, 2025-04
     Task 4              :a2,  2025-04, 2025-05
     Task 5              :a1,  2025-05, 2025-06
     Task 6              :a2,  2025-06, 2025-07
```

[mcanouil]

You very likely need to go to Mermaid documentation on theming.
Quarto's documentation only shows a subset.