Exporting as image from mermaid (Gantt)

I'm having an issue trying to export the Gantt chart as a png or any other image format. The Viewer within RStudio shows me the Gantt is rendered. It also gives me the option to save as an image, but I'm finding the image is very pixelated when you zoom in.

Here is what I have tried, but the file comes up empty after running:

    library(DiagrammeR)
    m1<-mermaid("
      gantt
      dateFormat MM/DD/YY
      title Example Gantt

      section Example Section
      Process1 :done, task_1, 01/01/01, 01/05/01
      Process2 :done, task_2, 02/01/02, 02/05/02
      Process3 :done, task_3, 03/01/03, 03/05/03
    ")
    m1$x$config = list(ganttConfig = list(
      axisFormatter = list(list(
        "%y" 
        ,htmlwidgets::JS(
          'function(d){ return d.getDay() }' 
        )
      ))
    ))
    png("Example.png")
    m1
    dev.off()

Solution

This is the code that executing that m1 object creates when run from an R console. I don't see an image in the SO viewing window, but apologies since I'm not a particularly knowledgeable user of that facility. You can view this in a browser, which is what RSudio is providing and it can be zoomed up to the browser limits and then screenshots will not be pixelated:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.8/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="lib/htmlwidgets-0.5/htmlwidgets.js"></script>
<script src="lib/d3-3.3.8/d3.min.js"></script>
<script src="lib/dagre-0.4.0/dagre-d3.min.js"></script>
<link href="lib/mermaid-0.3.0/dist/mermaid.css" rel="stylesheet" />
<script src="lib/mermaid-0.3.0/dist/mermaid.slim.min.js"></script>
<link href="lib/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="lib/chromatography-0.1/chromatography.js"></script>
<script src="lib/DiagrammeR-binding-0.8.1/DiagrammeR.js"></script>

</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
  <div id="htmlwidget-2084" style="width:960px;height:500px;" class="DiagrammeR"></div>
</div>
<script type="application/json" data-for="htmlwidget-2084">{"x":{"diagram":"\n      gantt\n      dateFormat MM/DD/YY\n      title Example Gantt\n\n      section Example Section\n      Process1 :done, task_1, 01/01/01, 01/05/01\n      Process2 :done, task_2, 02/01/02, 02/05/02\n      Process3 :done, task_3, 03/01/03, 03/05/03\n    ","config":{"ganttConfig":{"axisFormatter":[["%y","function(d){ return d.getDay() }"]]}}},"evals":["config.ganttConfig.axisFormatter.0.1"]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-2084">{"viewer":{"width":450,"height":350,"padding":15,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":false}}</script>
</body>
</html>