You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/en/kanvas/advanced/performance/index.md
+247-7Lines changed: 247 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,9 +29,9 @@ Kanvas has a maximum limit of 1,000 components per design. If you exceed this li
29
29
A non-semantic component is a component that does not represent a meaningful entity in your design. For example, a textbox, a shape, a line, or a comment are all examples of non-semantic components. These components are used for annotation purposes only and do not have a direct relationship to the underlying infrastructure or application that you are modeling.
30
30
{{< /alert >}}
31
31
32
-
Kanvas allows up to 1,000 non-sematically meaningfull components per design. Some designs have a large number of comments. While comments are a valuable collaboration tool, excessive comments can impact the performance of your design. Consider archiving or deleting old comments to keep your design running smoothly.
32
+
Kanvas allows up to 1,000 non-semantically meaningful components per design. Some designs have a large number of comments. While comments are a valuable collaboration tool, excessive comments can impact the performance of your design. Consider archiving or deleting old comments to keep your design running smoothly.
33
33
34
-
#### Maxiumum Number of Orchestrated Components (semantically meaningful components)
34
+
#### Maximum Number of Orchestrated Components (semantically meaningful components)
35
35
36
36
{{< alert type="note" title="What is a Semantic Component?" >}}
37
37
A semantic component is a component that represents a meaningful entity in your design. For example, a server, a database, or a network switch are all examples of semantic components. These components have a direct relationship to the underlying infrastructure or application that you are modeling.
@@ -55,7 +55,7 @@ Upon loading a design exceeds that exceeds 20 tags within a single design, Kanva
55
55
56
56
### Maximum Number of Users
57
57
58
-
Under the Free [subscription plan](https://layer5.io/pricing), Kanvas supports at least 20 users per design. As resources allow, up to 34 users may simulatanously collaborate within a given design. If you have a large team collaborating on a design, be mindful of the number of users active at the same time. Too many users can strain the performance of your design, leading to slower response times and potential data loss. See [Layer5 Cloud Networking Services](/cloud/self-hosted/planning/peer-to-peer-communication) for more details.
58
+
Under the Free [subscription plan](https://layer5.io/pricing), Kanvas supports at least 20 users per design. As resources allow, up to 34 users may simultaneously collaborate within a given design. If you have a large team collaborating on a design, be mindful of the number of users active at the same time. Too many users can strain the performance of your design, leading to slower response times and potential data loss. See [Layer5 Cloud Networking Services](/cloud/self-hosted/planning/peer-to-peer-communication) for more details.
59
59
60
60
### Impact of Images
61
61
@@ -82,7 +82,7 @@ Depending on the type of layer disabled, either specific components or all compo
82
82
83
83
> Even though you might hide components, those components are not deleted or removed from your design. These components are simply hidden from current view.
84
84
85
-
In the same way, as you toggle the evaluation of different types of relationships, understand that this releationships between your components still exist. Those relationsihps are simply **temporarily hidding** from view and the overhead of their evaluation eliminated while the respective type of relationship is disabled.
85
+
In the same way, as you toggle the evaluation of different types of relationships, understand that these relationships between your components still exist. Those relationships are simply **temporarily hidden** from view and the overhead of their evaluation eliminated while the respective type of relationship is disabled.
86
86
87
87
Using the Layers panel you control the level of sophistication or simplicity of the rendering of components and relationships in your designs. You can both simplify your design layout by removing unnecessary elements and improve performance simultaneously. Alternatively, you can increase the level of detail in your design by enabling additional layers and relationships, while controlling the balance between detail and performance.
88
88
@@ -99,8 +99,248 @@ To optimize performance, consider the following:
99
99
3. Remove any unnecessary images from your design.
100
100
4. Use image compression tools to reduce the size of your images before adding them to your design.
101
101
102
-
## Render Modes for Performance
102
+
## What Affects Performance
103
103
104
-
Kanvas provides multiple render modes that dramatically reduce rendering overhead for large designs. The Adaptive mode automatically switches between modes based on real-time performance measurements.
104
+
As your designs grow in complexity, certain design patterns can impact how smoothly Kanvas responds. Understanding these factors helps you create designs that remain fast and responsive.
105
105
106
-
For detailed information about each render mode and how to use Adaptive mode, see [Render Modes](/kanvas/advanced/render-modes/).
This page covers the design patterns and tuning levers that affect Kanvas performance. For the per-mode rendering ladder (Full, Medium, Wireframe, View-Only) and automatic fidelity management, see [Render Modes](/kanvas/advanced/render-modes/). For the drag-to-edge viewport pan and its per-render-mode size thresholds, see [Auto-pan on Drag](/kanvas/advanced/autopan/).
108
+
{{< /alert >}}
109
+
110
+
### Working with Grouped Components
111
+
112
+
When you create groups of components (placing multiple components inside a parent container), you might notice performance differences as the number of grouped items increases. Here's what you might experience:
113
+
114
+
**Signs of Performance Impact:**
115
+
- Dragging groups feels laggy or choppy
116
+
- Design takes longer to load and display
117
+
- Moving or resizing groups shows delayed response
118
+
- Screen updates appear slower during interactions
119
+
120
+
{{< alert type="warning" title="Large Groups" >}}
121
+
Groups containing 100 or more components may experience noticeable lag during drag operations. Consider breaking large groups into smaller, logical subgroups for better performance. If dragging across a design that extends past your viewport feels slow, see [Auto-pan on Drag](/kanvas/advanced/autopan/) for the per-render-mode thresholds that gate the drag-to-edge pan.
122
+
{{< /alert >}}
123
+
124
+
### How Kanvas Optimizes Your Design
125
+
126
+
Kanvas automatically works behind the scenes to keep your designs running smoothly:
127
+
128
+
**Smart Rendering:**
129
+
- Kanvas only updates the parts of your design that actually change, not the entire canvas
130
+
- Components outside your current view aren't fully rendered, saving resources
131
+
- Information badges and labels are displayed efficiently to prevent unnecessary redraws
132
+
133
+
**What This Means for You:**
134
+
The table below shows typical performance improvements you'll experience:
135
+
136
+
| Design Scenario | Without Optimization | With Optimization | Your Experience |
These optimizations work automatically. You don't need to configure anything to benefit from better performance.
144
+
{{< /alert >}}
145
+
146
+
## Managing Design Complexity
147
+
148
+
Kanvas provides many interactive features that enhance your design experience. Understanding how these features work together helps you maintain optimal performance.
149
+
150
+
### Features That Impact Performance
151
+
152
+
Your design experience includes several interactive capabilities that all work together:
153
+
154
+
**Interactive Features:**
155
+
-**Alignment guides** help you position components precisely as you drag them
156
+
-**Automatic relationship management** keeps connections between components updated
157
+
-**Tooltips and information displays** show helpful context as you work
158
+
-**Resize handles and controls** let you adjust component sizes smoothly
159
+
-**Visual grouping indicators** show which components belong together
160
+
161
+
When you're working with many components simultaneously, these features all activate together, which can sometimes slow down interactions like dragging.
162
+
163
+
{{< alert type="info" title="Performance Tip" >}}
164
+
If dragging feels slow, try these strategies:
165
+
- Hide unnecessary layers temporarily using the Layers panel
166
+
- Break your design into smaller, focused sections
167
+
- Work on one area of your design at a time
168
+
- Zoom in to focus on specific components
169
+
{{< /alert >}}
170
+
171
+
### Practical Tips for Better Performance
172
+
173
+
**When Creating Large Designs:**
174
+
1. Use the Layers panel to hide components you're not actively editing
175
+
2. Break complex designs into multiple smaller designs that you can link together
176
+
3. Group related components thoughtfully rather than creating very large groups
177
+
4. Remove old comments and annotations you no longer need
178
+
179
+
**When Experiencing Slowness:**
180
+
1. Check if you have many layers enabled that you're not using
181
+
2. Consider if your design has grown beyond 500 components (approaching the 1,000 limit)
182
+
3. Try hiding relationship layers temporarily while arranging components
183
+
4. Close and reopen your design to refresh the canvas
184
+
185
+
## How Kanvas Keeps Things Fast
186
+
187
+
Kanvas includes built-in intelligence to maintain smooth performance as you work on your designs. You don't need to manage these features manually—they work automatically in the background.
188
+
189
+
### Efficient Updates
190
+
191
+
**What Happens When You Make Changes:**
192
+
Think of your design like a document. When you edit a single paragraph, you wouldn't want your word processor to reformat the entire document. Similarly, Kanvas only updates the specific components you're changing, not your entire design.
193
+
194
+
**Benefits You'll Notice:**
195
+
- Quick response when you move or edit components
196
+
- Smooth interactions even in large designs
197
+
- Consistent performance throughout your work session
198
+
- Better experience when multiple people collaborate on the same design
Kanvas is designed to only update what needs updating, keeping your design responsive without requiring any configuration from you.
202
+
{{< /alert >}}
203
+
204
+
### Smooth Interactions During Continuous Operations
205
+
206
+
When you're actively dragging components, resizing groups, or panning around your design, Kanvas automatically manages how often the screen updates to ensure smooth, responsive interactions.
207
+
208
+
**What This Means:**
209
+
- Dragging feels fluid, not jerky
210
+
- Your cursor stays synchronized with the component you're moving
- The interface doesn't freeze or stutter during intensive operations
213
+
214
+
## Working with Different Zoom Levels
215
+
216
+
The zoom level you choose affects both what you see and how your design performs. Kanvas adapts its rendering based on your current zoom level to provide the best experience.
217
+
218
+
### Progressive Detail Display
219
+
220
+
Kanvas automatically adjusts the level of detail based on how far you're zoomed in or out:
221
+
222
+
**Zoomed Out (Overview Mode):**
223
+
- Shows component shapes and primary names
224
+
- Displays main relationships between components
225
+
- Provides a fast, high-level view of your entire design
226
+
- Perfect for understanding overall structure
227
+
228
+
**Medium Zoom (Working Mode):**
229
+
- Adds relationship details and secondary information
230
+
- Shows more component metadata
231
+
- Good balance between detail and performance
232
+
233
+
**Zoomed In (Detail Mode):**
234
+
- Displays all badges, annotations, and detailed information
Take advantage of zoom levels: zoom out to get an overview and rearrange major sections, then zoom in when you need to configure specific components in detail.
241
+
{{< /alert >}}
242
+
243
+
**Performance Benefits:**
244
+
When you're zoomed out, Kanvas doesn't spend resources rendering details you can't see anyway. This keeps panning and navigation fast even in large designs. As you zoom in, more information progressively appears, giving you the detail you need without overwhelming the display.
245
+
246
+
### Zoom Limits
247
+
248
+
Kanvas sets reasonable minimum and maximum zoom levels to ensure everything remains usable:
249
+
250
+
- Text stays readable without becoming pixelated
251
+
- Interactive handles remain large enough to click
252
+
- Badges and indicators maintain appropriate sizes
253
+
- The design looks good on all devices (desktop, tablet, mobile)
Start simple and add complexity gradually. This helps you identify exactly when performance starts to degrade, making it easier to adjust your design approach.
289
+
{{< /alert >}}
290
+
291
+
### Simple Performance Checks
292
+
293
+
You don't need specialized tools to evaluate performance. Just ask yourself:
294
+
295
+
**Responsiveness Check:**
296
+
- Does dragging components feel smooth or choppy?
297
+
- Do components respond immediately when you click them?
298
+
- Can you pan around the design without lag?
299
+
300
+
**Loading Time Check:**
301
+
- Does your design load within a few seconds?
302
+
- Are badges and indicators visible quickly?
303
+
- Does the design feel "ready" when it first appears?
304
+
305
+
**Interaction Check:**
306
+
- Can you resize components smoothly?
307
+
- Do relationships update without delay?
308
+
- Does the interface feel responsive or sluggish?
309
+
310
+
### Using Browser Developer Tools (Optional)
311
+
312
+
For more detailed performance analysis, you can use your browser's built-in developer tools:
313
+
314
+
1.**Open Developer Tools**: Press F12 (Windows/Linux) or Cmd+Option+I (Mac)
315
+
2.**Navigate to Performance Tab**: Look for the "Performance" or "Profiler" tab
316
+
3.**Record an Interaction**: Click the record button, perform an action (like dragging), then stop recording
317
+
4.**Review Results**: Look for long operations or frame drops that indicate performance issues
Performance optimization is an ongoing priority. As Kanvas evolves, your existing designs will automatically benefit from new performance enhancements.
336
+
{{< /alert >}}
337
+
338
+
## Render Modes and URL Overrides
339
+
340
+
Kanvas can paint the same design at four distinct fidelity levels — **Full**, **Medium**, **Wireframe**, and **View-Only** — and can switch between them automatically via **Adaptive Render Mode** based on live render and interaction latency. The lower-fidelity modes suppress badges, overlays, and texture work, so they stay fast on large designs while keeping the same underlying components, relationships, and metadata.
341
+
342
+
Render modes are the primary performance lever once a design grows past a few hundred components. Rather than duplicate the details here, see:
343
+
344
+
-[Render Modes](/kanvas/advanced/render-modes/) — what each mode renders, the per-mode feature-size gates, and how Adaptive mode decides when to upshift or downshift.
345
+
-[Auto-pan on Drag](/kanvas/advanced/autopan/) — the most visible feature that is gated per render mode (autopan disables itself on graphs past 100 / 500 / 1,000 elements for Full / Medium / Wireframe respectively).
346
+
-[Design Render Quality](/kanvas/advanced/url-parameters/) — URL parameters (`render=full|medium|wireframe|viewOnly`, `adaptive=true`) for forcing a render mode or enabling adaptive behavior on a specific link.
0 commit comments