## 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**.
