StarUML documentation
v6
v6
  • Introduction
  • User Guide
    • Introduction
    • Basic Concepts
    • Managing Project
    • Managing Diagrams
    • Diagram Editor
    • Editing Elements
    • Formatting Elements
    • Annotation Elements
    • Managing Extensions
    • User Interface
    • CLI (Command Line Interface)
    • Validation Rules
    • Keyboard Shortcuts
    • TouchBar (MacBook)
    • Customization
  • Working with UML Diagrams
    • Class Diagram
    • Package Diagram
    • Composite Structure Diagram
    • Object Diagram
    • Component Diagram
    • Deployment Diagram
    • Use Case Diagram
    • Sequence Diagram
    • Communication Diagram
    • Timing Diagram
    • Interaction Overview Diagram
    • Statechart Diagram
    • Activity Diagram
    • Information Flow Diagram
    • Profile Diagram
  • Working with SysML Diagrams
    • Requirement Diagram
    • Block Definition Diagram
    • Internal Block Diagram
    • Parametric Diagram
  • Working with Additional Diagrams
    • Entity-Relationship Diagram
    • Flowchart Diagram
    • Data Flow Diagram
    • C4 Diagram
    • BPMN Diagram
    • Mindmap Diagram
    • Wireframe Diagram
    • AWS Architecture Diagram
    • GCP Architecture Diagram
  • Developing Extensions
    • Getting Started
    • Commands
    • Menus
    • Keymaps
    • Toolbox
    • Accessing Elements
    • Creating, Deleting and Modifying Elements
    • Working with Selections
    • Defining Preferences
    • Using Dialogs
    • Registering to Extension Registry
Powered by GitBook
On this page
  • Create Wireframe Diagram
  • Wireframe Model
  • Frame
  • Button
  • Text
  • Radio
  • Checkbox
  • Switch
  • Link
  • Tab
  • Tab List
  • Input
  • Dropdown
  • Panel
  • Image
  • Separator
  • Avatar
  • Slider
  1. Working with Additional Diagrams

Wireframe Diagram

PreviousMindmap DiagramNextAWS Architecture Diagram

Last updated 1 year ago

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.

Wireframe Diagram (Mobile)
Wireframe Diagram (Web)