> For the complete documentation index, see [llms.txt](https://docs.icraft.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.icraft.design/editor-features/resource-panel/basic-graphics/line.md).

# Line

The **Line component** is used to draw **paths, directions, workflows, connections, or illustrative outlines** within a scene. It is widely applied in scenarios such as process flow visualization, pipeline routing explanation, spatial guidance, and logical relationship annotation.

Lines support multi-segment polylines, customizable styles, and directional arrows, making them one of the core components in the iCraft editor that combines both expressiveness and connectivity.

***

## How to Draw a Line?

#### Create a Line

* Click the **Line icon** in the system asset library, or drag the icon directly onto the canvas.&#x20;
* If there are already elements on the canvas:
  * Click an existing element, then click the Line icon in the floating toolbar on the right.\
    This allows you to quickly create a line starting from that element and connect it to another element. When the connected elements move, the line will automatically remain attached.
  * Alternatively, click on an empty area of the canvas to create control anchor points and freely draw a line. Press **`ENTER`** to finish drawing.

<figure><img src="/files/x7npaz8FqnuJDMOaofHW" alt=""><figcaption></figcaption></figure>

***

#### Edit a Line

* **Drag Nodes**\
  After selecting a line, you can drag the **control anchor points** along the path to adjust its direction.
* **Add Nodes**\
  With the line selected, click anywhere along the path to insert a new control anchor point.
* **Delete Nodes**\
  Select a control anchor point and press **`Delete`** to remove it.
* **Create Line Branches**\
  Select a control anchor point and click the 「**Arrow**」 icon in the floating toolbar on the right to create a new branch line starting from that point.
* **Insert Text**\
  Select a control anchor point and click the 「**Text**」 icon in the floating toolbar to add a text annotation at that point.

<figure><img src="/files/HgNw07YnjI9wgP0CBGhT" alt=""><figcaption></figcaption></figure>

***

## Special Parameters of the Line

#### Shape

**Routing Mode**\
Determines how line segments connect to each other. Select from the dropdown menu. iCraft provides four common routing styles:

* **Normal Routing** – Straight lines at any angle; suitable for scenes requiring high flexibility.
* **Orthogonal Routing** – 90° horizontal/vertical lines; suitable for clearly structured diagrams emphasizing engineering standards.
* **45° Routing** – Balances engineering style and visual aesthetics; commonly used in workflow or system diagrams.
* **Curved Routing** – Ideal for flexible connections, complex paths, or irregular routes.

<figure><img src="/files/l2QU8e0ILrVjhlwPCN6Z" alt=""><figcaption></figcaption></figure>

***

#### Style

* **Color**\
  Sets the display color of the line using the color picker.\
  Default color: **`#000000`**
* **Line Width**\
  Controls the thickness of the line.\
  Default value: 0.05\
  Adjustable range: `0.01 – 0.2`
* **Dashed Line**\
  Toggle switch. Controls whether the line is displayed as a dashed line.\
  Default: Off (solid line)
* **Dash Scale**\
  Effective only when **Dashed Line** is enabled. Controls the density of the dashed pattern. Smaller values produce longer dashes and wider spacing.\
  Default value: 1\
  Adjustable range: `0.1 ~ 10`

<figure><img src="/files/IoErv08Ajgq6oZGlpY4L" alt=""><figcaption></figcaption></figure>

***

#### Arrow

* **Visible**\
  Toggle switch. Determines whether an arrow is displayed at the end of the line.\
  Default: Enabled
* **Two-Way**\
  Toggle switch. Determines whether arrows appear at **both ends** of the line.\
  Default: Disabled
* **Size**\
  Defines the size of the arrow.\
  Default value: 0.05\
  Adjustable range: `0.01 ~ 0.2`
* **Position**\
  Controls the offset ratio of the arrow along the end of the line.\
  Default value: 1 (at the end of the line)\
  Adjustable range: `0 ~ 1`

<figure><img src="/files/5js7ghTueuHIgo0dcV9j" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.icraft.design/editor-features/resource-panel/basic-graphics/line.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
