Diagram Elements in Visily

Diagram Elements in Visily

Use diagram elements to brainstorm ideas, map processes, and model structured systems directly on your Visily board. You can build a diagram from individual elements or start with a ready-made template.

Before you start

Make sure you have permission to edit the board and are in design editing mode.

Access the Diagram Library

You can open the full Diagram Library in either of the following ways:
  1. Open More actions from the bottom toolbar, then select Diagram Library.

  2. Select Diagram elements from the bottom toolbar, then click View all.

Use the Elements tab to browse diagram elements or the Templates tab to find ready-made diagrams.

Available diagram elements

The Diagram Library provides elements for brainstorming, process mapping, and system modeling.
  1. Sticky Notes. Use Sticky Notes to capture ideas, add annotations, leave comments, or organize information during brainstorming and collaboration.


  2. Flowchart elements. Use flowchart shapes to map processes, decisions, and workflows. Available shapes include: Start/End, Input/Output, Process, Decision, Connector, Merge, Extract.


  3. Use Case Diagram elements. Use these elements to show how users interact with a system and its functions. Available elements include: Actors, Use cases, System boundaries, Association lines.


  4. Entity Relationship Diagram elements. Use ERD elements to model database entities, attributes, and relationships. Available elements include different entity formats and relationship types for showing database cardinality.


  5. Class Diagram elements. Use Class Diagram elements to model classes, attributes, methods, and relationships in an object-oriented system. Available elements include class tables and common relationship types such as inheritance, realization, aggregation, composition, and dependency.

Add a diagram element

  1. Open the board where you want to create a diagram.
  2. Open Diagram elements from the bottom toolbar or the Diagram Library.
  3. Select the element you want to use.
  4. Click the canvas to add it.
  5. Move, resize, or customize the element as needed.
Idea
You can also use Basic Elements and Smart Components to add context and visual detail to your diagrams. For more information, see Wireframe Elements in Visily.

Connect diagram elements

Use connectors to link diagram elements and show relationships, sequences, or flow directions.

Add a connector

You can add connectors in the following ways:
  1. Select a diagram element to display four connector arrows around it. Then:
    1. Drag an arrow toward another element to connect them.


    2. Click an arrow to create a new element in that direction and connect it automatically.


    3. Hover over a connection point, then click to quickly connect it to a nearby element. 


  2. Press X to add a stand-alone connector.

Customize a connector

Select a connector to open its toolbar. The available actions include:
  1. Connector type: Switch between straight, elbow, or curved connectors.
  2. Color: Change the connector color.
  3. Line style: Adjust the line thickness and dash style.
  4. Line start and end: Customize the connector endpoints, including arrowheads.
  5. Add text: Add a label or note directly to the connector.
  6. Export: Export the connector as an image or PDF, or send it to Figma.
  7. More actions: Access additional options such as align, arrange layers, copy, duplicate, and delete.


After adding text to a connector, additional text editing options appear in the toolbar, including text styling and Autofill content.

Search for elements 

Use the search bar in the Diagram Library to find an element by name. You can search from the Elements, Templates, or Icons tab. Matching results from other tabs appear as highlighted badges, allowing you to find items without manually switching between tabs.
Idea
If you cannot find the elements you need from the Diagram Library, you can generate them with AI, search across the libraries, import a design using the Visily browser extension, or import a design from Figma.

Note

  1. Turn on Grid Mode to help align and snap diagram elements into place. 

  2. Use connectors and labels consistently to make relationships and flows easier to follow.
  3. New elements added from an existing diagram shape may inherit its current style.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • Wireframe Elements in Visily

      Visily provides a wide range of ready-to-use elements for building app and website wireframes. These elements help you create consistent interfaces quickly without designing every component from scratch. Before you start Make sure you have permission ...

    • How to align elements

      Use alignment tools to arrange elements, groups, and screens consistently. You can align one element relative to its parent or align multiple objects relative to one another. Before you start Make sure you have permission to edit the board and are in ...

    • Class Diagrams in Visily

      Class Diagrams help you model the structure of an object-oriented system by showing classes, their attributes, methods, and relationships. Before you start Make sure you have permission to edit the board and are in design editing mode. Available ...

    • Flowcharts in Visily

      Use flowcharts to visually map processes, decisions, and workflows. Visily provides common flowchart shapes and connectors that you can add, connect, and customize directly on your board. Before you start Make sure you have permission to edit the ...

    • Entity Relationship Diagrams (ERDs) in Visily

      Entity Relationship Diagrams (ERDs) help you model the structure of a database by showing entities, their fields, and the relationships between them. Before you start Make sure you have permission to edit the board and are in design editing mode. ...