feat: use embedded Kanvas design for Meshery architecture diagram

[shteypandey28-hue]

Description

This PR replaces the static SVG with an interactive, embedded Meshery Kanvas design using the @layer5/meshery-design-embed component. This directly addresses the feedback from @lee and @james Horton to use a proper embedded design rather than custom SVG animations.

(Note: Currently using a placeholder design ID to verify the component layout. Will swap out the embedId and script once the final architecture design is exported from Kanvas.)

Notes for Reviewers

• Removed old SVG approach and replaced with MesheryDesignEmbed.
• • Uses a placeholder Kanvas embed for now.
• • Ensured no "LLM slop" is present in the architecture implementation.
    Signed commits
• Yes, I signed my commits.

[Rajesh-Nagarajan-11]

Attach a video recording please

[github-actions]

Preview deployment for PR #7731 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[shteypandey28-hue]

Hi @Rajesh-Nagarajan-11,

I've attached the video recording below showing the Meshery Architecture Design Embed in action. It demonstrates the interactive Cytoscape graph loading properly in both light and dark modes, with the auto-centering working as expected.

meshery_arch.mp4

The recent commits also include a fix to ensure the script path resolves correctly across all nested routes. Let me know if you need any other adjustments!

[saurabhraghuvanshii]

@shteypandey28-hue why this file?

[shteypandey28-hue]

This file contains the exported Cytoscape JSON data and layout configuration generated directly from the Meshery Kanvas Playground.

The @layer5/meshery-design-embed component requires an embedScriptSrc to dynamically render the interactive diagram. When a design is exported from Kanvas via the "Export to JS/Embed" option, it generates this file containing all the necessary base64 SVG assets, coordinates, and styling configurations.

Why it's in the /static directory: Initially, I placed this in src/assets, but the embed script dynamically injects a <script type="module" src="..."> tag at runtime. Gatsby doesn't resolve relative asset paths in injected tags during runtime, resulting in a 404 error. Placing it in the static/ directory ensures Gatsby serves it as a public asset, making it directly accessible for the embed component to fetch and render the interactive architecture diagram successfully.

[Rajesh-Nagarajan-11]

????

[Bhumikagarggg]

@shteypandey28-hue Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