microsoft / microsoft/vscode-mssql

[Feature Request]: Add API diagram to improve readability of config preview

Open
#21,862 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area - Data API Designer Enhancement
Dominant language
TypeScript
Stars
1.9k
Forks
610
Avg merge
2d 3h
Merged PRs (30d)
97

Description

### Feature Description

When users click Show Config, we already display a DAB configuration preview before deployment. Add an additional tab called API Diagram that visualizes the generated API surface (REST endpoints, GraphQL operations, MCP tools) derived from the current configuration.

**Design Mock:**
Image

**Functional requirements:**
- A new API Diagram tab is available in Show Config alongside existing config preview.
- REST section lists the base path and the computed REST endpoints for enabled entities.
- GraphQL section lists the GraphQL endpoint and available queries/mutations derived from enabled entities/mutations
- MCP section lists MCP endpoint and shows enabled/disabled tools derived from permissions, plus a scope summary (e.g., “2 entities exposed, operations enabled: Read/Create”).

### Problem and Motivation

The DAB config file is powerful but not always easy to interpret quickly, especially for users who want to understand:
- What endpoints will be created (and their base paths)
- What GraphQL queries/mutations will be available
- What MCP tools are enabled/disabled based on exposed entities and permitted operations

A diagram-style view provides a fast “API contract” overview and reduces misconfiguration surprises.

### Related Area

- [ ] Connection dialog (SQL Server | Azure browse/Fabric browse)
- [ ] Query editor
- [ ] Query results panel
- [ ] Object Explorer
- [ ] GitHub Copilot integration
- [ ] Preview/Edit data
- [ ] Table Designer
- [ ] Schema Designer
- [ ] Schema Compare
- [ ] Local SQL Server Container provisioning
- [ ] SQL database in Fabric provisioning
- [ ] DACPAC/BACPAC export/import
- [ ] SQL Database projects
- [ ] Query Plan Visualizer
- [x] Other (please describe below)

### If you selected "Other", please describe the area

DAB

### Confirmation

- [x] I have searched existing feature requests and couldn't find a match
- [ ] I want to help implement this feature

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the existing Show Config UI and its configuration-preview data flow. Add an API Diagram tab covering REST endpoints, GraphQL operations, and MCP tools derived from the current configuration; done means the three sections show the requested endpoints, operations, permissions, and scope summary alongside the preview.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
api, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.