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
