quarto-dev / quarto-dev/quarto-cli

Quarto doesn't recognize Mermaid erDiagram

Open
#10,451 5 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

Quarto v1.5.56 doesn't recognize Mermaid erDiagram, even though the Mermaid code works well on Mermaid live editor

---
title: BigQuery Test
author: AndhikaWB
date: last-modified
date-format: long
format:
  gfm:
    output-file: README.md
knitr:
  opts_chunk:
    echo: true
    error: true
    cache: true
    results: hold
---

``` {mermaid er-diagram}
erDiagram

c[customer] {
  Int64 CustomerID PK
  Str FirstName
  Str LastName
  Str CustomerEmail
  Str CustomerPhone
  Str CustomerAddress
  Str CustomerCity
  Str CustomerState
  Int64 CustomerZip
}

o[order] {
    Int64 OrderID PK
    Date Date
    Int64 CustomerID FK
    Str ProdNumber
    Int64 Quantity
}

p[product] {
    Str ProdNumber PK
    Str ProdName
    Int64 Category
    Float64 Price
}

pc[productcategory] {
    Int64 CategoryID
    Str CategoryName
    Str CategoryAbbreviation
}
```
Steps to reproduce
  1. Create a qmd file like above
  2. Render the qmd file including the Mermaid code chunk (using VS Code Quarto preview button)
  3. Wait till the render is done
Expected behavior

The ER diagram shows up properly (just like in Mermaid live editor)

Actual behavior

A syntax error image appear as seen below
image

Also, the Mermaid syntax highlighting doesn't work if I declare erDiagram at the beginning of the code chunk, but seems to work well on other types of diagram

Your environment
  • IDE: VS Code v1.91.1
  • OS: Windows 11
  • Quarto: 1.5.56
  • Quarto VS Code extension: v1.113.0
Quarto check output
Quarto 1.5.56
[>] 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.5.56
      Path: C:\Users\Dhika\Apps\CommonFiles\Quarto\bin
      CodePage: 1252

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

[>] Checking LaTeX....................OK
      Tex:  (not detected)

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.4.1
      Path: C:/Users/Dhika/Apps/CommonFiles/R
      LibPaths:
        - C:/Users/Dhika/Apps/Visual Studio Code Portable/Data/misc/R/win-library/4.4
        - C:/Users/Dhika/Apps/CommonFiles/R/library
      knitr: 1.47
      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 by rendering the provided qmd example with the VS Code Quarto preview and confirm that erDiagram fails while other Mermaid diagrams work. Trace the Mermaid rendering and syntax-highlighting entry points. Done means the ER diagram renders correctly and erDiagram receives syntax highlighting.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.