A powerful VS Code extension that brings the GraphQL Visual Editor into your editor. Turn your GraphQL schemas into interactive graph diagrams while editing code.
Features
Interactive graph: Visualize types, fields, and relationships.
Click-to-navigate: Click schema code to focus the matching node/edge in the graph (and vice versa).
In‑editor editing: Modify schemas and queries directly in VS Code.
Smart tooling: Auto‑complete and schema validation while you type.
Auto‑generated docs: Create basic documentation stubs from your schema; easy to fill out, including with AI assistance.
Live preview: Real‑time, interactive diagrams while you edit.
Seamless integration: Works with existing GraphQL projects.
Usage
Open a .graphql or .gql file in VS Code.
Explore the visual graph and edit your schema/queries in real time.
Click in the code view to highlight and jump to the corresponding element in the graph (and vice versa).
Generate basic docs from your schema and fill them in; optionally use your AI assistant to complete descriptions.