update

Signed-off-by: Zihan Kuang <zihan_kuang@outlook.com>

Author: zihanKuang

content/en/kanvas/designer/understanding-edges/index.md

@@ -7,15 +7,15 @@ categories: [Designer]
 tags: [designs]
 ---
 
-When you connect components in [Kanvas](https://kanvas.new/), the line you draw is called an edge. Each edge visually represents a [relationship](https://docs.layer5.io/kanvas/concepts/relationships/) between your components. This guide will help you understand how to use different edge styles to create clear and effective infrastructure diagrams.
+When you connect components in [Kanvas](https://kanvas.new/), the line you draw is called an **edge**. Each edge visually represents a [relationship](https://docs.layer5.io/kanvas/concepts/relationships/) between your components. This guide explains how to use different edge styles to create clear and effective infrastructure designs.
 
 ![Examples of changing edge styles in Kanvas](images/style-edge.gif)
 
-## Types of Edges
+## Understanding Edge Types
 
 In Kanvas, there are two main types of edges, each serving a different purpose:
 
-### Semantic Edges
+### Semantic Edges: Representing Real Infrastructure
 
 These edges represent real infrastructure relationships that Kanvas can understand and manage. For example:
 - Network connections between services
@@ -26,7 +26,7 @@ Kanvas uses these edges during deployment to understand how your components shou
 
 > For detailed information about each relationship type, visit [Relationships Documentation](https://docs.layer5.io/kanvas/concepts/relationships/)
 
-### Non-semantic Edges
+### Non-semantic Edges: Annotating Your Designs
 
 These are visual aids that help you document and explain your design. They are useful for:
 - Adding explanatory notes
@@ -35,20 +35,20 @@ These are visual aids that help you document and explain your design. They are u
 
 Kanvas ignores these edges during deployment as they are purely for documentation.
 
-## Edge Styles
+## Working with Edge Styles
 
-### Default Edge Styles
+### Default Styles
 
-To help you quickly understand your diagrams, Kanvas uses specific default styles for each type of edge:
+To help you quickly understand your designs, Kanvas uses specific default styles for each type of edge:
 
-**Semantic Edges**
+**For Semantic Edges**:
 - Style: Dotted line with an arrowhead
 - Color: Grey/Blue
 - Use: For all real infrastructure connections
 
 {{< meshery-design-embed src="../understanding-edges/images/embedded-design-untitled-design.js" id="embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6" size="half" >}}
 
-**Non-semantic Edges**
+**For Non-semantic Edges**:
 - Style: Solid line with an arrowhead
 - Color: Green
 - Use: For all visual annotations and notes
@@ -57,52 +57,51 @@ To help you quickly understand your diagrams, Kanvas uses specific default style
 
 ### Customizing Edge Styles
 
-While the default styles are designed to be clear and consistent, Kanvas gives you the flexibility to customize any edge to better suit your needs. Simply select an edge to reveal the styling toolbar.
+While the default styles are designed to be clear and consistent, Kanvas gives you the flexibility to customize any edge to better suit your needs. Simply click an edge to reveal the styling toolbar.
 
-#### Line Types
+#### Choosing a Line Type
 - Dashed Line: For proposed or optional connections
 - Wave Line: For asynchronous or non-continuous connections
 - Zigzag Line: For disrupted or unreliable connections
 - Tree Line: For hierarchical relationships (parent-child, system-subsystem)
 - Line with Circles: For weak or indirect associations
 - Bezier Curve: For non-linear or indirect connections
 
-#### Endpoint Types
+#### Defining Connection Points
 - Arrow Head (Default): Shows general direction or flow
 - Filled Diamond: For "whole-part" relationships (aggregation)
 - Filled Square: For strong ownership relationships (composition)
 - Filled Triangle: For inheritance or "is-a" relationships
 - Filled Circle: For loose containment relationships
 
-> **Note**: While Kanvas supports these UML-style relationships, the most commonly used styles are straight lines, dotted lines, and arrow heads. Use other styles when you need to express specific types of relationships in your diagrams.
+> **Note**: While Kanvas supports these UML-style relationships, the most commonly used styles are straight lines, dotted lines, and arrow heads. Use other styles when you need to express specific types of relationships in your designs.
 
-#### Colors
+#### Using Color for Visual Cues
 
-Colors help you create a visual language in your diagrams. While Kanvas has default colors, you can use any color to convey meaning:
+Colors help you create a visual language in your designs. While Kanvas has default colors, you can use any color to convey meaning:
 
-Default Colors
+**Default Colors**
 - Green: For non-semantic annotations
 - Grey/Blue: For semantic relationships
 
-Suggested Color Meanings
+**Suggested Color Meanings**
 - Yellow: For connections that need review
 - Red: For issues or breaking changes
 
-### Labels and Annotations
+#### Adding Labels
 
 You can add text directly to edges to provide more information. This is especially useful for:
 - Describing traffic flow (e.g., "User Traffic → API Gateway")
 - Adding process steps (e.g., "Requires Manual Review")
 - Noting important details (e.g., "Backup Route (Low Priority)")
 - Specifying protocols (e.g., "gRPC / 50051")
 
-### Visual Effects
+#### Applying Visual Effects
 
 The "Marching-ants" animation effect can be added to any edge to:
 - Highlight specific connections in team reviews
 - Emphasize critical paths
 
-
 {{< alert title="Learn More About Interpreting Designs" type="info" >}}
 To learn how to interpret and understand designs in practice, including how components work together in a design, visit our comprehensive guide in the [Layer5 Academy](https://cloud.layer5.io/academy/learning-paths/mastering-meshery/introduction-to-meshery?chapter=interpreting-meshery-designs).
-{{< /alert >}}
+{{< /alert >}}