## Create Wireframe Diagram
To create a Wireframe Diagram:
1. Select first an element where a new Wireframe Diagram to be contained as a child.
2. Select **Model | Add Diagram | Wireframe Diagram** in Menu Bar or select **Add Diagram | Wireframe Diagram** in Context Menu.
## Wireframe Model
To create a Wireframe Model (model element only) by Menu:
1. Select an Element where a new Wireframe Model to be contained.
2. Select **Model | Add | Wireframe** in Menu Bar or **Add | Wireframe** in Context Menu.
## Frame
To create a frame element:
1. Select **Frame** in **Toolbox**. You can select one of the frames including **Frame** (General), **Frame (Mobile)**, **Frame (Web)**, **Frame (Desktop)**.
2. Drag on the diagram as the size.
## Button
To create a button element:
1. Select **Button** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
## Text
To create a text element:
1. Select **Text** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
> You can also use **Text** or **TextBox** in **Annotations Toolbox**
## Radio
To create a ratio element:
1. Select **Ratio** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
> You can show checked state by checking `checked` property in **Property Editor**
## Checkbox
To create a checkbox element:
1. Select **Checkbox** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
> You can show checked state by checking `checked` property in **Property Editor**
## Switch
To create a switch element:
1. Select **Switch** in **Toolbox**.
2. Drag on the diagram as the size.
> You can show checked state by checking `checked` property in **Property Editor**
## Link
To create a link element:
1. Select **Link** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
## Tab
To create a tab element:
1. Select **Tab** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
## Tab List
To create a tab list element:
1. Select **Tab List** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Add Tab** : Add a tab.
* **Add Note** : Add a note.
## Input
To create an input element:
1. Select **Input** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
## Dropdown
To create a dropdown element:
1. Select **Dropdown** in **Toolbox**.
2. Drag on the diagram as the size.
You can use **QuickEdit** for element by double-click or press `Enter` on a selected element.
* **Name** : Edit name.
* **Add Note** : Add a note.
## Panel
To create a panel element:
1. Select **Panel** in **Toolbox**.
2. Drag on the diagram as the size.
## Image
To create an image element:
1. Select **Image** in **Toolbox**.
2. Drag on the diagram as the size.
## Separator
To create a separator element:
1. Select **Separator** in **Toolbox**.
2. Drag on the diagram as the size.
> You can show the separator vertically by checking `isVertical` property in **Property Editor**
## Avatar
To create an avatar element:
1. Select **Avatar** in **Toolbox**.
2. Drag on the diagram as the size.
## Slider
To create a slider element:
1. Select **Slider** in **Toolbox**.
2. Drag on the diagram as the size.
> You can adjust the slider handle by setting the `value` property (0\~ 100) in **Property Editor**.
---
# Agent Instructions: 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:
```
GET https://docs.staruml.io/working-with-additional-diagrams/wireframe-diagram.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.