Designer on Layer5 Documentation

Performance Limits and Tuning

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

Kanvas is designed to handle a wide range of infrastructure and application configurations. However, there are some performance limits that you should be aware of when working with Kanvas. This guide will help you understand these limits and provide tips for tuning your environment for optimal performance.

Performance Limits 🔗

Maximum Number of Components 🔗

Kanvas has a maximum limit of 1,000 components per design. If you exceed this limit, you may experience performance issues such as slow loading times and laggy interactions. To avoid hitting this limit, consider breaking your design into smaller, more manageable designs.

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:

Design Render Quality

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

By default, Kanvas optimizes the rendering of your designs to ensure good performance and responsiveness. This means that some computationally intensive visual elements, such as advanced relationships like TagSets (groups of components visually demarcated), might not be displayed initially to reduce system load.

To learn more about defining relationships between components, including the detailed use and creation of TagSets, please see the Creating Relationships | Layer5 Documentation.

Enable Full Render Mode 🔗

To activate this full render mode, you will need to add the render=full parameter to your Kanvas design URL. This mode ensures all elements, including TagSets, are displayed, which might otherwise be hidden for performance optimization.

Getting Started with Designs

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

Use Kanvas for your Diagrams 🔗

Dev Env Documentation

The dev environment is an often overlooked but critical part of an organization’s infrastructure. Knowing what clusters and services are used, how to run and test services locally, and how to troubleshoot are critical parts for getting a team up and running quickly. With Layer5, you can easily embed designs into your How To and Getting Started guides, making it easy to create, maintain and update concise documentation.

Starting from scratch

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

Step 1: Accessing Designer Mode 🔗

Upon entering Kanvas, seamlessly transition to the “Designer” mode by selecting the “Designer” tab from the main menu. This action dynamically switches to the Designer mode, initializing the necessary tools for design creation.

Example Analogy: Think of Designer mode as your blueprint studio. Just like architects use specific tools to design buildings, you, as a cloud architect, use Kanvas to design your cloud native applications.

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:

Validating Designs

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

How Validation Works 🔗

Meshery uses static analysis to verify your design. It checks all components within your design and all configured and unconfigured properties of your components against well-defined schemas based on Meshery Models.

This comprehensive validation ensures that:

The design adheres to the expected structure and format.
All components are valid and recognized by Meshery.
There are no missing required configurations.

Performing Validation 🔗

To validate your design, navigate to the Actions button at the top of the Design canvas.

Whiteboarding

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

With Kanvas Designer you can draw shapes, lines, text, add custom styles, images and icons to represent the components and relationships of your Kubernetes clusters as you see fit. Kanvas supports freestyle design, meaning that you can customize the appearance and layout of your diagrams without any constraints. Kanvas also enables real-time collaboration, meaning that you can invite others to join your sessions and edit the diagrams together.

Using the Shapes Palette 🔗

Converting Shapes 🔗

Existing shapes can be converted to other shapes. For example, you can convert a rectangle to a circle, or a triangle to a rectangle. This is useful if you want to change the shape of a shape without losing its position, size, and formatting. If you’d rather use a different shape while keeping the same position, size, and formatting, you can change the shape.

Dry Running a Design

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

A dry run in Meshery simulates the deployment of your design in the selected target environment without making any actual changes. This step is highly beneficial as it helps identify potential issues before they occur, ensuring a smoother and more reliable deployment process.

Performing Dry Run 🔗

Navigate to the Actions button at the top of the Design canvas.
Click on the Dry Run icon.

Importing a Design

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

Kanvas acts as a powerful bridge, enabling you to import your existing application and infrastructure configurations from a wide variety of standard formats. It transforms these configurations into visual, editable, deployable, and shareable designs. This guide covers how to import designs, the supported formats, and important considerations.

Accessing the Import Functionality 🔗

There are multiple ways to import a design.

You can drag a file from your local computer directly onto the Kanvas canvas to import a design.

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.

Undeploying Designs

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

To undeploy the resources

Navigate to the Actions button at the top of the Design canvas.
Click on the Undeploy icon.

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:

Creating Relationships

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

Benefits of Using Relationships 🔗

Improved Visibility: Clear visual representation of connections between components
Enhanced Design: Make informed decisions about component selection and placement
Automated Configuration: Relationship-driven actions automate configuration of components
Increased Flexibility: Use of selectors and operators provides flexibility in defining relationships
Better Understanding: Easily comprehend the overall structure and dependencies of your managed systems

What are Relationships 🔗

Relationships in Meshery characterize how components connect and interact with each other. They define the structure and dependencies between components in your designs, providing a clear representation of your infrastructure’s architecture. Relationships are highly expressive, capturing various forms of interaction between interconnected components regardless of their genealogy.

Deploying Designs

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

To deploy a design, navigate to the Actions button at the top of the Design canvas.
Click on the Deploy icon.
This opens a modal that will take you through all the steps before the final deployment.
Click on Open In Operator to see the pre-filtered view of the deployed resources in the cluster
Click Finish

Deployment Errors 🔗

Missing Namespace: This error occurs when you attempt to create a Kubernetes resource without specifying a namespace. Kubernetes requires that all resources have an associated namespace.

Exploring Designer

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

Collaborate with your team to create a Design. Enable collaboration mode using the Options mode available in the Kanvas canvas

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.

Understanding Relationships

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

What are Relationships? 🔗

Relationships define the nature of interaction between interconnected components in Kanvas. They represent various types of connections and dependencies between components no matter the genealogy of the relationship such as parent, siblings, binding.

Types of Relationships 🔗

Relationships are categorized into different kinds, types, and subtypes, so that can be expressive of the specific manner in which one or more components relate to one another.

Working with Components

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

Configuring Components 🔗

Once you’ve added components to your design in Kanvas, configuring them is a critical step in customizing and optimizing your cloud-native infrastructure. Configuring components allows you to fine-tune their behavior, set specific parameters, and ensure they meet the precise needs of your architecture.

Steps to Configure Components:

Select the Component: Click on the component on the Kanvas canvas that you want to configure. This action opens the Configuration Panel.

Working with Designs

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

Designs 🔗

Designs are declarative, descriptive characterizations of how your Kubernetes infrastructure should be configured. Designs are versioned and can be shared with other users and teams. Designs are the primary tool for collaborative authorship of your infrastructure and services.

Using Designs 🔗

Controlling Access to Designs 🔗

When creating a new design, by default its visibility will be set to public unless you are an active Layer5 Cloud subscriber, in which case you can change this default to private.

Cloning a Design

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

Steps to cloning a design from Catalog using Kanvas 🔗

Switch to Kanvas Designer mode, if not already in it.
In the left ☰ menu, click New → From a template.
Select a design from the list that appears in the panel.
A modal will pop up requesting you to clone (create a copy of) the design you’ve selected.

Collaborative Editing

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

Page under construction.

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.

Design Review Mechanics

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

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.

Design Reviews in Kanvas

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

Design Reviews: Adding Comments

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

Kanvas Designer Overview

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

Exploring Designer

Pinning Models to Dock

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

Transcript:

Five has found that he frequently references the same set of models while designing. If you know that you’ll be using components from a model frequently, you can pin that model for easy retrieval of its components. To pin a model to the dock in Layer5 Kanvas, click the pin icon next to the model. The model will now be accessible in the dock for quick use.

Publishing Designs

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

Publishing a design lets you make your content visible to any anonymous visitor of https://cloud.layer5.io/catalog and any Layer5 Cloud user. Anyone with the link can view the design. You can publish the design into your Cloud Catalog.

Designer on Layer5 Documentation

Performance Limits and Tuning

Performance Limits 🔗

Maximum Number of Components 🔗

Understanding Design Components

Core Component Categories 🔗

Semantic Components (Orchestratable) 🔗

Design Render Quality

Enable Full Render Mode 🔗

Getting Started with Designs

Use Kanvas for your Diagrams 🔗

Starting from scratch

Step 1: Accessing Designer Mode 🔗

Understanding Edge Styles

Understanding Edge Types 🔗

Validating Designs

How Validation Works 🔗

Performing Validation 🔗

Whiteboarding

Using the Shapes Palette 🔗

Converting Shapes 🔗

Dry Running a Design

Performing Dry Run 🔗

Importing a Design

Accessing the Import Functionality 🔗

Interpreting Component Badges

A Tale of Two Modes

What Each Corner Means 🔗

Undeploying Designs

Understanding Tool Modes

Interacting with Components 🔗

Whiteboarding

Key Functionality 🔗

Enable the Whiteboarding Beta Feature 🔗

Creating Relationships

Benefits of Using Relationships 🔗

What are Relationships 🔗

Deploying Designs

Deployment Errors 🔗

Exploring Designer

Reviewing Designs

Understanding Relationships

What are Relationships? 🔗

Types of Relationships 🔗

Working with Components

Configuring Components 🔗

Working with Designs

Designs 🔗

Using Designs 🔗

Controlling Access to Designs 🔗

Cloning a Design

Steps to cloning a design from Catalog using Kanvas 🔗

Collaborative Editing

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 🔗

Design Review Mechanics

Design Reviews in Kanvas

Design Reviews: Adding Comments

Kanvas Designer Overview

Related Docs 🔗

Pinning Models to Dock

Publishing Designs