Skip to main content
Skip table of contents

Diagrams

Diagrams refer to visual representations of information or processes using shapes, symbols, and connectors. Diagrams help communicate complex ideas, relationships, and workflows in a clear and concise manner.

Mocky Diagrams library includes a wide range of designed diagrams, from simple shapes, flowcharts, networks to containers.

Browse Network Library

To browse the network library, navigating to the Left Sidebar and click on Diagrams tab. The tab will be highlighted, and open the Diagrams panel.

As you scroll down, you will see the diagrams set grouped into categories.

  • These categories are collapsible, and by clicking on category name, you can collapse/expand that section

  • You can also click X button to deselect

Filter Categories

You can also filter categories to only show desired ones, by

  • Clicking on Filter icon next to the search box.

  • Tick to show/hide elements:

Search Diagrams

To search diagrams, use the search box at the top of the Diagram panel. Search will show the results of all the filtered categories

Add Diagrams to a Page

From Diagrams panel, dragging a diagram component to a desired location of a page to add that Network.

Diagram connectors

Diagram connectors are used to establish a connection or relationship between two or more shapes or objects within a diagram

In order to create a connector, simply click on a Diagram component, hover on an arrow, drag the line, and make a connection

Mocky also supports Next shapes suggestion that automatically suggests or recommends the next shapes or elements to use based on the context of the design project

Connector styling

To customize and style a diagram connector, click on the line, and access the Line Settings in the Settings Panel. Here, you can set the stroke type, line shape, arrow tail, arrow head, and line color according as your preferences

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.