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!

Uh oh!

Uh oh!

Ability to save as SVG or Hi-Res PNG #62

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions