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:
- What it means: A semantic relationship. This represents a real, functional connection that Meshery understands and can manage, such as a network link or a volume mount.
- When youβll see it: These lines indicate active relationships between components, showing how they interact and communicate. The dotted pattern represents dynamic connections, while arrowheads show the direction of data flow or dependency.
- Solid Line:
- What it means: A non-semantic annotation. This is a visual note or organizational aid for human interpretation only. Mesheryβs engine ignores these connections.
- When youβll see it: These lines represent static or conceptual relationships between components. They help visualize structural connections or highlight specific component groupings without implying active data flow.
Color: A Secondary Cue
Color provides an additional hint about an edgeβs nature.
- Green / Teal:
- This is the default color for non-semantic annotations, helping them stand out from functional connections.
- Blue / Grey:
- These are the typical default colors for semantic relationships.
Edge Style Gallery
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.
Suggested Reading
- Configuring your Cloud Native Infrastructure and Applications - Learn how to use Meshery Designs effectively
- Creating a Meshery Design - Learn how to create a Meshery design from scratch or from a template.
- Create Models - A comprehensive guide on creating models in Meshery, covering both CLI and UI methods.
- Exporting Models - Exporting Meshery Model as an OCI or Compress file
- Identifying Meshery Components - A guide to help you identify and understand the various component icons, shapes, and visual styles used across the Meshery UI.
- Importing Models - Importing Existing Model and CRD-based Infrastructure Configurations into Meshery as Model
- Cloud Native Design Patterns - Meshery applies DRY principle when managing the configuration of cloud native infrastructure .
- Push or Pull a Model Image - Push or pull a model image to or from an OCI-compatible image repository.