Architecture Diagrams

Build and maintain system architecture with a visual block editor.

The Architecture Editor

Navigate to the Architecture page from the left-hand sidebar of your project. The editor provides a visual canvas — built on ReactFlow — where you create and connect system blocks to define your architecture.

Use the mouse wheel or trackpad pinch gesture to zoom in and out. Click and drag on an empty area of the canvas to pan. The toolbar at the top of the canvas provides block creation tools, connector tools, and layout options for automatically arranging blocks.

Creating Blocks

Click Add Block in the toolbar to create a new component on the canvas. Each block represents a system element. Common block types include:

• ECUs — Electronic control units that host software and manage hardware interfaces.
• Software Modules — Logical groupings of functionality within an ECU or computing platform.
• Sensors — Input devices that provide data to the system (temperature probes, accelerometers, cameras).
• Actuators — Output devices that act on the physical world (motors, valves, displays).
• Custom Types — Define your own component types to match your domain vocabulary.

After placing a block, give it a descriptive name and add an optional description that explains its role in the system. Blocks appear as draggable rectangles on the canvas. Resize them by dragging the corner handles, and reposition them by dragging the block body.

Defining Connectors

Connect blocks by dragging from one block's output port to another block's input port. A line appears as you drag, snapping to the target port when you release.

Each connector represents a relationship between two blocks. Common connector types include:

• Data Flows — Information exchanged between components (CAN messages, Ethernet frames, shared memory).
• Control Signals — Command-and-response pathways between controllers and actuators.
• Power Connections — Electrical power distribution between components.
• Logical Dependencies — Abstract relationships indicating that one component depends on another.

After creating a connector, click on it to open its detail panel. Label the connector with a meaningful name, specify its direction (unidirectional or bidirectional), and optionally define the data type or protocol it carries.

Block Library

Frequently used blocks can be saved to the Block Library for reuse across diagrams within the same project. This ensures consistency when the same component appears in multiple architecture views.

To save a block to the library:

1. Right-click the block on the canvas and select Save to Library.
2. The block — including its name, description, ports, and styling — is stored in the library.
3. To reuse it, open the library panel and drag the saved block onto any diagram canvas.

Library blocks retain their identity. When you update a library entry, existing instances on diagrams are not changed automatically; you can choose to sync them manually. This prevents unintended changes to diagrams that have already been reviewed or baselined.

Floating Diagram Windows

Open multiple diagram views simultaneously in floating, draggable windows. Each window maintains its own independent viewport — its own zoom level and pan position — so you can inspect different areas of the architecture side by side without losing your place.

To open a floating window:

1. Right-click on a block or an empty area of the canvas.
2. Select Open in Floating Window.
3. A new draggable window appears, showing the selected view.

Floating windows are especially useful when working on large systems where the architecture spans multiple levels of decomposition. For example, keep the top-level system view in one window while editing a detailed subsystem view in another.

Diagram Snapshots

Capture a screenshot of any diagram and save it directly to the Document Manager. Snapshots are useful for including architecture views in requirements documents, design review packages, and compliance evidence.

To capture a snapshot:

1. Arrange the diagram so the area you want to capture is visible on the canvas.
2. Click Snapshot in the toolbar (or right-click and select Take Snapshot).
3. AIRGen renders a high-resolution image of the current viewport.
4. Choose a destination folder in the Document Manager and click Save.

The saved image appears in your Documents file list and can be inserted into any document section using the Markdown editor's image syntax. Snapshots are included when you take a project baseline, providing a visual record of the architecture at that point in time.