Wireframe Diagram

Wireframe Diagram (Mobile)

Wireframe Diagram (Web)

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.