graphqlvisualizer

Description:

GraphQlVisualizer is a tool that enables you to visualize existing GraphQL schemas. It lets you explore all aspects of a schema without the need of a functional serverice side. Simply load your schema froma a local file or from a string and get a generated html page, wich will contain graphical representaion of your scehma in a simple, intuitive and interavctive UI.

File will be generated inside src/generated directory, under the name of schemaVisualized.html

Functionalities:

Visualize schema from local file
Visualize schema from string

Installation:

Install using NPM

npm install --save graphqlvisualizer

Usage:

Below is an example of how this package could be used

import GenerateHtmlFromString from "graphqlvisualizer";

var schemaString = `
type User{
    id:ID!
    firstname:String
    lastname:String
    address:Address
}
type Address{
    postalCode:Int
    city:String
}
type Query{
    """
    Returns user with specified id
    """
    user(id: ID): User
    """
    Returns a list of users that have the specified address
    """
    usersOnAddress(address: Address): [User]
}
type Mutation{
    createAddress(postalCode:Int!, city:String): Address
    deleteUser(id:ID):Boolean
}
`;

var schema = GenerateHtmlFromString(schemaString);

Example

This is what generated UI would look like with a list of all defined types:

Expanded query or mutation would look like image below