@if (diagram) {
  <div class="diagram">
    @for (element of diagram.elements; track element) {
      <div>
        <div>
          @switch (element.type) {
            @case ('StartEvent') {
              <div>
                <diagram-start-event [data]="element" />
              </div>
            }
            @case ('ExclusiveGateway') {
              <div>
                <diagram-exclusive-gateway [data]="element" />
              </div>
            }
            @case ('InclusiveGateway') {
              <div>
                <diagram-inclusive-gateway [data]="element" />
              </div>
            }
            @case ('EventGateway') {
              <div>
                <diagram-event-gateway [data]="element" />
              </div>
            }
            @case ('ParallelGateway') {
              <div>
                <diagram-parallel-gateway [data]="element" />
              </div>
            }
            @case ('EndEvent') {
              <div>
                <diagram-end-event [data]="element" />
              </div>
            }
            @case ('UserTask') {
              <div>
                <diagram-user-task [data]="element" />
              </div>
            }
            @case ('ManualTask') {
              <div>
                <diagram-manual-task [data]="element" />
              </div>
            }
            @case ('ServiceTask') {
              <div>
                <diagram-container-service-task [data]="element" />
              </div>
            }
            @case ('ReceiveTask') {
              <div>
                <diagram-receive-task [data]="element" />
              </div>
            }
            @case ('ScriptTask') {
              <div>
                <diagram-script-task [data]="element" />
              </div>
            }
            @case ('BusinessRuleTask') {
              <div>
                <diagram-business-rule-task [data]="element" />
              </div>
            }
            @case ('BoundaryEvent') {
              <div>
                <diagram-boundary-event [data]="element" />
              </div>
            }
            @case ('ThrowEvent') {
              <div>
                <diagram-throw-event [data]="element" />
              </div>
            }
            @case ('IntermediateCatchEvent') {
              <div>
                <diagram-intermediate-catching-event [data]="element" />
              </div>
            }
            @case ('SubProcess') {
              <div>
                <diagram-subprocess [data]="element" />
              </div>
            }
            @case ('EventSubProcess') {
              <div>
                <diagram-event-subprocess [data]="element" />
              </div>
            }
          }
        </div>
      </div>
    }
    @for (flow of diagram.flows; track flow) {
      <div>
        <div>
          @switch (flow.type) {
            @case ('sequenceFlow') {
              <div>
                <adf-diagram-sequence-flow [flow]="flow" />
              </div>
            }
          }
        </div>
      </div>
    }
    @if (diagram.pools) {
      <div>
        <diagram-pools [pools]="diagram.pools" />
      </div>
    }
  </div>
}