<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Getting Started with Designs on Layer5 Documentation</title><link>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/</link><description>Recent content in Getting Started with Designs on Layer5 Documentation</description><generator>Hugo</generator><language>en</language><atom:link href="https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/index.xml" rel="self" type="application/rss+xml"/><item><title>Starting from scratch</title><link>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/starting-scratch/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/starting-scratch/</guid><description>&lt;h2 id="step-1-accessing-designer-mode" class="heading-link">
 Step 1: Accessing Designer Mode
 &lt;a href="#step-1-accessing-designer-mode" class="heading-anchor" aria-label="Permalink to this heading">🔗&lt;/a>
&lt;/h2>
&lt;p>Upon entering Kanvas, seamlessly transition to the &amp;ldquo;Designer&amp;rdquo; mode by selecting the &amp;ldquo;Designer&amp;rdquo; tab from the main menu. This action dynamically switches to the Designer mode, initializing the necessary tools for design creation.&lt;/p>
&lt;p>&lt;strong>Example Analogy:&lt;/strong>
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.&lt;/p></description></item><item><title>Importing a Design</title><link>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/import-designs/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/import-designs/</guid><description>&lt;p>&lt;a href="https://kanvas.new">Kanvas&lt;/a> 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.&lt;/p>

&lt;h2 id="accessing-the-import-functionality" class="heading-link">
 Accessing the Import Functionality
 &lt;a href="#accessing-the-import-functionality" class="heading-anchor" aria-label="Permalink to this heading">🔗&lt;/a>
&lt;/h2>
&lt;p>There are multiple ways to import a design.&lt;/p>










&lt;ul class="nav nav-tabs" id="tabs-0" role="tablist">
 &lt;li class="nav-item">
 &lt;button class="nav-link active"
 id="tabs-00-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-00" role="tab"
 data-td-tp-persist="drag and drop" aria-controls="tabs-00-00" aria-selected="true">
 Drag and Drop
 &lt;/button>
 &lt;/li>&lt;li class="nav-item">
 &lt;button class="nav-link"
 id="tabs-00-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-01" role="tab"
 data-td-tp-persist="from kanvas toolbar" aria-controls="tabs-00-01" aria-selected="false">
 From Kanvas Toolbar
 &lt;/button>
 &lt;/li>&lt;li class="nav-item">
 &lt;button class="nav-link"
 id="tabs-00-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-02" role="tab"
 data-td-tp-persist="from layer5 cloud" aria-controls="tabs-00-02" aria-selected="false">
 From Layer5 Cloud
 &lt;/button>
 &lt;/li>&lt;li class="nav-item">
 &lt;button class="nav-link"
 id="tabs-00-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-03" role="tab"
 data-td-tp-persist="via github integration" aria-controls="tabs-00-03" aria-selected="false">
 Via GitHub Integration
 &lt;/button>
 &lt;/li>
&lt;/ul>

&lt;div class="tab-content" id="tabs-0-content">
 &lt;div class="tab-body tab-pane fade show active"
 id="tabs-00-00" role="tabpanel" aria-labelled-by="tabs-00-00-tab" tabindex="0">
 &lt;p>You can drag a file from your local computer directly onto the Kanvas canvas to import a design.







&lt;div class="md__image">
 &lt;img id="[411 425 299 28 276 445]" src="https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/images/importing-designs/drag-drop.gif" onclick="openModal(this.id)" alt="Drag and Drop Import" 
 class="md-image-responsive" />
&lt;/div>&lt;/p></description></item><item><title>Creating Relationships</title><link>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/creating-relationships/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/creating-relationships/</guid><description>&lt;h2 id="benefits-of-using-relationships" class="heading-link">
 Benefits of Using Relationships
 &lt;a href="#benefits-of-using-relationships" class="heading-anchor" aria-label="Permalink to this heading">🔗&lt;/a>
&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>Improved Visibility&lt;/strong>: Clear visual representation of connections between components&lt;/li>
&lt;li>&lt;strong>Enhanced Design&lt;/strong>: Make informed decisions about component selection and placement&lt;/li>
&lt;li>&lt;strong>Automated Configuration&lt;/strong>: Relationship-driven actions automate configuration of components&lt;/li>
&lt;li>&lt;strong>Increased Flexibility&lt;/strong>: Use of selectors and operators provides flexibility in defining relationships&lt;/li>
&lt;li>&lt;strong>Better Understanding&lt;/strong>: Easily comprehend the overall structure and dependencies of your managed systems&lt;/li>
&lt;/ul>

&lt;h2 id="what-are-relationships" class="heading-link">
 What are Relationships
 &lt;a href="#what-are-relationships" class="heading-anchor" aria-label="Permalink to this heading">🔗&lt;/a>
&lt;/h2>
&lt;p>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&amp;rsquo;s architecture. Relationships are highly expressive, capturing various forms of interaction between interconnected components regardless of their genealogy.&lt;/p></description></item><item><title>Working with Components</title><link>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/working-with-components/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/working-with-components/</guid><description>&lt;h2 id="configuring-components" class="heading-link">
 Configuring Components
 &lt;a href="#configuring-components" class="heading-anchor" aria-label="Permalink to this heading">🔗&lt;/a>
&lt;/h2>
&lt;p>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.&lt;/p>
&lt;p>






&lt;div class="md__image">
 &lt;img id="[457 128 174 19 218 300]" src="https://deploy-preview-913--bejewelled-pegasus-b0ce81.netlify.app/kanvas/getting-started/images/working-with-components/configuration-panel.png" onclick="openModal(this.id)" alt="configuration-panel" 
 class="md-image-responsive" />
&lt;/div>&lt;/p>
&lt;p>&lt;strong>Steps to Configure Components:&lt;/strong>&lt;/p>
&lt;ol>
&lt;li>
&lt;p>&lt;strong>Select the Component:&lt;/strong> Click on the component on the Kanvas canvas that you want to configure. This action opens the Configuration Panel.&lt;/p></description></item></channel></rss>