Introduction to Diagrams (Premium Only)

[info-creaticode]

Description

The diagram is a very useful tool for coding. You can use diagrams for charting, drawing, brainstorming, or making other types of documents.

 

Adding a Diagram

You can add one diagram to each sprite. If you need multiple diagrams in a project, you can simply use multiple sprites.

As shown, when you switch to the “Diagram” tab the first time, you will see a button that says “Initialize Diagram”. Clicking that button will get you an empty diagram in a few seconds.

After this step, it will be very easy to switch between the code and the diagram.

 

Auto-Saving

Every change you make on the board will be automatically saved. You do not need to do anything. When you reload the page, the latest content will be loaded:

 

Sharing the Diagram

When your project is private, then others can not see the diagrams inside it.

When a project is shared, the diagrams in it will be visible by others. However, they will not be able to change it in any way. For example, in this demo, the owner user is on the left, and a guest user is on the right.

If you toggle the status button from “closed” to “open”, then others can make changes the same way as the project owner. This way, multiple users can work together on one board. Note that the guest users would need to reload the project to get the updated permission.

 

Templates

When you click the template button on the left toolbar, a library window of templates will pop out. You can quickly browser different types of diagrams, and click any of the templates to get started.

 

Zooming In/Out

You can easily zoom in or out using the scroll wheel on your mouse. If you do not have a scroll wheel, you can also click the “-” and “+” buttons on the bottom right.

 

Selecting Objects

You can select an object by clicking on it using the left mouse button. You can drag the selected object to a different position. If you click on that selected object again, you will be able to type into it.

You can also click on the empty space, then drag the left mouse button to select many objects in a rectangle region. Click on the empty space again to deselect them.

You can also press down the CTRL key and then the A key, which will select all objects on the board.

 

Deleting Objects

When one or multiple objects are selected, you can press the “DELETE” key on your keyboard to delete them. Alternatively, you can right click on that object, then select “delete” on the menu.

 

Shifting the Entire Board

To view different parts of the diagram, you can drag the board using the right mouse button. If no object is selected, you can also use the 4 arrow keys on the keyboard to shift the board.