GitHub - Novvum/graphql-birdseye: View any GraphQL schema as a dynamic and inter...
source link: https://github.com/Novvum/graphql-birdseye
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
View any GraphQL schema as a dynamic and interactive graph.
Try it out now: http://birdseye.novvum.io/
Description
Birdseye is an interactive tool that dynamically displays GraphQL schemas. It helps teams visualize and understand the nodes and connections within their schema. Birdseye was built using jointJS and makes for a lightweight addition to any React project.
Features
- Graphical view of any GraphQL schema
- Ability to click on a field or type to view its connections
- Dynamic zooming to focus on small portions of the schema at a time
- Add to any React project
- Customizable styling and themeing
Background
Birdseye was inspired by GraphQL Voyager and the Apis-guru team. We found that Voyager would add 1.2 MB to our projects, which was too big for us. This motivated us to create Birdseye, which has a bundle size of less than 200 KB. Birdseye is open source and free to use and explore.
Installation
Install using NPM or yarn
NPM
npm install --save graphql-birdseye
Yarn
yarn add graphql-birdseye
Usage
Here’s an example of how to use Birdseye in a React project. See the API Reference for how to pass your schema to the component.
import * as React from 'react'; import GraphqlBirdseye from 'graphql-birdseye'; class Example extends React.Component { render() { return ( <GraphqlBirdseye introspectionQuery={dummySchema.data} style={{ height: "100vh" }} /> ); } }
Try this example in code sandbox:
You can also download and test the code for our demo site in the example folder in the repository.
API
Name Type Description introspectionQuery JSON object Pass your schema as a JSON of an introspection query response. Use this introspection query to return your schema as a GraphQL schema object. schema GraphQL schema object Pass your schema as a GraphQL schema object. Return using makeExecutableSchema from GraphQL tools. style object Pass in an object to style the container theme object An object defining the theme of the components. Theme objects should follow the type defined here. Here's a full example.Roadmap
We have plans to keep improving Birdseye. Here's what is next:
- Improve performance for larger schemas
- Option to toggle zoom navigation style
- Smoother UI transitions and interactions
Contributing
This is an open source project. To learn how to contribute, please check out our contributing guide.
License
MIT © Novvum
Made with ❤️ by Novvum
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK