---
title: Diagram
name: diagram
collection: molecules
notes:
---
<!-- Romandie Desktop -->
<div class="diagram diagram-horizontal">
  <div class="diagram-circle diagram-circle-1 diagram-position diagram-position-center-center">
    <div class="circle-ring circle-ring-outer circle-ring-sawi"></div>
    <img src="/build/svg/logo-sawi-hub.svg" alt="Swiss Marketing Hub & Schools" class="tiny">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-top">
    <div class="inner-text">Speed Learning</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-left-center">
    <div class="inner-text">Formations continues</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
  <!-- Subitems -->
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-left-center-1">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-sawi"></div>
    <img src="/build/svg/logo-sawi-white.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-left-center-2">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-procom"></div>
    <img src="/build/svg/logo-procom-white.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-left-center-3">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-arc"></div>
    <img src="/build/svg/logo-arc-color.svg" alt="">
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-right-center">
    <div class="inner-text">MBA Bachelor</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
  <!-- Subitems -->
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-right-center-1">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-polycom"></div>
    <img src="/build/svg/logo-polycom-color.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-right-center-2">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-supdeluxe"></div>
    <img src="/build/svg/logo-supdeluxe-white.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-right-center-3">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-sms"></div>
    <img src="/build/svg/logo-sms-borderless.svg" alt="">
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-bottom-left">
    <div class="inner-text">Pour les entreprises</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-bottom-right">
    <div class="inner-text">À la carte</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
</div>

<!-- Deutschschweiz horizontal -->
<div class="diagram diagram-horizontal">
  <div class="diagram-circle diagram-circle-1 diagram-position diagram-position-center-center half-line">
    <div class="circle-ring circle-ring-outer circle-ring-sawi"></div>
    <img src="/build/svg/logo-sawi-hub.svg" alt="Swiss Marketing Hub & Schools" class="tiny">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-top">
    <div class="inner-text">Speed Learning</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-left-center no-line">
    <div class="inner-text text-word-break">Berufsbegleitende weiterbildung</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-right-center no-line">
    <div class="inner-text text-word-break">Vollzeitausbildung</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-bottom-left">
    <div class="inner-text text-word-break">Firmenseminare</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-bottom-right">
    <div class="inner-text">Bildung <br> À la carte</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
</div>

<!-- Romandie -->
<div class="diagram diagram-vertical">
  <div class="diagram-circle diagram-circle-1 diagram-position diagram-position-center-center">
    <div class="circle-ring circle-ring-outer circle-ring-sawi"></div>
    <img src="/build/svg/logo-sawi-hub.svg" alt="Swiss Marketing Hub & Schools" class="tiny">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-top">
    <div class="inner-text">MBA Bachelor</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
  <!-- Subitems -->
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-center-top-1">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-polycom"></div>
    <img src="/build/svg/logo-polycom-color.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-center-top-2">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-supdeluxe"></div>
    <img src="/build/svg/logo-supdeluxe-white.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-center-top-3">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-sms"></div>
    <img src="/build/svg/logo-sms-borderless.svg" alt="">
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-bottom">
    <div class="inner-text">Formations continues</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
  <!-- Subitems -->
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-center-bottom-2">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-arc"></div>
    <img src="/build/svg/logo-arc-color.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-center-bottom-1">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-procom"></div>
    <img src="/build/svg/logo-procom-white.svg" alt="">
  </div>
  <div class="diagram-circle diagram-circle-3 diagram-position diagram-position-center-bottom-3">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
    <div class="circle-ring circle-ring-sawi"></div>
    <img src="/build/svg/logo-sawi-white.svg" alt="">
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-left-center">
    <div class="inner-text">Pour les entreprises</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-right-top">
    <div class="inner-text">Speed learning</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-right-bottom">
    <div class="inner-text">À la carte</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
</div>

<!-- Deutschschweiz vertical -->
<div class="diagram diagram-vertical">
  <div class="diagram-circle diagram-circle-1 diagram-position diagram-position-center-center half-line">
    <div class="circle-ring circle-ring-outer circle-ring-sawi"></div>
    <img src="/build/svg/logo-sawi-hub.svg" alt="Swiss Marketing Hub & Schools" class="tiny">
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-top no-line">
    <div class="inner-text text-word-break">Berufsbegleitende weiterbildung</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-center-bottom no-line">
    <div class="inner-text text-word-break">Vollzeitausbildung</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-left-center">
    <div class="inner-text text-word-break">Firmenseminare</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-right-top">
    <div class="inner-text">Speed learning</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>

  <div class="diagram-circle diagram-circle-2 diagram-position diagram-position-right-bottom">
    <div class="inner-text">Bildung <br> À la carte</div>
    <a class="circle-link" href="https://www.sawi.com/romandie"></a>
  </div>
</div>