Skip to main content

Modeling tool

Modeling tool

A click on the Label of a diagram will open it in the Modeling tool. This tool is designed to help software architects create, manage and refine architectural diagrams with ease.

In the top right corner of the page, there is an overflow menu. Here, you can open the diagram details and edit them.

The modeling canvas

The canvas is the central workspace of the modeling tool. It provides an interactive, drag-and-drop environment to easily add, position, and connect model elements such as systems, containers, components and actors.

You can click anywhere and drag the canvas in order to navigate through the diagram.

In the bottom left corner, you find capabilities to

  • Toggle selection mode
    • When selection mode is on, you can select several cards and groups at once to reposition them on the canvas. Groups and expanded systems/containers can be moved as a whole by clicking and dragging the icon appearing in the top right corner of their frame.
    • In normal mode, you can move freely around on the canvas by click and drag.
  • Undo and Redo
  • Zoom in/out
  • Fit the view, i.e. display the whole diagram on the canvas in an appropriate zoom rate
  • Toggle the interactivity of the diagram, e.g. for presentation or overview purposes
  • Auto layout with further options to adjust your view

In the bottom right corner, a mini map visualizes which part of the diagram is being displayed on the canvas at the moment. You can also use this mini map to move around the canvas.

Adding model elements

In the top right corner of the canvas, you can find a (+) button with which new elements can be added to the canvas.

  • New elements can be found at the top of the menu. You can directly enter a label for the element and add it to the canvas; alternatively it is also possible to just drag-and-drop an element from the list into the canvas and name it afterwards.
  • Available elements lists all model elements that already exist in the project (see Model elements) and are available to be used in the diagram. They are sorted by type (Actors, Systems, Groups, Containers, Components).

Editing model elements

With one click on a model element card, you can open its details; here you can view and edit the same information that is also provided in the Model elements overview:

  • Details: Master data of the model element (see also Create a model element); all writable fields are editable here as well.
  • Usages: Displays where the model element is already in use. This can be Diagrams and/or Groups within diagrams to which the element has been added, as well as Systems (for Containers) or Containers (for Components), if the element is already part of a system/container.
  • Relationships: This tab comprises all Incoming and Outgoing relationships to other model elements of the project. In a diagram, these relationships are visualized as arrows between model element cards. Clicking on one of the elements in this section highlights the corresponding element in the canvas as well.
  • Loop: Here, you can find links and connections to other parts of the project.

All changes that are done here are automatically reflected in the Model elements overview, and vice versa.

Mamaging model elements

With a right-click on a model element, different options are available:

  • Copy: Copy (and paste) a model element
  • Cut: Cut (and paste) a model element
  • Model element and Expanded model element: Changes the view between normal view and expanded view to add elements inside (read more about this here)
  • Spotlight: Opens the spotlight of this model element
  • Remove from diagram: Removes the model element from this particular diagram. You can still find it in the available model elements.
  • Delete from project: Deletes the model element from the project. You will need to confirm the action before the selected model element is permanently deleted.

Removing and deleting model elements

In the model element details, you can also access the capabilities to Remove the model element from the diagram and Delete the model element from the project altogether in the overflow menu of the details header.

warning

You can only delete a model element if it is not in use, i.e. if it not yet contains other model elements. You will need to confirm the action before the selected model element is permanently deleted.

All changes that are done here are automatically reflected in the Model elements overview, and vice versa.

Connecting model elements (Relationships)

Each model element card has two nodes for adding relationships. Just click on the bottom node and drag the cursor to the top node of the model element you want to connect it to. The Incoming and Outcoming endpoints are immediately reflected within the Relationships tab of the model elements details as well.

You can specify the type of relationship between the two elements by clicking on the relationship and entering a label in the sidebar.

❗️info

If you remove a relationship between two model elements, it does not get deleted, but will be re-added automatically if you connect the two elements again.

Creating additional levels of a diagram

A system model element can comprise one or several containers, and a container can comprise one or several components. In order to correctly reflect these connections, a new corresponding diagram must be created.

If you want to further model a system, right-click on the system card and select Create diagram in order to create a new Container diagram (Level 2) for this system. The new diagram level will automatically be displayed. The system card will become larger and can be adjusted in size; containers can then just be dragged an dropped into the system. The same procedure applies to containers and their components (Level 3 - Component diagram).

If there already are one or several corresponding diagrams (indicated by an arrow in the bottom right corner of the model element card), you can drill down into the next level by right-clicking on the card and selecting Drill down. You can then select the diagram to which you want to drill down. To drill back up to the former diagram click on the arrow icon in the top left corner of the canvas header, next to the title.

❗️info

It is possible to have several systems in a container diagram (and several containers in a component diagram) and to expand each of them them to add further model elements inside. It is, however, recommended to work according to C4 Modeling principles and use several diagrams to model specific aspects of your system architecture.

Managing model elements within other model elements

If you add a system to a container diagram, or a container to a component diagram, and want to add elements into these parts, you first have to expand the system/container. To do this, right-click on the element you want to expand and select Expanded model element. The card then becomes bigger and items can be moved inside. You can go back to the simple card view of a system/container by right-clicking again and selecting Model element in the menu.

As soon as a model element is inside a parent model element (system, container, or group), it cannot be moved outside of the parent element anymore. If you want to move an element out of a parent element, you first need to detach it. Right-click on the element you want to move and select Detach from group/system/container. The element can then be moved outside again.

Creating a service project for a container

For container model elements, you can also directly create a service project for subsequent implementation. Create new project can be accessed via right click on the container in the canvas, as well as from the overflow menu of a container's details view.