quarto-dev / quarto-dev/quarto-cli
Quarto doesn't recognize Mermaid erDiagram
Nobody has claimed this yet.
- 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
- Create a qmd file like above
- Render the qmd file including the Mermaid code chunk (using VS Code Quarto preview button)
- 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
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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