---
title: Visio Mapping
slug: rm/visio-mapping
docTags: 
createdAt: 2026-06-09T13:38:45.910Z
---

When importing Visio files, Blueprint allows users to map custom shapes to the existing Blueprint shape repository for seamless integration.

Below is a template of the mapping sheet users can fill out.

Column A (**Custom Shape Name**) is the name of the custom shape as it exists in the Visio file.

Column B (**Blueprint Shape**) is the corresponding Blueprint shape that the custom shape should map to.

:::hint{type="info"}
[Visio Mapping.xlsx](https://files.helpdocs.io/4rdnduk17o/other/1655392732664/visio-mapping.xlsx)
**Note**:

- Only .xlsx file format is accepted
- The Custom Shape Name is case sensitive. Please make sure it matches exactly to what is in Visio
- Shape mapping is not for individual shapes, but for shape types.
            - Example: "Actor.1000" is a shape name "Actor" would be the shape type
:::

Listed are all the Blueprint Model shapes available for custom mapping:

# Default Library

| **Image**                                                                                                                             | **Name** | **Description**                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744201863/default-text.png" alt caption width="50" height="50"}    | Text     | Drag this shape onto the canvas to add text that is independent of a shape. The shape will change into a text box when dragged onto the canvas. Double click the text box to edit the text. |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744211518/default-callout.png" alt caption width="50" height="50"} | Callout  | The call out shape is used to annotate a model or diagram with comments or notes.                                                                                                           |

# Basic Library

| **Image**                                                                                                                                          | **Name**            | **Description**                                                                                                                                 |
| -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744951667/bpmn-basic-rectangle.png" alt caption width="50" height="50"}         | Rectangle           | A basic Rectangle shape. The size and aspect ratio can be adjusted to transform this shape into a square.                                       |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744964995/bpmn-basic-rounded-rectangle.png" alt caption width="50" height="50"} | Rounded Rectangle   | A Rectangle shape with rounded corners. The size and aspect ratio can be adjusted to transform this shape into a square with rounded corners.   |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744973451/bpmn-basic-diamond.png" alt caption width="50" height="50"}           | Diamond             | A basic Diamond shape. Diamonds are often used to represent decision points in flow chart type diagrams.                                        |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744982103/bpmn-basic-circle.png" alt caption width="50" height="50"}            | Circle              | A basic Circle. The size and aspect ratio can be adjusted to transform this shape into an oval.                                                 |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568744994017/bpmn-basic-triangle.png" alt caption width="50" height="50"}          | Triangle            | A basic Triangle. This shape, like all shapes, can be rotated to have any orientation.                                                          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745184971/basic-parallelogram.png" alt caption width="50" height="50"}          | Parallelogram       | A basic Parallelogram shape.                                                                                                                    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745761922/basic-trapezoid.png" alt caption width="50" height="50"}              | Trapezoid           | A basic Trapezoid shape.                                                                                                                        |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745768225/basic-note.png" alt caption width="50" height="50"}                   | Note                | A basic Note shape.                                                                                                                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745775409/basic-document.png" alt caption width="50" height="50"}               | Document            | This shape is used to represent a document.                                                                                                     |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745781952/basic-multi-document.png" alt caption width="50" height="47"}         | Multi-Documents     | This shape is used to represent a set of documents.                                                                                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745791260/basic-cylinder.png" alt caption width="50" height="48"}               | Cylinder            | A basic Cylinder shape. This shape is often used to represent a data storage device.                                                            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745798283/basic-cloud.png" alt caption width="50" height="50"}                  | Cloud               | A basic Cloud shape. This shape is often used to represent a network or the cloud.                                                              |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745804575/basic-arrow.png" alt caption width="50" height="50"}                  | Arrow               | A single-sided Arrow. Often used to draw attention to specific areas of a diagram. This shape does not share the same behavior as a connector.  |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568745813024/basic-bidirectional-arrow.png" alt caption width="135" height="135"}  | Bidirectional Arrow | A Bidirectional Arrow. Often used to draw attention to specific areas of a diagram. This shape does not share the same behavior as a connector. |

# Arrow Library

