Canvas functionalities

Auto-layout
If you try out the new canvas with an existing bot, your bot dialogs will appear as overlapping. The auto-layout functionality is there to solve that.
To use auto-layout:
1.From your canvas, click on the auto-layout button at the bottom left of your screen
2.Your dialogs are now spread over the canvas in a non-overlapping fashion. 
3.Feel free now to drag and drop each dialog where you like it the best!
Auto-layout button
Use the auto-layout functionality to work around your dialogs appearing in piles.
Drag and drop 
To add new dialog states to your bot with the new canvas, simply drag and drop them directly from the top-right corner to anywhere you like in the canvas.
Drag and drop dialogs to the canvas
Arrow as connections
There are two types of connection arrows. The first one is the "go-to" connection, which serves as an actual flow connection, guiding the conversation from one component to another. Therefore, an arrow is actually a go-to connection! The second type is the "parent-child" connection, designed primarily as a visual aid to help you organize your flows. While it doesn't create functional links between components, it offers a tool for visually structuring your bot dialog in a coherent manner.
Bear in mind that go-to connections between bot messages are not the same as the Go-To dialog type. To be reminded of the difference, check this page.
Connect two components with go-to connection
To link two components with arrows, click the Go To dot at the bottom right corner of a node, after which you're able to connect it with any other existing bot dialog or you can just create a new one if you don't have a dialog available yet.
Go To dot from where you can draw connections
​
From the Go To dots, draw connections between components.
Connect two components with parent-child connection
To effectively organize your bot dialog, use parent-child visual connection. It will be easier to follow the conversation flow and understand how different dialogs interact. This is especially useful when connecting bot dialogs with intent blocks with contexts, providing a clear and intuitive way to organize your bot's flow.
Parent-child connection enhances visualization when intents and bot dialog blocks lack go-to connections.
​
Delete arrows
Both go-to and parent-child arrows can be deleted by hovering over them and clicking the trash icon. When doing that, the 'go to' condition at the bottom of your dialog will also be deleted. 
Click on the trash icon from an arrow to delete a flow connection
Connection settings
You have the flexibility to move arrows back and forth at your convenience to achieve the perfect positioning. Additionally, you are able to modify their colours to suit your preferences. 
Should you ever want to revert to the previous arrow design, a simple reset option allows you to restore the original arrows instantly.
Components that can be connected
You can draw arrows from and to the following components:
Intents
Example of connection between an intent and a dialog type
Dialog types
Example of flow connection between several dialog types
Go-To options
Example of connection between Go-To conditions and a dialog type
Buttons
Example of connections between buttons in a dialog and other dialog types
Clear view of components
With the new canvas, we wanted to bring to you as much information as needed from the first glance. Here is what you can see straight away from your flows:
Intents and contexts
Intents now appear in the actual flow of your bot within green boxes.
How an intent is displayed on the new canvas
Input and output contexts are represented on the intents boxes by an icon pointing inwards (for input context) or downwards (for the output context). You can read was context is there by hovering the icon.
Hover the context icon to see what context is required for that intent.
Dialog details
With the new canvas, you get previews of your bot messages, buttons, pictures and much more without needing to open the components! 
Example of previews from a piece of a flow
​
Duplicate, copy and delete dialogs
By clicking on the three dots at the top right corner of a dialog box, you can now either duplicate a dialog, copy its name, or delete it.
The play button to the left of the three dots will trigger that dialog state in the Test your bot window allowing you to see what's happening.
​