Add Service Server Visual Diagram

[KhudaDad414]

Description

• This PR showcases the initial design for the Service Service visual diagram.

Limitations

• A maximum of 4 servers can exists for one App.
• The app will position the nodes. so no dragging.
• Limited space for operations.

Remaining Tasks

• [x] Add two more handles to the sides.
• [x] Enable dragging by choosing the nearest handle by proximity. (the orientation of operation should also change if the server is connected to a side handle)
• [x] The Service and Servers Should auto-grow to accommodate for a large number of operations. (the only way that I can think of if we keep the current design.)
• [x] Make the end of edges closer together.

Fixes: #754

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 50e9720fc2ed461a0ac51a739e0c11bccfc5a7ba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes changesets to release 1 package

| Name | Type | | ---------------- | ----- | | @asyncapi/studio | Patch |

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for studio-next ready!

Name	Link
🔨 Latest commit	50e9720fc2ed461a0ac51a739e0c11bccfc5a7ba
🔍 Latest deploy log	https://app.netlify.com/sites/studio-next/deploys/664378e5ef5b960008630d10
😎 Deploy Preview	https://deploy-preview-1099--studio-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for asyncapi-studio-design-system ready!

Name	Link
🔨 Latest commit	50e9720fc2ed461a0ac51a739e0c11bccfc5a7ba
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/664378e525d7e20008c46efd
😎 Deploy Preview	https://deploy-preview-1099--asyncapi-studio-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for modest-rosalind-098b67 ready!

Name	Link
🔨 Latest commit	50e9720fc2ed461a0ac51a739e0c11bccfc5a7ba
🔍 Latest deploy log	https://app.netlify.com/sites/modest-rosalind-098b67/deploys/664378e51afa910009238a62
😎 Deploy Preview	https://deploy-preview-1099--modest-rosalind-098b67.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarcloud[bot]]

Quality Gate passed

Issues
13 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions[bot]]

This pull request has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this pull request, add a comment with detailed explanation.

There can be many reasons why some specific pull request has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this pull request forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart: