Organigrama vertical y horizontal

[Rafael]

En realidad hay que editarle mucho, pero como tip están usando como conectores esto:

Código CSS:

.organizational-chart li::before {
  top: 50%;
  left: 100%;
  width: 2em;
  border: 1px solid #F55;
}
.organizational-chart li::after {
  top: 0;
  right: -2em;
  height: 1em;
  border: 1px solid #5F5;
}
 

Pero la realidad es de que yo usaría una imagen :oP No me gusta ese organigrama ya que la lógica es que esté anidado, como el primero

Código HTML:

<ul>
<li>
  <ul>
  </ul>
</li>
</ul>
 

Puedes buscar más opciones que ya estén desarrolladas: https://www.google.com.mx/search?q=O...tion+chart+css