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.

Diagram basics

Creating a diagram

The diagram hierarchy in IcePanel is based on the C4 model, with 3 levels of connected diagrams (instead of Level 4 diagrams, we allow you to link objects 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.

In a diagram

1. Navigate to the top left and click on the Diagrams dropdown

2. Click on the New diagram button

The top-level navigation

The top-level navigation bar shows where you are in the C4 hierarchy, allows you to navigate across and up levels, and view diagram details.

Use this section to:

• See which diagram you're in and at which level.

• Go back to where you were previously.

• Navigate between different diagrams at a level.

• Navigate to a diagram at a higher level.

• View and edit diagram details (name, description).

• See who last edited the diagram.

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. You can also drag and drop.

In the canvas

1. Double-click in the diagram area.

2. Click on the object type you want to add.

3. Name your object.

Using keyboard shortcuts

• Create a new system: Shift + S

• Create a new actor: Shift + P

• Create a new area: Shift + G

• Create a new app: Shift + A

• Create a new store: Shift + D

• Create a new component: Shift + X

See all Hotkeys

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.

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.

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

• Reality links

• Detailed description

• Connections to and from the object

• History of changes to the object

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 object dropdown at the top-level nav.

3. Selecting a diagram from the diagrams list from the right-hand objects details panel.

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.

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

• Detailed description

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

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 Expandoption in the object details menu.

4. Create new objects and change the parent to the external object.

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.

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.

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 as many objects.

• 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

Flows

Show different use cases

Linking to reality

Connect objects to code