iCraft Editor Basic Usage
Element Types
iCraft Editor contains 7 types of elements:
- Basic Geometries: Including cubes, cylinders, prisms, planes, etc., with editable geometric parameters
- 3D Models: Such as servers, storage devices, etc., with editable color, scale, and rotation parameters
- 3D Models with Images: Such as applications and software services, with customizable images and adjustable scale and rotation
- Images: Such as GCP, Azure, and other cloud service icons
- Icons: Such as AntDesign Icons, Box Icons, etc.
- Text: Used for adding descriptions and annotations
- Lines: Used for connecting and annotating elements
Adding Elements
You can add elements to the canvas by dragging or clicking from the left element library.
Adding Lines
- After selecting an element, click the floating connection button to start drawing a line. Click to set position, then press Space or Enter to confirm, or ESC to cancel. The line endpoint will automatically snap when aligned with other elements.
- You can also add line elements directly from the left element panel.
Adding Text
- After selecting an element, click the add text button to add associated text. Associated text will move along with the element's position changes.
- You can also add independent text elements directly from the left element panel.
Editing Elements
Adjusting Element Position
Drag elements with the left mouse button on the canvas to adjust their position.
Adjusting Element Size
Modify element size through the scale properties or geometric parameters in the element properties panel.
Adjusting Element Rotation
Adjust element rotation angles through the rotation property in the element properties panel.
Adjusting Element Color
Modify element colors through the color property in the element properties panel.
Editing Lines
Modifying Vertices
After selecting a line, drag its vertices to adjust the line shape.
Adding Vertices
After selecting a line, click anywhere on the line to add new vertices.
Modifying Line Properties
Modify line properties such as color and thickness in the right element editing panel.
Editing Text
After selecting text, adjust its content, size, color, and other properties in the right element properties panel.
Tooltips
For elements other than text, planes, and lines, you can enable tooltips in their properties panel to display hover text descriptions.
Camera Views
Switch to Top-Down View (2D)
Click the 2D button in the camera toolbar to switch to a top-down view.
Switch to Isometric View (3D)
Click the 3D button in the camera toolbar to switch to an isometric view.
Change Camera Type
Click the camera type button in the camera toolbar to toggle between perspective and orthographic modes.
Custom Camera
Click the custom camera button in the camera toolbar to save current scene camera position, rotation, and zoom parameters.
Rotate Scene
Hold the [Alt] key while dragging with the left mouse button to rotate the scene.
Video Tutorial
keywords: system architecture diagram、software architect、IT architecture diagram、network architecture diagram、free architecture software