Component Shape Guide
Inside Kanvas, the allocation of specific shapes to signify various purposes creates a coherent and intelligible visual representation of intricate designs. 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 propose them.
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.
Suggested Reading
- Edges Style Guide - Visualize and manage complex cloud-native relationships with Kanvas' dynamic edge styling in Kubernetes architecture.
- 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.