Back to Meshery

Edge Styles Guide

docs/static/v0.9/guides/configuration-management/edges-guide/index.html

1.0.193.6 KB
Original Source

Edge Styles Guide

In Meshery, the line that connects components is called an edge. Each edge visually represents a relationship and uses a specific style to communicate its nature.

This guide helps you interpret the most common edge styles you will encounter.

Interpreting Common Edge Styles

Meshery uses a set of default visual styles to provide at-a-glance information about the type of connection an edge represents. While these styles can be customized in the UI, understanding the defaults is key to interpreting component relationships.

Line Style: The Primary Indicator

The line style is the most important visual cue for understanding an edge’s purpose.

  • Dotted Line :

  • Solid Line :

Color: A Secondary Cue

Color provides an additional hint about an edge’s nature.

  • Green / Teal :

  • Blue / Grey :

The following gallery showcases the full range of visual styles available for edges in Meshery.

Arrow Head

Represents general direction or flow in diagrams. In UML, it could indicate direction in an association or dependency.

Bezier Curve Line

Used for curved relationships, which might indicate non-linear or non-direct connections. In UML, it could be used for inheritance or flow that isn't straightforward.

Filled Circle Head

Used for aggregation in UML, where one class contains another but does not own it (e.g., a library containing books).

Filled Diamond Head

Used for aggregation in UML, typically an empty diamond at the container end, indicating a "whole-part" relationship.

Filled Square Head

Represents composition in UML, a stronger relationship than aggregation, where the contained class cannot exist without the container (e.g., a house and its rooms).

Filled Triangle Head

Often used for inheritance in UML, where one class is a subclass of another. It indicates the "is-a" relationship.

Line With Circles

Often represents a weak or indirect association in UML. It can also be used for dependencies or indicating optional relationships.

Smooth Line With Circle

Represents a smooth transition or flow between elements. It could be used in scenarios where gradual change or influence is depicted.

Straight Line

Represents a simple association or direct relationship between two entities or classes in UML.

Tree Line

Represents hierarchical relationships, such as a parent class with child classes, or a main system branching into subsystems.

Wave Line

Typically used to represent asynchronous signals or connections that aren't continuous. It may also denote complex relationships or uncertain flows in certain custom diagrams.

Zigzag Line

This is often used to represent signals with interference or noise. In system design, it can be used to indicate a disrupted or unreliable connection.

[ Previous

Identifying Components ](/v0.9/guides/configuration-management/identifying-components)[ Next

Performance Management ](/v0.9/guides/performance-management)