Importing a GraphQL schema from URL

You can use our GraphQL schema visualization tool in several ways. You can

  • model new GraphQL schema diagrams,
  • import an existing schema from a file,
  • and also import GraphQL schema from online sources.

In this section, you will learn how to import a GraphQL schema from an online source and how to modify the visualization. The StarLink schema, available at https://api.spacex.land/graphql/, will be used in the example.

Loading the GraphQL schema

As a first step, go to the Projects page and click on the Import from URL button. A dialog box will open. Type in the URL and click the Import button.

Import GraphQL schema from URL

The GraphQL schema will be loaded and a new project will be created with a graphical visualization, a diagram.

Editing the GraphQL schema

You can affect the appearance of the diagram in a number of ways. You have the option to use three different auto-layouts. Each of them arranges the graphical elements in a different way. Which one is the most suitable is up to you.

Imported GraphQL schema - diagram in Moon Modeler

In case you want to arrange the objects differently, you can of course change the positions manually and use the Alignment features, etc.

Color coding of objects in GraphQL schema

For a better understanding of the diagram and the objects in the GraphQL diagram schema, it is advisable to color certain logical units with a certain color. So how to color all objects containing e.g. Rocket? Use the search functionality (1) to find objects that contain this part of the name. Select the Rocket type (2) and set the color (3).

Setting color for graphical object.

Now right click on the object in the diagram or in the left navigation bar and select Copy format.

Copy format

Then change the focus to the left navigation panel and press CTRL+A (CMD+A). This will select the objects matching the search term. Right click on any of them and select Apply format.

Apply format.

The result can be seen below.

Applied colors in GraphQL schema diagram

Line modes

Another option that will improve the readability and understandability of the diagram is the line mode option. You can either leave the default Detailed mode:

Default line mode

or switch to Simple mode, where the reference lines are drawn between objects without anchoring to a specific field.

Simple line mode in GraphQL schema diagram

PDF reports and documentation

One of the key features of our products is the creation of documentation. You can export the created diagram to PDF or create an interactive HTML report from it and use this GraphQL schema diagram output for communicating with other members of your teams.

PDF format

PDF report - GraphQL schema

Interactive HTML report

HTML report

Learn more about the creation of HTML reports.

Quick links

Download Buy Now!

Blog Categories
Blog by Platforms