Organigrama vertical y horizontal

[kabe_jrr]

Hola amigos:

Estoy construyendo unos organigramas de empresa, bastante sencillos pues sólo van a tener 3 niveles como máximo (que podrían ser el jefazo, el subjefe colgando del nodo del jefazo, y los subordinados del subjefe, sin tener ningún nivel más, aunque también puede ser de 2 niveles, con el jefazo y todos sus subjefes bajo él, sin ningún nivel más).

Basándome en el ejemplo de la siguiente página:

https://codepen.io/rctorr/pen/MyXyGw

y con los estilos que indican, consigo mostrar bien el organigrama que quiero... con una excepción: cuando hay un montón de subordinados. Con esto entonces ya no me caben en la pantalla y el organigrama termina solapando muchos nodos o poniendo unos debajo de otros...

Mi idea ha sido entonces que, para los casos en los que se vaya a sobrepasar el tamaño de la pantalla, construya el organigrama de izquierda a derecha, es decir a la izq del todo el jefazo, y luego ya a partir de ahí hacia la derecha los subjefes, que son muchos. De esta forma el organigrama con todos los subjefes o el gran número de subordinados iría hacia abajo y no en horizontal perjudicado por el tamaño que se haya puesto a la pantalla o ventana.

El caso es que para esto he estado buscando cómo hacerlo, y he visto este ejemplo, que es uno de clasificatorias deportivas...

https://codepen.io/olivier-c/pen/wGvXeZ

Pero claro, a mí me gustaría hacerlo al revés, es decir, como he dicho de izquierda a derecha...

¿Alguien podría echarme una mano con esto?

Espero haberme podido expresar bien... Muchas gracias de antemano.

[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