renderDiagrammeR mermaid diagram size in a Shiny Document

Question

I am trying to embed the DiagrammeR example from Gantt charts with R into a Shiny document. There are two problems I am trying to solve:

1) Make the font in the textAreaInput Courier New, and preferably smaller size. (I got this solution an hour after posting by adding the following to the top of the Rmd just under the final ---:)

<style>
textarea {
  font-family: Courier New;
}
</style>

2) Make the mermaid Gantt Chart much bigger so I can see dynamic changes (I tried adding width=900 and so on but no luck. The problem seems to be limited to RStudio, as the whitespace around the Gantt Chart is not there if I open this Shiny document in Chrome.)

The code for entire Shiny document is here. Any help would be greatly appreciated. Thanks :)

---
title: "Gantt Chart with Mermaid & DiagrammeR"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r echo=FALSE, message=FALSE}
library(knitr)
library(DiagrammeR)

inputPanel(
  textAreaInput("inText", NULL, width="900px", rows=15, value="
gantt
dateFormat  YYYY-MM-DD
title A Very Nice Gantt Diagram

section Basic Tasks
This is completed             :done,          first_1,    2014-01-06, 2014-01-08
This is active                :active,        first_2,    2014-01-09, 3d
Do this later                 :               first_3,    after first_2, 5d
Do this after that            :               first_4,    after first_3, 5d

section Important Things
Completed, critical task      :crit, done,    import_1,   2014-01-06,24h
Also done, also critical      :crit, done,    import_2,   after import_1, 2d
Doing this important task now :crit, active,  import_3,   after import_2, 3d
Next critical task            :crit,          import_4,   after import_3, 5d

section The Extras
First extras                  :active,        extras_1,   after import_4, 3d
Second helping                :               extras_2,   after extras_1, 20h
More of the extras            :               extras_3,   after extras_1, 48h
  ")
)

renderDiagrammeR({
  mermaid(
     paste0(input$inText)
  )  
})
```

Answer 1

I made slight (style) changes (hope you don't mind).

1) Change the font and it size in css chunk textarea. With the !important rule you can override the particular (default) property in css Bootstrap. Also, you can adjust the width/height of the textarea in the same css chunk or in the textAreaInput.

2) You can adjust the width/height of the diagram in DiagrammeROutput. Finally, pass the values from input$inText to output$diagram.

---
title: "Gantt Chart with Mermaid & DiagrammeR"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css textarea, echo = FALSE}
textarea {
  # width: 900px !important;
  # height: 440px !important;
  font-family: Courier New !important;
  font-size: 12px !important;
  background-color: #cccccc !important;
  # background-color: lightgrey !important;
  border: none !important;
  border-radius: 10px solid #ffffff !important;
}
```

```{r gantt-chart, echo = FALSE, message = FALSE}
library(knitr)
library(DiagrammeR)

shiny::textAreaInput(inputId = "inText", label = NULL, width = "900px", height = "370px", rows = 15, value = "
gantt
dateFormat  YYYY-MM-DD
title A Very Nice Gantt Diagram

section Basic Tasks
This is completed             :done,          first_1,    2014-01-06, 2014-01-08
This is active                :active,        first_2,    2014-01-09, 3d
Do this later                 :               first_3,    after first_2, 5d
Do this after that            :               first_4,    after first_3, 5d

section Important Things
Completed, critical task      :crit, done,    import_1,   2014-01-06,24h
Also done, also critical      :crit, done,    import_2,   after import_1, 2d
Doing this important task now :crit, active,  import_3,   after import_2, 3d
Next critical task            :crit,          import_4,   after import_3, 5d

section The Extras
First extras                  :active,        extras_1,   after import_4, 3d
Second helping                :               extras_2,   after extras_1, 20h
More of the extras            :               extras_3,   after extras_1, 48h
")

DiagrammeR::DiagrammeROutput(outputId = "diagram", width = "950px", height = "auto")

output$diagram <- 
  DiagrammeR::renderDiagrammeR({
    DiagrammeR::mermaid(
      base::paste0(input$inText)
      )
    })
```