Feature Request: Image export

[robbyemmert]

Desired functionality:
As a viewer, I want to export the schema to a file.

Ideal options for file types:

• SVG (It's already an SVG in the DOM, and it'd still be a vector image supported by most graphics editors, so this is likely the optimal choice)
• PNG/JPEG (This would require a more complex export interface, asking for sizing/resolution requirements, but is nice for quickly outputting a snapshot for slide decks)

For reference, the SVG option alone would be sufficient (at least to get started) for my own use case.

Another note: It might be useful to architect this so that there's an interface for adding your own export types. Something like the following:

GraphQLVoyager.init(document.getElementById('voyager'), {
  introspection: introspectionProvider,
  exportTypes: [
    { label: 'UML', description: 'Export UML for the old guard', editor: ExportUMLUI myCustomUMLExportProvider } 
  // myCustomUMLExportProvider is a function that accepts the rendered SVG element, introspection, (and any other necessary info) and returns a file blob or some equivalent format.
  // the 'editor' prop is an optional react component that provides an interface for configuring export settings. If not provided, the export provider could be run directly. An editor ui would only be *required* for formats like PNG that would need to know what resolution to export to, etc.
  ]
})

Common exporters could then be added in the core package for convenience, i.e.:

import {svgExporter, pngExporter} from 'graphql-voyager/exporters'
const settings = {
  exportTypes: [
    svgExporter, pngExporter
  ],
  //...etc
}

Thanks!

[IvanGoncharov]

@robbyemmert Definitely something we want to add 👍
It was already reported in #62 but I also will keep this one since it contains a few new ideas.

At the moment we doing heavy refactoring as the push for 1.0.0.
But this feature is definitely on top of the list for post-1.0.0.

[robbyemmert]

Awesome, thanks for keeping this in mind!

[robbyemmert]

Pasting my comments into #62 and closing for cleanliness.

[IvanGoncharov]

@robbyemmert Thanks 👍