C4 views, layout, and export

Create Context, Container, and Component views, control layout and filtering, and export C4 diagrams as SVG, PNG, or project JSON.

AAL C4 v0.2 — Level-Aware Semantics
Getting Started
Sign in

Use C4 AI Instructions with an external AI assistant, then copy its generated AAL into a new C4 Architecture project. Inspect diagnostics and explicitly Save.

Independent project copies
Use Clone to cloud or Clone to local from a project card’s menu. The copy includes the last saved source and layout; future changes do not sync. Duplicate keeps the same location. Cloning is available only on the Projects page. At three cloud projects, delete one to make room; existing cloud projects can still be saved.

Context View

Shows all persons and systems at the top level. No containers or components are visible. This is the highest-level C4 view.

Syntax: view context { ... }
Example
view context {
    title "Platform — System Context"
    layout left-to-right
}

Container View

Shows all containers within a specific software system, plus external dependencies. Requires a system target. Supports include/exclude filtering.

Syntax: view container <system> { ... }
Example
view container BankingPlatform {
    title "Banking — Container Architecture"
    layout left-to-right
    include Customer
    exclude AuditSystem
}

Component View

Shows all components within a specific container, plus external dependencies. Requires a container target. Supports include/exclude filtering. Component views can be dense — use compact rendering.

Syntax: view component <container> { ... }
Example
view component BankingAPI {
    title "Banking API — Component Architecture"
    layout top-to-bottom
}

Include / Exclude

Views support optional include and exclude directives:

Example
view container Platform {
    title "Platform — Container Architecture"
    layout left-to-right

    include Customer
    include Identity
    exclude AuditSystem
}
include <ElementId>Forces inclusion of an element in the view, even if it would not normally appear. Useful for showing external systems or people in a container view.
exclude <ElementId>Removes an element from the rendered view. Explicit exclude overrides automatic relevance inclusion. The view target can never be excluded.

Layout

AAL view declarations support a layout direction, and the Designer exposes the current layout direction in the toolbar:

left-to-rightElements flow from left to right. Best for container views with horizontal relationships.
top-to-bottomElements flow from top to bottom. Best for hierarchical or layered views.

Component views can be dense — the renderer uses compact node sizing for components automatically.

In the visual Designer, the level selector shows Context, Container, and Component views. The toolbar direction control drives the rendered layout; parsed view filters are still honored for the matching level.

Export (PNG / SVG / Project)

PNG and SVG export faithfully reproduce the current Designer layout. No Auto Layout is run during export — the export consumes the current rendered state.

Export Project (.acefy.json) — choose Export… from the toolbar's project-name menu, then choose Project in the export dialog. The downloaded file includes the project name, AAL source, selected view, and layout configuration; the model is rebuilt from AAL on import.

Exports preserve:

  • Node positions and group boundary dimensions
  • Hierarchy (System → Container → Component)
  • Per-relationship edge styles (Orthogonal / Curved / Straight)
  • Source and target attachment sides
  • Relationship label positions
  • Object colors
  • Canvas background

Export uses the currently selected view (Context, Container, or Component). Only the architecture diagram is exported — no toolbar, editor, or inspector UI.