# Diagramming Diagrams are at the centre of IcePanel. Combined with the C4 model, you can effortlessly show how your systems fit together at different levels of detail. Go from a high-level overview of your system to the apps and components that make it work. Add tags and flows to communicate different stories about your system. IcePanel's model-based philosophy enables you to create reusable objects across different diagrams, leading to greater consistency.

IcePanel diagrams are based on the C4 model

## Diagram basics ### Creating a diagram The diagram hierarchy in IcePanel is based on the [C4 model](https://docs.icepanel.io/core-features/modelling), with 3 levels of connected diagrams (instead of Level 4 diagrams, we allow you to [link objects to reality](https://docs.icepanel.io/integrations/linking-to-reality)). There are 2 ways to create diagrams. #### On the landscape page 1. Go to the Diagrams section. 2. Click on the `Create diagram` button. 3. Select the diagram type and parent object.

Creating a diagram from the diagrams section

#### In a diagram 1. Navigate to the top left and click on the name of the diagram 2. Hover over the parent of diagram 3. Click on the `New diagram` button

{% hint style="info" %} Diagram groups are only available on Growth, Scale and Enterprise plans. {% endhint %} ### The top-level navigation {% hint style="info" icon="question" %} The navigation was updated in March 2026. If you miss the old navigation, feel free to send feedback via the contact us form in the app. {% endhint %} The top-level navigation bar shows two distinct tabs: 1. **Diagram tab** * The diagram you are on * The diagrams you can browse: * Your recently viewed * Your recently edited * Search all diagrams

2. **The Belong To tab** This shows where you are in the C4 hierarchy, allows you to navigate across and up levels, and view diagram details.

Use this tab to: * See which diagram you're in and at which level. * Navigate between different diagrams at a level. * Navigate to a diagram at a higher level. * View and edit diagram details (name, description) * See when the diagram was last edited * Add a description (with AI) * Create a new Group * Access versions * Duplicate a diagram * Move the diagram to another domain ### Creating new objects Adding an object to a diagram creates it in the model. This means you can **reuse** the same objects across different diagrams or make a single edit (to its name, for example) to change it everywhere. There are 3 ways to add new objects to a diagram. #### From the left toolbar 1. Navigate to the left toolbar and hover on the `+` button. A list of object types will appear. 2. Select the object type you want to add and place it in the diagram. {% embed url="" %} #### In the canvas 1. Double-click in the diagram area. 2. Click on the object type you want to add. 3. Name your object.

Double-click in a canvas to add a new object

#### **Using keyboard shortcuts** * Create a new system: `Shift + S` * Create a new actor: `Shift + P` * Create a new Group: `Shift + G` * Create a new app: `Shift + A` * Create a new store: `Shift + D` * Create a new component: `Shift + X` See all [hotkeys](https://docs.icepanel.io/other-information/hotkeys "mention") {% hint style="success" %} You can duplicate any existing object by simply right clicking the object and selecting the *Duplicate Object* option. You can multi-select them to duplicate multiple at a time! Use shortcut `CMD/Ctrl + D` to duplicate quickly. {% endhint %}

### Adding existing objects There are 2 ways to add existing objects to a diagram. #### From the left toolbar 1. Navigate to the left toolbar and click on the button `+` . 2. Search for objects by name. 3. Click on the object you want to add to the diagram or drag and drop.

#### In the canvas 1. Double-click in the diagram area. 2. Search for the object by name or select the object from the dropdown list.

Double-click and add objects in your model

### Searching for objects You can search for objects in a diagram by clicking the `+` button and using the filters. You can filter to view only objects in the diagram or the parent object. If you click on an object in the list that exists in the diagram, the canvas will move and focus on it.

{% hint style="info" %} Use CMD/CTRL + F to open the search menu with the in current diagram filter selected. {% endhint %} ### Editing object details Click on an object to view or edit properties on the right-hand menu, such as: * Icon * Object name * Editable permissions (only available on Growth and Isolation plans) * Object type * Parent * Status (Live, Future, Deprecated, Removed) * Groups it belongs to * Owners * Diagrams the object is in * Flows the object is in * Tags * Displayed description * Technology * Links * Detailed description * Connections to and from the object * History of changes to the object {% hint style="warning" %} Any changes you make will affect the model and all diagrams the object is in. {% endhint %}

### Navigating across diagrams There are a few ways to navigate across diagrams: 1. Clicking the 🔎 icon at the top-left of an object in a diagram. A numeric indicator will show how many objects are nested within the object. If there are no nested objects, a blank diagram will be created at a lower level when you click on it. 2. Selecting a diagram from the Diagram Tab. 3. Selecting a diagram from the Belong To Tab. {% hint style="warning" %} We recommend breaking complex diagrams into multiple diagrams that exist in parallel. Each diagram should communicate a specific message or architectural story and be tailored to a particular audience. In practice, this often means creating multiple Level 2 diagrams that focus on different aspects of the system. Readers can explore these alternative views using the 🔎 icon, allowing them to navigate between diagrams without overwhelming a single view with too much detail. This approach helps keep diagrams focused, easier to understand, and more useful for different stakeholders. {% endhint %} ### Custom zooming By default, when you zoom into an object, you will land on the top diagram in the list of possible diagrams within that object. For example, zooming into a system will land on the first Level 2 App diagram within that system. You can select a custom landing point for your zoom action, based on the diagram you're in when you zoom. This helps to keep context when lower diagrams are focused on the same concepts higher up. This will only change the zoom behaviour of an object for the current diagram you're in. For example, you can set it up so that when someone is in `Context diagram 1` when you zoom into `Core System` you will land on `App diagram 1` . Separately, you can set it up so when you're in `Context diagram 2` , and you zoom into `Core System` you will land on `App diagram 2` instead. To set up custom zooming: 1. Go to the diagram you want to customize the zooming for. 2. Hover on the zoom icon of the object that owns the diagram you want to land on. 3. Click the `...` menu on the diagram you want to land on. 4. Click "Set as custom landing diagram." 5. Now, when you zoom into this object from that diagram, it will navigate to your custom set location. To remove custom zooming and set back to default: 1. Go to the diagram that has the customized zooming. 2. Hover on the zoom icon of the object that owns the diagram that's set up. 3. Click the `...` menu on the diagram with "Custom" next to it. 4. Click "Remove custom landing diagram." 5. To confirm it worked, check by seeing "Default" next to the top diagram in the list 6. Now, when you zoom into this object from that diagram, it will navigate to your default (top of the list) diagram.

