Log in to GraphQL EditorGet started
Visualise your graphql schema
Artur

Artur Czemiel

10/12/2018

Visualise your graphql schema

Have you ever wondered to visualise your GraphQL schema? How it looks as a tree structure?

Explaining schema would be much easier on visual like graph. So you can easily see points where you can optimise it.

input CatReadInput {
  id: ID
}

input CatCreateInput {
  name: String
  Age: Int
}

input CatUpdateInput {
  name: String
  Age: Int
  id: ID
}

input CatRemoveInput {
  id: ID
}

type Cat {
  id: ID
  name: String
  Age: Int
}

type Query {
  listCat: [Cat]
  readCat(Cat: CatReadInput): Cat
}

type Mutation {
  createCat(Cat: CatCreateInput): Cat
  updateCat(Cat: CatUpdateInput): Cat
  removeCat(Cat: CatRemoveInput): Cat
}

schema {
  query: Query
  mutation: Mutation
}

Presenting this kind of text document wouldn't mean anything to sales or business person. However presenting visual diagram out of it helps them understand the whole data model

schema.png

You can create those schemas just by uploading file or url to GraphQL Editor

Check out our other blogposts

GraphQL Editor 5.0 - new release, new features: GraphQL Services
Tomek Poniatowicz
Tomek Poniatowicz
GraphQL Editor 5.0 - new release, new features: GraphQL Services
4 min read
almost 3 years ago
JetBrains Mono - font for developers by developers
Tomek Poniatowicz
Tomek Poniatowicz
JetBrains Mono - font for developers by developers
1 min read
almost 5 years ago
GraphQL Hello World app with GraphQL Editor and Stucco.js
Arkadiusz Kuryło
Arkadiusz Kuryło
GraphQL Hello World app with GraphQL Editor and Stucco.js
4 min read
about 1 year ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor