Exploring Designer on Layer5 Documentation

Understanding Design Components

Mon, 01 Jan 0001 00:00:00 +0000

When you’re designing and visualizing in Kanvas, you’ll encounter a rich library of components. This guide will help you understand what these components mean and how they behave in your designs.

Core Component Categories 🔗

Components in Kanvas fall into two fundamental categories, distinguished by whether they can be orchestrated (managed) during deployment.

Semantic Components (Orchestratable) 🔗

These components represent actual infrastructure resources that Kanvas can understand and manage during deployment. They are “meaningful” because they map directly to real infrastructure elements. Examples include:

Understanding Edge Styles

Mon, 01 Jan 0001 00:00:00 +0000

When you connect components in Kanvas, the line you draw is called an edge. Each edge visually represents a relationship between your components. This guide explains how to use different edge styles to create clear and effective infrastructure designs.

Understanding Edge Types 🔗

In Kanvas, there are two main types of edges, each serving a different purpose:

Interpreting Component Badges

Mon, 01 Jan 0001 00:00:00 +0000

Ever wondered what those little icons in the corners of your components are? Think of them as your component’s real-time status display. These indicators, called badges, give you at-a-glance information about everything from configuration errors to live performance.

A Tale of Two Modes

A badge’s meaning changes completely depending on your current mode. In Designer, badges help you build a valid blueprint. In Operator, they switch to providing real-time operational data from your live instances.

What Each Corner Means 🔗

While the specific badges change depending on your mode, they all follow a consistent placement philosophy. Badges are organized into four quadrants around a component, with each corner reserved for a specific type of information.

Understanding Tool Modes

Mon, 01 Jan 0001 00:00:00 +0000

Kanvas Designer offers three modes: Default, Pencil, and Connector, which behave differently based on the context in which they are used. Understanding these modes is essential for effectively interacting with components and the canvas.

You can switch between mouse modes using hotkeys or tool selection. Here are hotkeys that control your mode:

Hotkeys	Description
	Temporarily enables the alternative mouse mode (default mode vs pan mode)
	Switches to pan mode (hand icon)
	Switches to default mode irrespective of which mode you are currently using.

Interacting with Components 🔗

Action	Cursor Style	Behavior
Hover	`default (arrow)`	Nothing
Click-and-drag	`move`	Moves component in the direction of the mouse
Click	`default (arrow)`	Displays component toolbar, resize box, and connection handles
Double-click (component)	`pointer`	Opens the component configurator
Double-click (textbox)	`text`	Enables text editing inside the component
Right-click	`default (arrow)`	Opens the circular component context menu
Click-and-hold	`crosshair`	Initiates box selection for selecting multiple components
Scroll wheel	`default (arrow)`	Pan up or down
Scroll wheel + CMD/CTRL	`default (arrow)`	Zoom in/out
Horizontal scroll wheel	`default (arrow)`	Pan left or right

Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs.

Whiteboarding

Mon, 01 Jan 0001 00:00:00 +0000

The whiteboarding feature introduces versatile, freestyle drawing capabilities within Kanvas. Enabling the whiteboard feature augments your ability to diagram with a suite of predefined shapes, and pen and pencil annotation, allowing you full freedom of expression of your engineering diagrams.

Key Functionality 🔗

Drawing Tools Integration
- Incorporates a comprehensive set of drawing tools resembling popular whiteboard applications.
- Enables you to draw shapes, group components , annotate, and highlight specific elements within the infrastructure design canvas.
Real-time Collaboration
- Facilitates simultaneous collaboration among multiple users within the tool.
- Supports live editing and instant visualization of changes made by collaborators.
Non-Invasive Annotations
- Annotations, shapes, or drawings created within the tool remain separate visual aids, not altering the actual infrastructure components.

Enable the Whiteboarding Beta Feature 🔗

If not already enabled, follow these steps to access the whiteboarding feature within Kanvas:

Reviewing Designs

Mon, 01 Jan 0001 00:00:00 +0000

Kanvas’s Designer enables you to place comments “inline” with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later.

Example of comments in Designer

Your comment may be a request for design review, to offer feedback to peers, or to simply record notes.

Sharing Designs

Mon, 01 Jan 0001 00:00:00 +0000

In Kanvas, you can share your designs with other members of your organization and teams, and you can control access permissions. This page describes the different access types for designs and how to effectively use them.

Sharing Views

You can share and control access to Views in the same fashion as you do for Designs.

Understanding visibility levels 🔗

Designs have visibility statuses that defines who can access your designs. These options offer different levels of exposure for content within your workspaces:

Embedding Designs

Mon, 01 Jan 0001 00:00:00 +0000

Design Embedding enables you to export a design in a format that can be seamlessly integrated into websites, blogs, or platforms supporting HTML, CSS, and JavaScript. This embedded version provides an interactive representation of the design, making it easier to share with infrastructure stakeholders.

Embedding Your Design 🔗

To embed your Kanvas design, follow these steps:

Access Embed Option: Within the Kanvas Designer, select the design you wish to embed. Click on the export icon in the menu for the selected design. The export modal will appear, click on the “Embed” option.

Working with Tags

Mon, 01 Jan 0001 00:00:00 +0000

You can group components using tags. Tags are key-value pairs that help you organize and categorize components within your design. Tags can be used to visually group components. You can also use tags to filter components and view only those that match the tag criteria.

Related Concept

Kubernetes resources are capable of being assigned Label and Annotation key/value pairs. When pairs of Labels or Annotations match, a relationship is formed and visualized as shown below.

Grouping Components with Tags 🔗

To group components using tags, follow these steps.

Exporting Designs

Mon, 01 Jan 0001 00:00:00 +0000

Kanvas let’s you export a design in several formats, so you can:

keep versioned backups
collaborate offline
push artifacts to OCI-compatible registries or Helm repositories
integrate designs into CI/CD or GitOps pipelines
embed interactive diagrams in documentation and blogs

Export in Two Steps 🔗

Open the export menu Within the Kanvas Designer, select the design you wish to export in the design drawer. Click on the export icon in the menu for the selected design.
Pick an export format Choose the option that matches your workflow (see table below).

Publishing Designs

Mon, 01 Jan 0001 00:00:00 +0000

Publishing a design makes it visible to all Meshery Cloud users and anonymous visitors. This guide explains the publishing workflow, state management, permissions, and operational constraints.

Publishing Workflow 🔗

Step 1: Access Extensions UI 🔗

Navigate to Meshery Kanvas Designer from the main dashboard.

Publish designs through two methods. Click the info (“i”) button for details.

Exploring Designer on Layer5 Documentation

Understanding Design Components

Core Component Categories 🔗

Semantic Components (Orchestratable) 🔗

Understanding Edge Styles

Understanding Edge Types 🔗

Interpreting Component Badges

A Tale of Two Modes

What Each Corner Means 🔗

Understanding Tool Modes

Interacting with Components 🔗

Whiteboarding

Key Functionality 🔗

Enable the Whiteboarding Beta Feature 🔗

Reviewing Designs

Sharing Designs

Sharing Views

Understanding visibility levels 🔗

Embedding Designs

Embedding Your Design 🔗

Working with Tags

Related Concept

Grouping Components with Tags 🔗

Exporting Designs

Export in Two Steps 🔗

Publishing Designs

Publishing Workflow 🔗

Step 1: Access Extensions UI 🔗

Step 2: Select Design in Sidebar 🔗