Edges Style Guide

In Meshery, an edge is a visual representation of a relationship or connection between two or more components within your infrastructure. Occasionally, edges might be self-referential, for example, a network connection over a loopback interface in a Kubernetes Pod. Relationships can be of various types, defining how the components interact, depend on, or influence each other.

Meshery supports multiple types of relationships, such as network connections, bindings, permissions, and hierarchical associations. See Relationships for a set of examples.

From a design perspective, edge styles provide a clear and intuitive way to understand the complex interdependencies in your cloud-native environment. From an operational perspective, edge styles can change dynamically along with your infrastructure, reflecting the real-time state of your components and their relationships. By visualizing edges, Meshery helps you identify potential bottlenecks, troubleshoot issues, and optimize the performance of your applications.

Meshery Designs carefully consider the visual style used for edges, imbuing meaning behind their weight, color, stroke, and arrowhead styles. The following list represents all edge styles and their current meaning in a general context.

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

• Component Shape Guide - Kubernetes architecture deployment and architecture diagramming tool for cloud native applications - Kanvas.
• Importing existing applications - Import your existing applications into Meshery.
• Importing a Design - Import your existing application definitions and infrastructure configuration into Meshery.
• Kanvas Snapshot - Screenshot service provided via Kanvas to capture a snapshot of your infrastructure at any given time.
• Kanvas - Collaborative cloud native visual designer to design and manage infrastructure and applications.
• Merging Designs - Treat other designs as templates or building blocks and combine your designs with others and power-up your designs.
• Publishing a Design - Publishing a design lets you make your content visible to any anonymous visitor with the link.
• Sharing a Design - Sharing a design lets you make your content visible to any anonymous visitor of meshery.io/catalog and any Meshery Cloud user.
• Working with Tags - Tags can be used to visually group components.