| **Image**                                                                                                                                   | **Name**               |
| ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654790267301/image.png" alt caption width="97" height="94"}   | Modern Arrow           |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654790341590/image.png" alt caption width="148" height="95"}  | Flexible Arrow         |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654790396153/image.png" alt caption width="110" height="113"} | Bent Arrow             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654790434887/image.png" alt caption width="93" height="102"}  | U-Turn Arrow           |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796054530/image.png" alt caption width="92" height="103"}  | Sharp Bent Arrow       |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796351644/image.png" alt caption width="85" height="95"}   | Curved Right Arrow     |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796364077/image.png" alt caption width="99" height="98"}   | Curved Left Arrow      |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796409851/image.png" alt caption width="98" height="87"}   | Circular Arrow         |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796507201/image.png" alt caption width="103" height="74"}  | Multi-Line             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796533866/image.png" alt caption width="106" height="82"}  | 2D Multi-Line          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796542892/image.png" alt caption width="115" height="86"}  | Multi-Arrow            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796481522/image.png" alt caption width="97" height="62"}   | Striped Arrow          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796714729/image.png" alt caption width="86" height="68"}   | Notched Arrow          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796724377/image.png" alt caption width="87" height="94"}   | Block Arrow            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796735546/image.png" alt caption width="115" height="105"} | Quad Arrow             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796746612/image.png" alt caption width="114" height="108"} | Quad Arrow Block       |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796771123/image.png" alt caption width="107" height="96"}  | Left-Right-Up Arrow    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654796780678/image.png" alt caption width="105" height="98"}  | Left-Right Arrow Block |

# BPMN Events

| **Image**                                                                                                                               | **Name**           | **Description**                                                                                                                                                       |
| --------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568746123136/bpmn-start.png" alt caption width="50" height="50"}        | Start Event        | Start Events indicate the start of a process or a Sub-event process. Start Events can be marked as Interrupting or Non-Interrupting in the Utility Panel.             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568746131314/bpmn-intermidiate.png" alt caption width="50" height="50"} | Intermediate Event | Used to represent any events that occur between the start and end events. Intermediate Events can be marked as Interrupting or Non-Interrupting in the Utility Panel. |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568746145495/bpmn-end.png" alt caption width="50" height="50"}          | End Event          | Represents the last or final step in a process.                                                                                                                       |

# BPMN Activities

| **Image**                                                                                                                             | **Name**         | **Description**                                                                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568749686419/task.png" alt caption width="102" height="75"}           | Task             | The activity that is to be performed.                                                                                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568749690688/sub-process.png" alt caption width="102" height="75"}    | Sub-Process      | A group of tasks that fit well together. The sub-process shape can be expanded or collapsed by using the "+" symbol on the shape. |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568749712307/conversatio.png" alt caption width="102" height="75"}    | Conversation     | A set of logically related message exchanges.                                                                                     |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568749716969/sub-conversatio.png" alt caption width="87" height="75"} | Sub-Conversation | A conversation with a "+" indicates that it is a sub-conversation.                                                                |

# BPMN Artifacts

| **Image**                                                                                                                                  | **Name**         | **Description**                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568750380197/annotatio.png" alt caption width="75" height="75"}            | Annotation       | Describes additional flow parts of the model.                                                                                          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568750384824/grou.png" alt caption width="75" height="75"}                 | Group            | Organize tasks or processes that are significant to the overall process.                                                               |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568750388354/dataobject.png" alt caption width="75" height="75"}           | Data Object      | Represents data in the process. Could be data resulting from the process, data that needs to be collected or data that must be stored. |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568750404583/datastorage.png" alt caption width="75" height="75"}          | Data Store       | Represents access or storage of data associated with a process.                                                                        |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654789512581/image.png" alt caption width="89" height="65"}  | Message          | An action that refers to a specific addressee and represents or contains information for the addressee is a message.                   |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/articles/q1n8x8qsic/1654789559995/image.png" alt caption width="311" height="64"} | Pool (Black Box) | An empty pool that represents a business process with all details hidden.                                                              |

# BPMN Gateways

| **Image**                                                                                                                     | **Name** | **Description**                                                              |
| ----------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568750645774/gateway.png" alt caption width="50" height="50"} | Gateway  | Gateways are symbols that separate and recombine flows in a process diagram. |

# Use Case Library

