mermaid diagrams: Adjust white space around graph

Question

I'm using mermaid diagrams in my Rmd reports compiled with Rstudio. In the HTML/PDF output, there is a lot of blank space above and below the charts, see example below.

# Header
Text
```{r}
library(DiagrammeR)
mermaid("
graph TD
    classDef style_main_node fill:orange,stroke:#333,stroke-width:0px;
    classDef style_sub_node fill:lightgray,stroke:#333,stroke-width:0px;

0(Top)
0 --> A1(Left)
0 --> B1(Center)
0 --> C1(Right)

    class 0 style_main_node;
    class A1,B1,C1 style_sub_node;
")
```
Text

Is there a way to crop off/adjust the white space around the graph? And possibly also to change its size?

score 2 · Accepted Answer · edited Dec 19 '19 at 12:32

2

Just specify height and width around diagram with: height = '100%', width = '100%'

# Header
Text
```{r}
library(DiagrammeR)
mermaid("
graph TD
    classDef style_main_node fill:orange,stroke:#333,stroke-width:0px;
    classDef style_sub_node fill:lightgray,stroke:#333,stroke-width:0px;

0(Top)
0 --> A1(Left)
0 --> B1(Center)
0 --> C1(Right)

    class 0 style_main_node;
    class A1,B1,C1 style_sub_node;
", height = '100%', width = '100%')
```
Text

edited Dec 19 '19 at 12:32

Abhishek Gurjar

7,152
9
35
40

answered Dec 19 '19 at 12:13

Radovan Miletić

1,581
3
10

Thanks so much @RadovanMiletić – very simple and elegant solution! – mavericks Jan 09 '20 at 11:47

mermaid diagrams: Adjust white space around graph

1 Answers1