Export graph as SVG file

[rich-iannone]

It would be useful to allow for export of a Graphviz and mermaid diagram to SVG. Exporting to an SVG file would be useful for importing that SVG to another application for further work (e.g., Sketch, Illustrator, and Visio all accept SVG files, I believe).

Writing the SVG markup to an R object would also be quite useful. This would be good for understanding how to generate SVG transitions and other packages using DiagrammeR could optionally use the generated SVG for other purposes.

@timelyportfolio: is there an easy way to do this? I recall that there are various export options in the documentation for viz.js. It would be great to enable an export right inside the Graphviz graph specification in the footnotes area (indeed this will have to be done for selection of the different rendering engines).

[timelyportfolio]

Sure, there are a couple examples of exporting SVG. I think the most relevant would be the code to export in ggvis in these lines https://github.com/rstudio/ggvis/blob/master/inst/www/ggvis/js/ggvis.js#L448-L472. Here is another reference that you can run in the console to see a different implementation. Make a grViz in R and then open the console on your browser.

new XMLSerializer()
  .serializeToString(
     document.getElementsByClassName("grViz")[0]
        .getElementsByTagName("svg")[0]
  )

Really depends on how you would like to implement it--as a button, icon, etc.

Another option possibly would be to use V8 from @jeroenooms and get the SVG right from R without having to render in the browser. We could support this by adding a function in DiagrammeR. I have tested this, and now that V8 supports typed arrays, it works well. Here is a link to that jeroen/V8#5.

The last which requires no change to DiagrammeR would be to use something like NYTimes SVG Crowbar, but it only works in Chrome. Or, show folks how to copy/paste the node with console tools.

[rich-iannone]

I really like the idea of using the V8 package to extract the SVG. I don't know how easy/quick it would be to write up a function but if you'd do that as a PR, it would be great!

[abresler]

PDF export would also be great; I think high charts has a library that does
both
ᐧ

---

Alex Bresler
abresler@asbcllc.com

​www.asbcllc.com​

917-455-0239
​ (cell)​

@abresler http://twitter.com/abresler | LinkedIn
http://www.linkedin.com/in/abresler | My Musings http://asbcllc.com/blog

On Mon, Feb 9, 2015 at 7:34 PM, Richard Iannone notifications@github.com
wrote:

I really like the idea of using the V8 package to extract the SVG. I
don't know how easy/quick it would be to write up a function but if you'd
do that as a PR, it would be great!

—
Reply to this email directly or view it on GitHub
#66 (comment)
.

[jeroen]

Here is a proof of concept: https://gist.github.com/jeroenooms/d0d03c7e58443f5a4438

[rich-iannone]

I have no idea why it's taken me so long to reply to this. I've said it before but, damn @jeroenooms, that V8 package is so good. I'm going to adapt that gist into a means to export SVG. Thanks again!

[happyshows]

@rich-iannone is it possible to go one step further to implement/reuse something like the toolbar in rbokeh? Which allows user to do zoom in, drag, export, etc. I wish this could be a common feature in htmlwidgets.

http://hafen.github.io/rbokeh/

[rich-iannone]

@timelyportfolio not to add more to your plate but is the feature suggestion that @happyshows introduced easy to implement? It would be helpful and I agree that an optional toolbar like this for all htmlwidgets would be very nice.

[timelyportfolio]

Unfortunately, using the rbokeh won't be easy, but I'm going to work on something from scratch as this week's widget. Can't promise anything, but hope to have something.

[timelyportfolio]

@rich-iannone I was originally thinking that I could write a generic htmlwidget that could provide this behavior to lots of different widgets. This is the manual first draft of a complete toolbar with a little code to export the svg as text to a new window.

ugly example to serve as a prototype

I will try to iterate to something clean, and then make a function that will make it easy and much prettier.

[happyshows]

@timelyportfolio thanks for the work! If this can be a common plugin in htmlwidget, it could really save a lot of time for other htmlwidget implementers and package users.

[lnalborczyk]

Hi, as today, is there an easy way to export a mermaid diagram to svg or pdf (or others) from R ? I can not find a definite answer in the related issues... Thanks !

[lnalborczyk]

For your information, I just found that the plotly package has a convenient function to export htmlwidgets to (for instance) pdf or png files.

You can export a mermaid graph g with plotly::export(g, file = "mermaid.png").