| **Image**                                                                                                                      | **Name**                 | **Description**                                        |
| ------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------------------ |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568751478670/actor.png" alt caption width="75" height="114"}   | Actor                    | The activity that is to be performed.                  |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568751482360/use-case.png" alt caption width="75" height="58"} | Use Case                 | A single use case                                      |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568751486027/extensio.png" alt caption width="75" height="49"} | Use Case With Extensions | A single use case with an extension to other use cases |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568751490647/boundry.png" alt caption width="75" height="76"}  | Boundary                 | Used to represent the system boundary of the Use case  |

# Flow Chart Library

| **Image**                                                                                                                                | **Name**           | **Description**                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752335744/terminator.png" alt caption width="75" height="52"}         | Terminator         | Represents the end of a process                                                           |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752340324/process.png" alt caption width="75" height="55"}            | Process            | Represents a step in a process                                                            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752346789/decisio.png" alt caption width="75" height="53"}            | Decision           | Used to indicate a decision point in the process                                          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752351357/predefined-process.png" alt caption width="75" height="57"} | Predefined Process | Represents an existing defined process                                                    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752357067/document.png" alt caption width="75" height="53"}           | Document           | Used to represent a printed document                                                      |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752362628/multi-document.png" alt caption width="75" height="52"}     | Multiple Document  | Used to represent multiple printed documents                                              |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752366591/manual-input.png" alt caption width="75" height="53"}       | Manual Input       | A step in the process that requires user input                                            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752372413/preperatio.png" alt caption width="75" height="65"}         | Preparation        | Used to represent a setup up to a process                                                 |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752376837/data.png" alt caption width="75" height="54"}               | Data               | Used to represent data                                                                    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752381786/data-base.png" alt caption width="75" height="59"}          | Database           | Used to represent data storage                                                            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752386926/hard-disk.png" alt caption width="75" height="64"}          | Hard Disk          | Used to represent data storage                                                            |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752391440/internal-storage.png" alt caption width="75" height="65"}   | Internal Storage   | Used to represent internal storage                                                        |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752395329/stored-data.png" alt caption width="75" height="49"}        | Stored Data        | Used to represent stored data                                                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752399494/off-page-link.png" alt caption width="95" height="94"}      | Off-Page Link      | Used to link to another Flow Chart                                                        |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752404830/manual-operatio.png" alt caption width="75" height="54"}    | Manual Operation   | A manual step in the process                                                              |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752409070/loop-limit.png" alt caption width="75" height="60"}         | Loop Limit         | Used to define maximum iterations                                                         |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752413752/on-page-link.png" alt caption width="75" height="76"}       | On-Page Link       | Used to link to another Flow Chart in the same diagram                                    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752418210/or.png" alt caption width="75" height="98"}                 | Or                 | Indicates that the process flow continues in more than two branches                       |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752422403/summing-junctio.png" alt caption width="75" height="64"}    | Summing Junction   | Indicates a point in the flowchart where multiple branches converge into a single process |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752426740/merge.png" alt caption width="75" height="52"}              | Merge              | Indicates a step where two or more sub-processes join into a single process               |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752431236/collate.png" alt caption width="75" height="89"}            | Collate            | A step used to indicate data being put into a standard format                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752435264/sort.png" alt caption width="75" height="92"}               | Sort               | A step used to represent the sorting of a set of data                                     |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752440168/delay.png" alt caption width="75" height="55"}              | Delay              | A pause in the process                                                                    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752444503/paper-tape.png" alt caption width="75" height="56"}         | Paper Tape         | Used to represent input into old legacy systems                                           |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752448311/display.png" alt caption width="75" height="54"}            | Display            | Used to show when information is displayed                                                |

# Entity Relationship Library

| **Image**                                                                                                                                   | **Name**              | **Description**                       |
| ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752909034/entity.png" alt caption width="75" height="53"}                | Entity                | Chen's Notation Entity                |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752913204/weak-entity.png" alt caption width="75" height="53"}           | Weak Entity           | Chen's Notation Weak Entity           |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752916945/attribute.png" alt caption width="75" height="53"}             | Attribute             | Chen's Notation Attribute             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752921130/multivalued-attribute.png" alt caption width="75" height="56"} | Multivalued Attribute | Chen's Notation Multivalued Attribute |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752924970/relationshi.png" alt caption width="75" height="56"}           | Relationship          | Chen's Notation Relationship          |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568752929233/weak-relationshi.png" alt caption width="75" height="53"}      | Weak Relationship     | Chen's Notation Weak Relationship     |

