Mermaid C4 diagram support

[devdiva]

Bug description

Understood that C4 diagrams have experimental support in mermaid. But wanted to open a ticket noting that their use in RStudio qmd document returns a syntax error in the rendered HTML output.

https://mermaid.js.org/syntax/c4c.html

    C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Mac OS Ventura 13.2.1, M1 Pro chip Rstudio Version 2023.030.0+386

quarto check
[✓] Checking Quarto installation......OK      Version: 1.2.335      Path: /Users/hk/Applications/RStudio.app/Contents/Resources/app/quarto/bin
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK      Version: 3.9.6      Path: /Applications/Xcode.app/Contents/Developer/usr/bin/python3      Jupyter: (None)      Jupyter is not available in this Python installation.      Install with python3 -m pip install jupyter
[✓] Checking R installation...........OK      Version: 4.2.1      Path: /Library/Frameworks/R.framework/Resources      LibPaths:        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library      rmarkdown: 2.16
[✓] Checking Knitr engine render......OK

Attached qmd file (renamed .txt in order to upload through github) TEMPDiagrams.qmd.txt

Checklist

• [X] Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• [X] Please format your issue so it is easier for us to read the bug report.
• [X] Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• [X] Please document the operating system you're running. If on Linux, please provide the specific distribution.
• [X] Please provide the output of quarto check so we know which version of quarto and its dependencies you're running.

[cscheid]

We update mermaid (and other dependencies) once per release, and we're currently running version 9. Their documentation doesn't say it, but I suspect this is a feature that's only available in mermaid 10 and later. We'll update in 1.4.