[Docs] "How to read a MeshMap Design"

#### Current State
Users are in need of a guide to understanding the symbols and relationships that are visually conveyed inside of a design. In some respects, a legend and another a guide with examples.

#### Desired State
1. A new "Reading and Understanding Design" docs page.
1. Snapshots ([like this one](https://github.com/meshery/meshery/pull/11102#issuecomment-2145284907)) should have a comment included that points to this "How to read a MeshMap Design" docs page.

---

#### [Contributor Guides](https://docs.meshery.io/project/contributing) and Resources
- 📚 [Instructions for contributing to documentation](https://docs.meshery.io/project/contributing/contributing-docs)
- Meshery documentation [site](https://docs.meshery.io/) and [source](https://github.com/meshery/meshery/tree/master/docs)
- 🛠 [Meshery Build & Release Strategy](https://docs.meshery.io/project/build-and-release)
- 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9)
- 🙋🏾🙋🏼 Questions: [Layer5 Discussion Forum](https://discuss.layer5.io) and [Layer5 Community Slack](http://slack.layer5.io)