In this section we will look at the ability to import a GraphQL schema from a file.
In the demonstration we will use the StarWars schema. If you want to try the procedure, save the file from the page: https://github.com/graphql/swapi-graphql/blob/master/schema.graphql
Import from file
To load an existing GraphQL schema, go to the Projects section and click the Import file button.
After you select the saved schema.graphql file it will be loaded and the project will be created including the visualization of the GraphQL schema.
You now have an overview of the loaded objects such as types, interfaces, enums and more. Everything is also displayed in the main diagram graphically and the objects are placed in the diagram automatically. If you want to change the layout of the objects in the diagram, you can use the three auto-layout features and choose the most suitable visualization method for you. In many cases, it is best to manually reposition the objects according to some logical units. Additional options for modifying the GraphQL diagram schema are listed in the following section.
Modifying the visualization of a GraphQL diagram
You can change the color of the objects quite easily for a better understanding of the logical units. To do this, you can use the Copy/Apply format feature. This feature allows you to select one object, set the text or background color, and then apply these settings to other selected objects.
Splitting the GraphQL diagram into sub-diagrams
If you want to focus, for example, only on a certain part of the GraphQL diagram, you can select objects and add them to a new sub-diagram.
Note: This feature is only available in the Professional edition. More information can be found here.
The following gallery shows a project with multiple diagrams, each of which contains a specific part of the main diagram.
Larger GraphQL diagrams
We have made numerous performance optimizations that make it possible to visualize more complex GraphQL diagram structures. Here you can see a sample GitHub diagram that can be downloaded from the site: https://docs.github.com/en/graphql/overview/public-schema
As you can see, this GraphQL schema contains more than 1000 objects (types, inputs, interfaces, enums…) and more than 2000 references (references, implements).
For future versions we plan even more features like automatic splitting into sub-diagrams and further optimization for better user experience and performance.