Component Shape Guide

As a best practice, users are encouraged to select an existing or create acustom shape for their components to best visually signify the function of their component.

Currently, the circle is used as the default shape for new components. However, if users or contributors have alternative shapes they believe better suit a particular component, they are encouraged to create new custom components using the Shape Builder extension at https://shapes.meshery.io.

Although the usage of the components is divided into categories, some shapes serve as a universal representation of particular components.

Below are all the shapes with their current usage in a general context.

Barrel

A shape resembling a 3D barrel, with both the top and bottom edges appearing rounded. This shape can be used to represent data storage, such as databases or repositories.

Bottom Round Rectangle

A unique shape where only the bottom corners are rounded. This can be useful to indicate hierarchical relationships or to create a visual distinction from other rounded shapes.

Circle

The default shape for nodes, displayed as an oval. This shape is useful for general-purpose nodes where no special distinction is required.

Concave Hexagon

A six-sided shape with one or more inward curves, creating a star-like appearance, useful for special types of nodes that need to stand out distinctly.

Crescent

A shape resembling a crescent moon, which can be used to represent phases, growth, or transition nodes within a graph.

Cut Rectangle

A rectangle with corners that are cut off or beveled. This shape gives a more modern and distinct appearance, often used to highlight important nodes or different types of data.

Diamond

A four-sided shape oriented at 45 degrees, resembling a diamond. It is typically used for decision points in flowcharts or to represent special conditions or states.

Generic Node

A simple, often circular or rectangular shape used as a placeholder for unspecified or generic data points.

Heptagon

A polygon with seven straight sides and angles. This shape is less common but can be used to represent specific or unique data types that require distinction from other polygonal shapes.

Hexagon

A six-sided polygon, often used to represent complex data types or multi-faceted entities. This shape is popular in visualizations that require a compact, yet distinct, representation.

Left Triangle

A triangular shape pointing to the left, often used to indicate directional flow or hierarchical steps in processes or data sequences.

Octagon

An eight-sided polygon, providing another option for representing complex data types. The additional sides make it stand out more compared to hexagons or pentagons.

Parallelogram

A four-sided shape with opposite sides parallel, used to represent data processing steps or functions with directional flow.

Pentagon

A five-sided polygon often used for specific classifications of data. Its unique shape helps to quickly distinguish it from other polygonal shapes.

Plus(Polygon)

A polygonal shape with any number of points, allowing for highly customizable node representations to fit specific data needs.

Polygon

A custom point polygon allows the creation of irregular, user-defined polygonal shapes for graph nodes.

Rectangle

A four-sided shape with straight edges and right-angle corners. It is a versatile shape often used to represent data types like documents, processes, or simple entities.

Rhomboid

A quadrilateral with opposite sides parallel but not perpendicular, creating a skewed rectangle look. Useful for depicting relationships that aren't straightforward or direct.

Right Rhomboid

A rhomboid where one angle is a right angle, offering a distinctive look for special types of data connections or relationships.

Round Diamond

A diamond shape with rounded corners, used to indicate special conditions or decision points while maintaining a softer visual appeal.

Round Heptagon

A seven-sided polygon with rounded corners, less common but useful for unique data representations that require distinction.

Round Hexagon

A six-sided polygon with rounded corners, providing a less angular look for complex data types.

Round Octagon

An eight-sided polygon with rounded corners, offering another distinct and less angular representation for complex data.

Round Rectangle

Similar to a rectangle but with rounded corners, providing a softer, more approachable look. This shape is often used to visually distinguish nodes from standard rectangular nodes, indicating a special status or different type of data.

Round Tag

A tag shape with rounded edges, offering a softer visual cue for categorized nodes.

Round Triangle

A triangular shape with rounded corners, providing a softer look while still indicating hierarchy or direction.

Slanted Parallelogram

A four-sided shape with opposite sides parallel but slanted, creating a dynamic appearance often used to indicate processes or flows that have a directional aspect.

Star

A shape with multiple points radiating outwards, typically used for highlighting special or notable nodes. It draws immediate attention, making it ideal for critical data points or focal nodes.

Tag

A shape resembling a label or tag, useful for categorized or labeled data nodes.

TextBox

A rectangular shape representing a text entry or display area, useful in diagrams to show nodes that contain text information or comments.

Trapezoid

A four-sided shape with one pair of parallel sides, used to indicate hierarchical relationships or steps in a process.

Triangle

A simple three-sided shape, often used to represent hierarchical data or directional flows. It is useful for indicating movement, direction, or hierarchical relationships within a network.

Vee

A shape resembling the letter "V", often used to show directionality or a splitting point in flowcharts.

XWing

This shape resembles the Star Wars X-Wing fighter, potentially useful for visually representing nodes that have multiple connections or interactions, symbolizing complexity and centrality.

Here’s how the Deployment component appears in different contexts:

Deployment component with its distinctive rounded-rectangle shape and badge

Deployment icon in the component selection panel

Deployment component as seen in the cluster resource overview

Suggested Reading

• Edges Style Guide - Visualize and manage complex cloud-native relationships with Kanvas' dynamic edge styling in Kubernetes architecture.
• Import and Export Designs - Manage and transfer Meshery designs seamlessly through import and export using CLI and UI.
• kubectl MeshSync Snapshot - A native kubectl plugin for conveniently synchronizing the state of your cluster with Meshery Server.
• Helm Kanvas Snapshot - Helm CLI plugin to visually render a snapshot of your Helm charts.
• Kanvas - Collaborative cloud native visual designer to design and manage infrastructure and applications.
• Kanvas Snapshot - Screenshot service provided via Kanvas to capture a snapshot of your infrastructure at any given time.
• Merging Designs - Treat other designs as templates or building blocks and combine your designs with others and power-up your designs.
• Publishing a Design - Learn to publish and manage designs in Meshery with clear state transitions, role-based permissions, and common workflow FAQs.
• 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.