New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Proposal] Schema diagram #935

Open
rohit-ravikoti opened this Issue Jan 24, 2019 · 0 comments

Comments

Projects
None yet
2 participants
@rohit-ravikoti
Copy link
Contributor

rohit-ravikoti commented Jan 24, 2019

Hello!

I have been working on a project which displays the graphql schema as a diagram and I have been working closely with @schickling and @kuldar to get their feedback. I think it would be a very useful addition to graphql-playground. I am looking for feedback from the community to improve the library and hopefully include it in Playground!

We originally looked into using graphql-voyager, but the bundle size was ~2mb which is not at all viable to ship with playground. This tool is ~200kb and can be reduced further to ~80kb. There are very few options available in the javascript ecosystem to layout diagrams in the way voyager has, so a few design modifications had to be made. The main aspect is that we are using a "fog-of-war" strategy. You will see what I mean from the examples below.

Currently there are two options.

Option 1: Single links between types (even if multiple fields point to the same type)
animated-birdseye

Option 2: Links directly from fields to types
animated-birdseye-multiple

Some possible designs from @kuldar:
pasted_image_at_2019-01-23__9_18_pm
image 1
image 2

The diagramming library I am using (jointJS) is flexible, but some requests may be very difficult to implement or not possible, but please feel free to submit a PR!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment