Gráficos en CSS: cómo crear un organigrama

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En tutoriales anteriores hemos aprendido cómo crear diferentes tipos de gráficos, incluyendo gráficos de barras, gráficos de termómetro y gráficos de anillo. Hoy continuaremos este camino construyendo un organigrama puramente en CSS.

¿Estás listo para poner a prueba tus habilidades en CSS?

El organigrama que vamos a construir

Este es el gráfico en CSS que vamos a crear:

Please accept marketing cookies to load this content.

Está compuesto por cuatro niveles y describe la estructura jerárquica de una empresa.

¿Qué es un organigrama?

Para averiguar qué es un organigrama, tomemos prestada la definición de Wikipedia:

"Un diagrama organizativo, también llamado organigrama o tabla organizacional, es un diagrama que muestra la estructura de una organización y las relaciones y rangos relativos de sus partes y puestos/trabajos. El término también se usa para diagramas similares, por ejemplo aquellos que muestran los diferentes elementos de un campo del conocimiento o de un grupo de lenguajes."

Aquí puedes ver un ejemplo:

De S.s.kulkarni9090, trabajo propio, CC BY-SA 3.0

Este tipo de gráfico se usa comúnmente para presentar las relaciones entre las personas o los departamentos de una empresa. En un sitio web corporativo, probablemente lo encontrarás en la página "Acerca de nosotros" o "Empresa".

También verás organigramas usados para representar árboles genealógicos (consulta el árbol genealógico de la familia real británica y la línea de sucesión en el sitio web de la BBC). Son ideales para ilustrar jerarquías.

1. Especifica el contenedor

Nuestro gráfico residirá en el interior de un contenedor:

1	<div class="container">
2	<!-- Chart goes here -->
3	</div>

2. Define algunos estilos básicos

Antes de ir por sus niveles, configuraremos algunas reglas de restablecimiento y clases de ayuda:

:root {
--level-1: #8dccad;
--level-2: #f5cc7f;
--level-3: #7b9fe0;
--level-4: #f27c8d;
--black: black;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ol {
list-style: none;
}
body {
margin: 50px 0 100px;
text-align: center;
font-family: "Inter", sans-serif;
}
.container {
max-width: 1000px;
padding: 0 10px;
margin: 0 auto;
}
.rectangle {
position: relative;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

Presta atención a la clase rectangle. La agregaremos a cada nodo/elemento de nuestro gráfico.

Nota: no optimicé el CSS por simplicidad. Esto te ayudará a comprender mejor los estilos de cada nivel.

3. Especifica los niveles

En este punto estamos listos para especificar los niveles del gráfico; como discutimos anteriormente, aquí tendremos cuatro de ellos:

Cada nivel representará un rol en una empresa, comenzando por el de mayor rango.

Nivel #1

El primer nivel incluirá solamente un nodo:

HTML

Para describirlo usaremos una etiqueta h1, ya que es la parte más importante de nuestro gráfico:

1	<h1 class="level-1 rectangle">...</h1>

CSS

Usaremos su pseudoelemento ::before para crear una relación entre el primer nivel y el segundo:

/*CUSTOM VARIABLES HERE*/
.level-1 {
    width: 50%;
    margin: 0 auto 40px;
    background: var(--level-1);
}
.level-1::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--black);
}

Nivel #2

El segundo nivel estará compuesto por dos nodos:

Como veremos en un momento, cada nodo incluirá otros nodos hijos.

Estos nodos hijos representarán niveles inferiores de la jerarquía administrativa.

HTML

Para describirlo, usaremos una lista ordenada con dos elementos de lista. Cada elemento de lista contendrá un elemento h2:

1	<ol class="level-2-wrapper">
2	<li>
3	<h2 class="level-2 rectangle">...</h2>
4	</li>
5	<li>
6	<h2 class="level-2 rectangle">...</h2>
7	</li>
8	</ol>

CSS

Crearemos el diseño de este nivel gracias a la ayuda de CSS Grid.

A continuación usaremos el pseudoelemento ::before de elementos específicos para crear las asociaciones entre los nodos de este nivel y los niveles adyacentes:

/*CUSTOM VARIABLES HERE*/
.level-2-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.level-2-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 25%;
    width: 50%;
    height: 2px;
    background: var(--black);
}
.level-2-wrapper::after {
    display: none;
    content: "";
    position: absolute;
    left: -20px;
    bottom: -20px;
    width: 100%;
    height: 2px;
    background: var(--black);
}
.level-2-wrapper li {
    position: relative;
}
.level-2-wrapper > li::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--black);
}
.level-2 {
    width: 70%;
    margin: 0 auto 40px;
    background: var(--level-2);
}
.level-2::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--black);
}
.level-2::after {
    display: none;
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-100%, -50%);
    width: 20px;
    height: 2px;
    background: var(--black);
}

Observa que también definimos el pseudoelemento ::after de los nodos de segundo nivel. Esto aparecerá solamente en las pantallas pequeñas.

Nivel #3

El tercer nivel incluirá cuatro nodos.

Asociaremos los primeros dos nodos con el primer nodo del segundo nivel, y asociaremos los dos últimos nodos con su segundo nodo:

HTML

Definiremos dos listas nuevas todavía dentro de la lista inicial en donde reside el segundo nivel. Cada una de ellas contendrá dos elementos de lista. Para cada elemento de lista especificaremos un elemento h3:

1	<ol class="level-2-wrapper">
2	<li>
3	...
4	<ol class="level-3-wrapper">
5	<li>
6	<h3 class="level-3 rectangle">...</h3>
7	</li>
8	<li>
9	<h3 class="level-3 rectangle">...</h3>
10	</li>
11	</ol>
12	</li>
13	<li>
14	...
15	<ol class="level-3-wrapper">
16	<li>
17	<h3 class="level-3 rectangle">...</h3>
18	</li>
19	<li>
20	<h3 class="level-3 rectangle">...</h3>
21	</li>
22	</ol>
23	</li>
24	</ol>

CSS

Posicionaremos los nodos nuevamente gracias a la ayuda de CSS Grid.

De la misma forma, estableceremos el pseudoelemento ::before de elementos específicos para crear las conexiones necesarias:

/*CUSTOM VARIABLES HERE*/
.level-3-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    width: 90%;
    margin: 0 auto;
}
.level-3-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: calc(25% - 5px);
    width: calc(50% + 10px);
    height: 2px;
    background: var(--black);
}
.level-3-wrapper > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 2px;
    height: 20px;
    background: var(--black);
}
.level-3 {
    margin-bottom: 20px;
    background: var(--level-3);
}

Nivel #4

Para el cuarto nivel necesitaremos dieciséis nodos. Estos serán distribuidos igualmente en cuatro listas.

Cada nodo del tercer nivel incluirá una lista:

HTML

Definiremos cuatro listas nuevas todavía en el interior de la lista inicial en la que reside el segundo nivel. Cada una de ellas contendrá cuatro elementos de lista. Para cada elemento de lista especificaremos un elemento h4:

1	<ol class="level-2-wrapper">
2	<li>
3	...
4	<ol class="level-3-wrapper">
5	<li>
6	...
7	<ol class="level-4-wrapper">
8	<li>
9	<h4 class="level-4 rectangle">...</h4>
10	</li>
11	...
12	</ol>
13	</li>
14	<li>
15	...
16	<ol class="level-4-wrapper">
17	<li>
18	<h4 class="level-4 rectangle">...</h4>
19	</li>
20	...
21	</ol>
22	</li>
23	</ol>
24	</li>
25	<li>
26	...
27	<ol class="level-3-wrapper">
28	<li>
29	...
30	<ol class="level-4-wrapper">
31	<li>
32	<h4 class="level-4 rectangle">...</h4>
33	</li>
34	...
35	</ol>
36	</li>
37	<li>
38	...
39	<ol class="level-4-wrapper">
40	<li>
41	<h4 class="level-4 rectangle">...</h4>
42	</li>
43	...
44	</ol>
45	</li>
46	</ol>
47	</li>
48	</ol>

CSS

Nuevamente estableceremos el pseudoelemento ::before de elementos específicos para asociar los nodos del cuarto nivel con sus padres:

/*CUSTOM VARIABLES HERE*/
.level-4-wrapper {
    position: relative;
    width: 80%;
    margin-left: auto;
}
.level-4-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 2px;
    height: calc(100% + 20px);
    background: var(--black);
}
.level-4-wrapper li + li {
    margin-top: 20px;
}
.level-4 {
    font-weight: normal;
    background: var(--level-4);
}
.level-4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-100%, -50%);
    width: 20px;
    height: 2px;
    background: var(--black);
}

Los organigramas y la responsividad

Lograr que un organigrama sea responsivo es complicado. Recuerdo tener que reconstruir el marcado una o dos veces hasta llegar a esta versión. Por lo tanto, si planeas crear un gráfico de ese tipo, te recomiendo que sigas un enfoque basado en los dispositivos móviles.

Con todo esto en mente, este es su diseño para dispositivos móviles:

Para lograr este comportamiento tenemos que modificar algunos estilos:

@media screen and (max-width: 700px) {
    .rectangle {
        padding: 20px 10px;
    }
    .level-1,
    .level-2 {
        width: 100%;
    }
    .level-1 {
        margin-bottom: 20px;
    }
    .level-1::before,
    .level-2-wrapper > li::before {
        display: none;
    }
    .level-2-wrapper,
    .level-2-wrapper::after,
    .level-2::after {
        display: block;
    }
    .level-2-wrapper {
        width: 90%;
        margin-left: 10%;
    }
    .level-2-wrapper::before {
        left: -20px;
        width: 2px;
        height: calc(100% + 40px);
    }
    .level-2-wrapper > li:not(:first-child) {
        margin-top: 50px;
    }
}

¡Hemos terminado nuestro gráfico en CSS!

¡Enhorabuena, amigos! Sin escribir una sola línea de JavaScript, hemos logrado construir un organigrama completamente funcional.

Recordemos lo que construimos:

Please accept marketing cookies to load this content.

Por supuesto, ten en cuenta que nuestro gráfico tiene una estructura específica. Dependiendo de tus necesidades es posible que quieras enriquecer su contenido o modificar su diseño. Si necesitas algo más avanzado o dinámico, echa un vistazo a algunas bibliotecas de JavaScript como Highcharts.js.

¿Alguna vez has creado un gráfico en CSS? Si es así, ¡por favor comparte tu experiencia con nosotros!

Más gráficos en CSS (algunas veces con JavaScript)

Si aún necesitas un poco de inspiración, no olvides consultar mis otros gráficos en el archivo de Tuts+ o haz una búsqueda rápida en CodePen.

Como siempre, ¡muchas gracias por leer!