Ability to save as SVG or Hi-Res PNG

[ch3ckmat3]

Don't know if already planned but requesting anyways :)

[IvanGoncharov]

@ch3ckmat3 Sounds cool 👍

[mjbcopland]

I've branched from v1.0.0-rc.19 and added a 'Download SVG' button here.

I've branched from the latest release because the current master branch doesn't match what's currently live at https://apis.guru/graphql-voyager and also doesn't seem to work with custom schemas yet. Consequently I don't know how it would be merged in (releases branch seems out of date?) but you can run my branch locally to save the SVG. It adds a new button which looks like this:

Converting to PNG and other formats can then be done with external tools such as imagemagick.

edit

I've merged v1.0.0-rc.19 into my releases branch and branched from there instead, so we can more easily see the changes.

[IvanGoncharov]

releases branch seems out of date?

@mjbcopland You absolutely right. I just deleted it.

because the current master branch doesn't match what's currently live at apis.guru/graphql-voyager and also doesn't seem to work with custom schemas yet.

It's under heavy refactoring ATM and once we finish it we would push for 1.0.0 release.

Consequently I don't know how it would be merged in

You can open PR against master. Note: we don't have change schema button anymore so you should look some other place for "Download SVG" button.

[IvanGoncharov]

Just as a note for a future development I really like how screenshot button done in this demo: http://html2canvas.hertzen.com/documentation

[robbyemmert]

Moving my ideas here from #110 to keep everything in one place:

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!

[sanket-work]

is this closed ?