Modelling - The structure

IcePanel uses a modern, lightweight and agile way to model system architecture using the C4 Model - created by Simon Brown. This helps to create simple, easily digestible and maintainable diagrams that are targeted at each of your audiences. Using the C4 model, you can create diagrams that tell a story for your whole team / audiences - from high-level business to lower-level technical decisions and flows.

In IcePanel it's easy for anyone to pick up this amazing standard in a visual way, and for those unfamiliar, here's a quick intro.

The C4 Model - Brief intro

The C4 model was created by Simon Brown to resolve the pains of explaining and communicating software architecture in the agile world. It acts as a map of your system, starting at the high-level detail (imagine looking at Google earth as the globe), down to the low level details needed to develop your product (zooming into your street).

It is a super easy way to communicate design decisions to multiple audiences, at the level of detail that they need. From business logic to technical decisions, the C4 model makes it easy to maintain in the long run - when changes inevitably get made to your design.

Check out C4model.com for a detailed run through of the how's and why's of C4!

The 4 C's in C4

The 4 C's relate to the different levels of detail or fidelity in the diagrams created from the model.

Level 1 - Context diagrams

Level 1 of the C4 Model - Context diagram

The big picture - These are high-level overviews of how your system(s) work in the overall eco-system with other external systems and the people that use them (users, customers, etc.).

Scope - Systems (internal and external) and actors.

Intended audience - Anyone! Business, Product, Architects, Developers and Operations.

---

Level 2 - Container diagrams

We call these App diagrams in IcePanel, as the word "Container" is more commonly used/known for Docker (sorry Simon).

Level 2 of the C4 Model - App / Container diagrams

High level responsibilities of a system - These diagrams show how the separately deployable things interact to make a system work.

Scope - Apps and stores (inside the system you're zoomed into), other systems (internal and external) and actors.

Intended audience - Some product people, Architects, Developers and Operations.

---

Level 3 - Component diagrams

Level 3 of the C4 Model - Component diagrams

The building blocks and interactions of an app - Zoom in to each app to show the components within, that make's each app work and the interactions within. These are much more technical diagrams for a technical audience.

Scope - Components (inside the app you're zoomed into), other apps & stores in the same system, other systems (internal and external) and actors.

Intended audience - Architects, Developers and Operations.

---

Level 4 - Code diagrams

These are used to show inside a component and how they actually work and function - currently you can't diagram the 4th level in IcePanel. We believe you should refrain from diagramming this manually, and auto generate from code (reality) instead, linking that to IcePanel Components.

If you want to add a head start for your development team, we advise attaching code snippets to components or even better, linking directly to the code itself with our Reality linking.

This level is rarely designed in practice as Simon says "...most IDEs can generate this level of detail on demand."

Using the C4 model in IcePanel

Modelling usually entails creating and storing a file to define objects and relationships between them, then another file or renderer to draw diagrams with those pre-defined relationships. This process may work great for technical people who are able to pick up a new language to create such diagrams ... but not for everyone (and let's face it... they also don't usually look very customer/business friendly, especially when auto arranged).

IcePanel is a visual modelling and documentation tool, and as such, you can create, edit and maintain these models straight from the diagrams as well as our model editor. All changes sync to all other views, drastically reducing maintainace time cost.

In IcePanel, everything sits within a landscape. This is where your model and diagrams belong. You can edit or add to your model in 2 places.

Place 1 - The model objects tab

The IcePanel model objects tab

Here you can quickly add and view your model objects, that live in a hierarchy. You can also seach for and sort by most used objects in your diagram view.

Visible by default: Actors, Systems & Areas

Expand systems to view: Apps & Stores

Expand apps and stores to view: Components

You can add, edit and delete the objects from here. You can also see the details of each object that helps you see the dependencies.

Details in the right-hand panel that you can see for each object include:

• Type (Actor, System, Area, App, Store, Component)
• Name of object
• Icon (For Apps, Stores and areas)
• Diagrams that the object is in, with links to each diagram
• Connections (in the object connections tab when selected)
• Ownership team (Only on Growth plan)
• Assigned Tags
• Short displayed description for diagrams
• Object description
• Flows that the object is in (in the object flows tab when selected)
• Reality links added to object (Linking to reality)

Place 2 - The diagram stage

The IcePanel Diagramming stage - This example shows a component diagram.

You can also add, edit or remove objects from your model within a diagram.

To add new objects:

1. Click on or drag new objects from the tool bar on the left
2. Give it a name

You now have a new object in your model. This is the best and quickest way to build up your model, whilst keeping it in context of the diagram you're creating.

Tip: You can double click the stage to quickly add Systems (at context diagram level), Apps (at System diagram level) and Components (at App diagram level)

To edit an object:

1. Click on the object you want to change
2. Make your edits (for example object name, app icon, connection name change etc.)

Edits automatically update that object everywhere else that it exists. This works really well for connections, where it will update that existing connection in all views, including flows.

To remove an object from a diagram: Click the remove button or press the back space / del key. This will keep the objects in the model still, so you can reuse them later on.

To remove objects from the model:

1. Go to the "Model objects" tool to the left of the diagram
2. Search the object you wish to delete
3. Click the trash icon next to the object you wish to delete. You'll be shown a pop up asking if you are sure, and showing you what it will affect if you do delete it.

Note: You will need to be in the right contect for the object you wish to delete (you won't be able to see or delete components when on a contect diagram).

OR

1. Go to the Model objects tab from the landscape landing view
2. Click and select the object you wish to delete
3. Click the Delete button next to the object name you wish to delete. You'll be shown a pop up asking if you are sure, and showin g you what it will affect if you do delete it.

Diagramming is covered in more detail in the Diagramming section