[Docs] Convert meshery design image to embedded meshery design

[ShashaankS]

Current State

https://cloud.layer5.io/academy/learning-paths/11111111-1111-1111-1111-111111111111/mastering-meshery/introduction-to-meshery/interpreting-meshery-designs/#meshery-design-at-a-glance

Desired State

Make a embedded meshery design using kanvas

Some notes for making meshery designs from images :

• If there is text in the image, using a text box for it won't work while embedding, try to use the image box and assign it a name so that it's visible in embedded design.
• Comment the url for the design prepared in the respective issue .
• For making your first design you get awarded with "Design Pioneer" Badge : https://badges.layer5.io/ and is a good-first-issue to get started with

---

Contributor Guide and Resources

• 📚 Instructions for contributing to academy-example
  • academy-example documentation site and source
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

[DHEVIKA]

@ShashaankS Hi! I’m a new contributor to the Layer5 community and would like to work on this issue.
Could you please assign it to me?

[Rajesh-Nagarajan-11]

Go ahead @DHEVIKA

[DHEVIKA]

Thank You @Rajesh-Nagarajan-11

[DHEVIKA]

Hi! I have recreated the Meshery design using Kanvas.

Here is the design link: https://kanvas.new/extension/meshmap?mode=design&design=704f70f6-78cd-404a-b8b0-62bff92891d6

Please let me know if any changes are required. Thank you!

[Rajesh-Nagarajan-11]

@saurabhraghuvanshii

[saurabhraghuvanshii]

hi @DHEVIKA your design is incomplete Please see this https://cloud.layer5.io/academy/learning-paths/d011fd20-a3f5-4480-883b-dfb34321d168/mastering-meshery/introduction-to-meshery/interpreting-meshery-designs/#meshery-design-at-a-glance and make same design as it.

[DHEVIKA]

Yeah I'll

[DHEVIKA]

Hi @saurabhraghuvanshii ,@Rajesh-Nagarajan-11

I have replicated the design as per the reference diagram.

While working in Meshery Kanvas, I faced some UI limitations:

• Component names were not consistently visible even after updating in the settings panel , and inbetween network arrows cant be deleted
• Renaming didn’t reflect properly on the canvas

So, I used text labels to clearly represent component names while maintaining the correct structure and connections.

Here is my updated design: https://kanvas.new/extension/meshmap?mode=design&design=05633b1c-2c68-443b-a420-2bd0a3827216

Please let me know if any further changes are required. Thank you!

[saurabhraghuvanshii]

@DHEVIKA Please refine your design

[DHEVIKA]

Hi @saurabhraghuvanshii,

Thank you for the feedback. I have refined the design and updated it to match the reference diagram.

🔗 Updated Kanvas design link: https://kanvas.new/extension/meshmap?mode=design&design=615124df-a5e4-48c3-ae6e-6736e5aa0534
I have ensured:

1. All sections are included
2. Component names match the reference
3. Layout is aligned with the diagram
4. Design works properly for embedding

I have used image boxes for better compatibility with embedded view.

Please let me know if any further changes are required. Thank you!

[saurabhraghuvanshii]

@DHEVIKA Please use kubernetes icons and same colors.

[DHEVIKA]

Hi @saurabhraghuvanshii,

I have updated the Meshery design using Kubernetes icons and aligned it with the reference diagram.

Here is the updated design: https://kanvas.new/extension/meshmap?mode=design&design=615124df-a5e4-48c3-ae6e-6736e5aa0534

Could you please confirm if this looks correct, or if any further changes are needed before I open a PR?

Thank you!