Log in to GraphQL EditorGet started
Visualise your graphql schema

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 cache: using LRU cache with GraphQL Zeus
Michał Tyszkiewicz
Michał Tyszkiewicz
GraphQL cache: using LRU cache with GraphQL Zeus
1 min read
29 days ago
Unlocking the Power of React 19
Tomasz Gajda
Tomasz Gajda
Unlocking the Power of React 19
1 min read
2 months ago
Zeus update - GraphQL spread operator
Michał Tyszkiewicz
Michał Tyszkiewicz
Zeus update - GraphQL spread operator
1 min read
4 months 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