# UI Mockup Library

| **Image**                                                                                                                                            | **Name**             | **Description**                                                                                                                                                                                                                         |
| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753306481/ui-mockup-browser-frame.png" alt caption width="73" height="75"}        | Browser Frame        | A browser frame with standard browser iconography. The title and URL can be directly edited. Scrollbars can be added under the Format Shape tab in the Utility Panel.                                                                   |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753312823/ui-mockup-frame.png" alt caption width="74" height="75"}                | Frame                | A frame with editable left-aligned text.                                                                                                                                                                                                |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753319076/ui-mockup-label.png" alt caption width="74" height="43"}                | Label                | A label with editable font.                                                                                                                                                                                                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753326502/ui-mockup-hyperlink.png" alt caption width="73" height="64"}            | Hyperlink            | A hyperlink that can be configured, formatted, and activated under the Format Shape tab in the Utility Panel.                                                                                                                           |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753335109/ui-mockup-paragraph.png" alt caption width="82" height="77"}            | Paragraph            | A paragraph placeholder with default 'lorem ipsum' text that can be edited directly in the canvas.                                                                                                                                      |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753341189/ui-mockup-image-placeholder.png" alt caption width="73" height="73"}    | Image Placeholder    | An image placeholder. Image files cannot be attached to the image.                                                                                                                                                                      |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753347140/ui-mockup-ico.png" alt caption width="73" height="72"}                  | Icon                 | An icon placeholder. When dragged and dropped onto the canvas, click the search icon under the placeholder to display the Icon Picker modal and select one of the numerous standard icons available.                                    |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753354649/ui-mockup-progress-bar.png" alt caption width="71" height="30"}         | Progress Bar         | A progress bar. The position of the progress bar can be directly edited.                                                                                                                                                                |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753360822/ui-mockup-horizontal-scrollbar.png" alt caption width="73" height="30"} | Horizontal Scrollbar | A horizontal scrollbar. The position of the scrollbar can be directly configured.                                                                                                                                                       |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753367345/ui-mockup-vertical-scrollbar.png" alt caption width="30" height="70"}   | Vertical Scrollbar   | A vertical scrollbar. The position of the scrollbar can be directly configured.                                                                                                                                                         |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753374162/ui-mockup-text-box.png" alt caption width="71" height="50"}             | Text Box             | A text box. The text can be directly edited on the canvas.                                                                                                                                                                              |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753380762/ui-mockup-butto.png" alt caption width="71" height="51"}                | Button               | A button placeholder with editable text. A hotspot with a hyperlink can also be configured under the Format Shape tab in the Utility Panel.                                                                                             |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753395736/ui-mockup-dropdown-buttons.png" alt caption width="74" height="34"}     | Dropdown Buttons     | Dropdown buttons with editable text. Options can be added or removed by clicking the add or delete icons under the dropdown buttons icon. Variations and states can also be customized under the Format Shape tab in the Utility Panel. |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753415549/ui-mockup-hotspot.png" alt caption width="73" height="73"}              | Hotspot              | A hotspot with editable text directly in the canvas. A hyperlink can be configured under the Format Shape tab in the Utility Panel.                                                                                                     |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753423191/ui-mockup-date-picker.png" alt caption width="75" height="75"}          | Date Picker          | A date picker with a calender icon and single line of text that can be configured in the canvas.                                                                                                                                        |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753428417/ui-mockup-horizontal-slider.png" alt caption width="77" height="45"}    | Horizontal Slider    | A horizontal slider. The position of the slider can be directly edited in the canvas.                                                                                                                                                   |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753434581/ui-mockup-vertical-slider.png" alt caption width="43" height="75"}      | Vertical Slider      | A vertical slider. The position of the slider can be directly edited in the canvas.                                                                                                                                                     |
| :inlineImage[]{src="https://files.helpdocs.io/4rdnduk17o/other/1568753514233/ui-mockup-numeric-spinner.png" alt caption width="73" height="43"}      | Numeric Spinner      | A numeric spinner. The value displayed on the canvas can only be configured under the Format Shape tab in the Utility Panel.                                                                                                            |