## Connections ### Adding connections Connections are stored in the model as relationships. This means you can reuse those connections in other diagrams between the same object, keeping changes in sync and even allowing you to use connections from lower levels at higher levels as *"implied"* connections. To connect model objects: 1. Use the + circular buttons on the edge of each object to drag a connection to another object. 2. If an existing connection exists in the model, it'll appear in a dropdown over the connection. 3. Name the connection and press `Enter` or the `+ New connection` button. {% hint style="info" %} Blank connections are not added to your model until you give it a name. {% endhint %} Each object has 12 unique connection points, except for actors, which have 6. For legibility, we recommend sending and receiving connections from unique points instead of overlapping.

### Editing connections Click on a connection to view/edit things such as: * Name * Team edit permissions (only available on Growth and Isolation plans) * Sender * Receiver * Status (Live, Future, Deprecated, Removed) * Direction - Outgoing *(default),* No direction, and Bidirectional * Line shape - Curved line *(default)*, Straight line and Square edge line * Label position * Diagrams list * Flows list * Tags * Technology * Links * Detailed description

{% hint style="info" %} You can also multi-select connections to edit their status, line shape, tags, and technologies. {% endhint %}

### Viewing dependencies and connections of an object To view an object's dependencies and connections: 1. Click on an object and navigate to the `Connections` tab in the object details panel. 2. You'll see a list of incoming and outgoing connections, along with a breakdown of direct and lower connections. Use the filters to toggle viewing direct, lower, incoming, and outgoing connections in the list. 3. To view dependencies, Click on the `View dependencies` at the top to see the incoming and outgoing dependencies of the object. * More details can be found here - [dependencies-view](https://docs.icepanel.io/core-features/dependencies-view "mention")

Using the connections tab and viewing dependencies

### Using lower connections Existing connections from lower levels in the C4 model can be reused at higher levels. These are called *lower connections* and will sync changes in the original connection. These connections will show if a relationship has been created between objects inside (child objects) of those 2 objects previously. When the original connection is updated, the lower connections will also update, including the sender and receiver of the connection in all diagrams in which it is located and the flows that the connected objects are in.

### Showing relationships from another scope Using the expand option, you can show apps inside a system talking directly to an app inside another system. To do this: 1. Go to a Level 2 (app) or 3 (component) diagram. 2. Add an external system or app, 3. Select the `Expand`option in the object details menu. 4. Create new objects and change the parent to the external object.

Expand systems to connect objects across multipel systems

### Change connection to another object To change the connection in the model to another object, click and drag the start or end of the connection to another object. You'll see a modal to select either "New connection" or "Change connection in model": * **New connection:** This creates a duplicate new connection for that change with the same name (it does not copy over documentation). * **Change connection in model:** This will change the connection in the model and sync with the diagrams in which the old and new connections belong.

### Connection Via Property You can attach a **Via Property** to any connection by clicking the *Via* field and selecting the relevant object. Once selected, the object will appear directly on the connection. This is particularly useful for event-driven flows using topics and queues (e.g. Kafka, RabbitMQ).

{% hint style="info" %} The dependencies view also reflects the connections added *Via Property*. This way, you get an easy understanding of any of your queues. {% endhint %}

Dependencies view with Via Property Connections

### Connections table The Connections table show all the connections you have created. You are able to filter based on any of the filters available. {% hint style="success" %} The *Via Property* filter allows you to show the connections that have a *Via Property*. {% endhint %}

Filtering Connections with the Via Property filer

### Diagram vs model changes You can think of diagrams as a visual representation of a model. You can visualize the same model through different diagrams depending on what you want to communicate. When you update or delete your model objects, the changes will be made globally, wherever that object exists. This saves you time from manually going to each object and updating it. {% hint style="danger" %} Using the delete key in a diagram does not remove objects from your model. To permanently remove objects from your model, delete them from the object details menu or the Model objects tab (on the landscape page). {% endhint %} ## Diagram best practices Here are some tips when creating diagrams: * Name all of your diagrams. * Name all of your objects (including connections). * Add icons to every object. * Add *display descriptions* to each object. * Create separate diagrams at the same level to reduce complexity. * Use the right level of complexity at each level (Level 1 should have fewer objects than Level 2). * Use the same connection type in a diagram (avoid mixing curves and straight lines). * Only use bidirectional connections for open connections like websockets. Otherwise, show the request connection and use Flows to show the response. * For legibility, avoid overlapping connections in a diagram. *** ## Continue your IcePanel journey 🚀


Tags	Organize your objects	Tags.png	perspective-tags
Flows	Show different use cases	Flows.png
Linking to reality	Connect objects to code	Linking to reality - banner.png