HTML Organograma empresarial em HTML e CSS

Fabio Zanela · 27 de junho de 2022

Boa tarde

estou precisando fazer um organograma empresarial somente com CSS e HTML, não precisa ser nada muito complexo, somente um organograma estático mesmo

ja tentei procurar soluções na web mas todas são muitas complicadas.

seria algo mais ou menos como a imagem em anexo

se alguém tiver alguma ideia de como fazer isso desde já agradeço

Att.

Fabio Zanela

washalbano · 27 de junho de 2022

Boa tarde!
Mostre-nos como o sr. está fazendo que a gente vai te orientando

MailingTester · 27 de junho de 2022

Já tentaste com esta lib?
https://gojs.net/latest/samples/orgChartEditor.html

Fabio Zanela · 27 de junho de 2022

@MailingTester não porém tenho quase certeza que no site da empresa onde trabalho não vai funcionar pois usamos Wordpress

@washalbano então ja tentei de duas formas, 1º com uma tabela

<style>
.organograma {
	text-align: center;
	color: white;
}
.forma {
	width: 100px;
	height: 50px;
	
}
.level1 {
	background-color: gold;
	position: absolute;
	left: 500px;
}
.level2 {
	background-color: green;
	position:relative;
	top: 75px;
	left: 375px;
}
.level3 {
	background-color: blue;
	position: relative;
	top: 100px;
	left: 375px;
}
</style>
<table class="organograma">
	<tbody>
		<tr>
			<td class="forma level1" colspan="9">Diretor</td>
		</tr>
		<tr>
			<td class="forma level2">Gerente 1</td>
			<td class="forma level2">Gerente 2</td>
			<td class="forma level2">Gerente 3</td>
		</tr>
		<tr>
			<td class="forma level3">Supervisor 1</td>
			<td class="forma level3">Supervisor</td>
			<td class="forma level3">Supervisor</td>
		</tr>
	</tbody>
</table>

e o segundo usando divs mas que não diferencia muito

os meus principais problemas são como posicionar cada cargo na tela e segundo como fazer a ligação por linhas verticais e horizontais.ligando os cargos superiores ao de nivel 2 e de nivel 2 aos de nivel 3 como coloquei na imagem de exemplo.

se puderem me ajudar agradeço

DiF · 28 de junho de 2022

@Fabio Zanela

Você consegue fazer com elemento Div, section, Span e P.

HTML:

<div>
  <section class="box">
    <p>Presidente</p>
  </section>
  <span class="point"></span>
  <span class="vertical-line"></span>
  <section class="box fin">
    <p>Financeiro</p>
    <span class="r-point"></span>
    <span class="horizontal-line"></span>
    <span class="l-point"></span>
    <section class="box rh">
      <p>RH</p>
    </section>
  </section>
   <section class="box ti-cont">
    <p>TI</p>
    <span class="r-point"></span>
    <span class="horizontal-line"></span>
    <span class="l-point"></span>
    <section class="box rh">
      <p>Contábil</p>
    </section>
  </section>
  
 <span class="horizontal-line h-line-big"></span>
  
    <section class="box prod">
      <section class="circle-line">
        <span class="vertical-line v-line-small"></span>
        <span class="point top top-prod"></span>
        <p>Produção</p>
      </section>
     </section>
    <section class="box com">
      <span class="point top"></span>
      <p>Comercial</p>
     </section> 
    <section class="box log">
    <p>Logística</p>
       <section class="circle-line cl-log">
        <span class="vertical-line v-line-small"></span>
        <span class="point top top-log"></span>
      </section>     
      </section> 
</div>

CSS:

body{background-color: #ededed;}
div{ width: 960px; height:600px; margin: 0 auto; position: relative; }

.box{
  width: 200px;
  height: 100px; 
  background: #ededed;
  margin: 0 auto;
  border-radius: 20px;
  border: 3px solid #575656;
}

p{
  font-size: 16pt;
  text-align: center;  
  font-family:arial;
  padding: 10px;
}

.fin{
  position: absolute;
  top: 150px;
  left: 220px;
}

.rh{
  position: absolute;
  top: -4px;
  left: 312px;
  z-index:1;
}

.ti-cont{
   position: absolute;
  top: 290px;
  left: 220px;
}

.prod{
    position: absolute;
  top: 458px;
  left: 145px;
}

.prod-aligin{
   top: 434px;
}

.log{
    position: absolute;
  top: 458px;
  left: 604px;
}

.com{
  position: absolute;
  top: 458px;
  left: 374px;
}

.point{
   width: 10px;
  height: 10px;
  background-color: #ededed;
  display: block;
  border: 2px solid orange;
  border-radius: 10px;
  margin: -10px auto;
}
.top{
  position: relative;
  top: 0px;
  left: 3px;
}
.top-log{
  left: 0px;
}

.top-prod{
  left: 0px;
}

.r-point{
   width: 10px;
  height: 10px;
  background-color: #ededed;
  display: block;
  border: 2px solid orange;
  border-radius: 10px;
  position: absolute;
  top: 40px;
  left: 194px;
}

.l-point{
   width: 10px;
  height: 10px;
  background-color: #ededed;
  display: block;
  border: 2px solid orange;
  border-radius: 10px;
  position: absolute;
  top: 40px;
  left: 305px;
  z-index:2;
}

.vertical-line{
  width: 6px;
  height: 340px;
  background-color: #b3b2b2;
  display: block;
  margin: 10px auto;
  position: relative;
}

.v-line-small{
  height: 20px;
 
}

.circle-line{
  position: relative;
  top: -37px;
}

.cl-log{
  position: relative;
  top: -82px;
}

.horizontal-line{
  width: 100px;
  height: 6px;
  background-color: #b3b2b2;
  display: block;
  position: absolute;
  top: 44px;
  left: 208px;
  
}

.h-line-big{
  position: absolute;
  width: 465px;
  top: 428px;
  left: 245px;
}

Veja funcionando aqui: https://jsfiddle.net/dife/5f8r9qh6/1/

Para fazer as linhas e os conectores, você pode usar o elemento span com regras de display block e um pequeno width. Já os conectors, um elemento span de width 10x10 com border radius em 10px.

Repare na estrutura, que algumas regras css foram repetidas nos elementos em comum, por exemplo Financeiro, RH, TI e Contábil, são as mesmas regras, para economizar linhas no css. Foram criadas novas regras, onde tinha que ajustar unicamente para algum lado ou para cima ou para baixo.. Enfim.. estude esses códigos e tente replicar eles. Não copie, pois certamente quem lhe deu a tarefa, vai pesquisar aqui... O código, só serve para seu estudo.

Fabio Zanela · 28 de junho de 2022

@DiF já me ajudou muito obrigado

a unica questão não teria outro jeito de posicionar por exemplo os box ou as linhas verticais com somente uma classe no CSS?? tipo ter uma classe linha-vertical que eu posiciona-se todas elas de uma vez so??

washalbano · 28 de junho de 2022

Muito boa a sua solução @DiF!
Me instigou a também escrever uma sugestão que pode ser conferida em: https://codepen.io/washalbano/pen/poLoNxN

<section class="organogram">
      <div class="row p-12"><div class="block pin-b">Presidente</div></div>
      <div class="row p-12">
        <div class="block pin-e">Financeiro</div>
        <hr />
        <div class="block pin-s">RH</div>
      </div>
      <div class="row p-12">
        <div class="block pin-e">TI</div>
        <hr />
        <div class="block pin-s">Contábil</div>
      </div>
      <div class="row"><hr class="half-square" /></div>
      <div class="row align-items-start">
        <div class="block pin-t">Produção</div>
        <div class="block pin-t">Comercial<br />Central</div>
        <div class="block pin-t">Logística</div>
      </div>
    </section>

:root {
  --bgc: #ededed;
  --pointSize: 10px;
  --lineBorderWidth: 4px;
  --lineStyle: var(--lineBorderWidth) solid #ccc;
  --lineHeight: 20px;
  --blockWidth: 150px;
  --blockHeight: 50px;
  --blockMargin: 24px;
  --p12: 12px;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  background-color: var(--bgc);
  font-family: arial;
}

.p-12 {
  padding: var(--p12);
}
.align-items-start {
  align-items: start !important;
}
.organogram {
  padding: var(--p12);
}

.organogram .row,
.organogram .block,
.organogram hr.half-square {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.organogram .block {
  border: 2px solid #333;
  padding: var(--p12);
  border-radius: var(--p12);
  width: var(--blockWidth);
  min-height: var(--blockHeight);
  position: relative;
}
.organogram .block + .block {
  margin-left: var(--blockMargin);
}
.organogram hr {
  width: 90px;
  height: 0;
  border: none;
  border-bottom: var(--lineStyle);
  margin: 0;
  z-index: -1;
}

.organogram hr.half-square {
  border: var(--lineStyle);
  border-bottom: none;
  width: calc(2 * var(--blockWidth) + 2 * var(--blockMargin) + var(--lineBorderWidth));
  height: var(--lineHeight);
  position: relative;
  overflow: visible;
}
.organogram hr.half-square:before {
  content: '';
  position: absolute;
  border-right: var(--lineStyle);
  min-height: calc(2 * var(--blockHeight) + 5 * var(--p12) + var(--lineHeight));
  bottom: 0;
}

.organogram .block:before,
.organogram .block:after {
  background-color: var(--bgc);
  content: '';
  position: absolute;
  border-radius: 50%;
  width: calc(var(--pointSize) + 2px);
  height: calc(var(--pointSize) + 2px);
}

.organogram .block:after {
  width: var(--pointSize);
  height: var(--pointSize);
  border: 2px solid orange;
}

.organogram .block.pin-s:before,
.organogram .block.pin-s:after {
  top: 50%;
  left: 0;
  transform: translate(calc(-50% - 1px), calc(-50%));
}
.organogram .block.pin-e:before,
.organogram .block.pin-e:after {
  top: 50%;
  right: 0;
  transform: translate(calc(50% + 1px), calc(-50%));
}
.organogram .block.pin-t:before,
.organogram .block.pin-t:after {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-50% - 1px));
}

.organogram .block.pin-b:before,
.organogram .block.pin-b:after {
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50%), calc(50% + 1px));
}

7 minutos atrás, Fabio Zanela disse:

não teria outro jeito de posicionar por exemplo os box ou as linhas verticais com somente uma classe no CSS

Acho bem difícil
Não pensei nessa possibilidade, da forma que fiz, você pode aumentar o número de linhas infinitamente.
Mas para as colunas, vai precisar fazer ajustes:

Não pensei, por exemplo, na possibilidade de um desses blocos terem essa rodeirinha laranja em mais de um lado

Da forma q pensei, somente a primeira e a última linha poderão ter blocos com texto de mais de 1 linha
se um dos blocos centrais variar o número de linhas de texto, já vai complicar bastante.

Fabio Zanela · 28 de junho de 2022

@washalbano pois é pelo jeito para posicionar cada box vou ter que criar uma classe pra cada um e definir a sua posição (e para as linhas também)

acho muito trabalho mas se é o unico jeito

DiF · 28 de junho de 2022

@Fabio Zanela Se você ver ali no css, eu criei uma classe pra linha vertical e horizontal, você vai usar ela como base, mas se você quiser modificar uma por exemplo, vai ter que criar uma nova classe, que sobrescreva a regra da outra em partes ou que adiciona novas propriedades. Perfeitamente normal isso.

Por exemplo:

.linha-horizontal{
  width: 100px;
  height: 6px
  display: block;
  background-color: #000;
}

.diagonal{
  transform: rotate(45deg); 
}

<span class="linha-horizontal"></span>
<span class="linha-horizontal diagonal"></span>

Fazer só com CSS, as vezes vai te dar mais trabalho, como o colega lá mais acima sugeriu, existe uma biblioteca para criação desse tipo de coisa que torna muito mais fácil. Para fins profissionais, é melhor, mas se é para um teste que necessariamente precisa usar somente CSS, dessa forma é melhor.

Fabio Zanela · 29 de junho de 2022

Boa tarde pessoal

graças a ajuda de cada um de vocês consegui fazer o tal organograma porém como ele é grande está excedendo horizontalmente o tamanho da pagina web

tem um jeito de resolver isso??

ja tentei reduzir a fonte o que ajudou um pouco porém não gostaria de deixar com uma fonte muito pequena

tem um jeito de resolver isso??

segue abaixo o codigo HTML e CSS

<div class="organograma">
    <div class="box level1">Prefeito</div>
    <div class="linhaPrefeito"></div>
    <div class="linhaAssistente"></div>        
    <div class="linhaAssistente2"></div>
    <div>
        <div class="box assistente gabinete">Gabinete do<br>Prefeito</div>
        <div class="box assistente juridico">Asessoria<br>Jurídica</div>
        <div class="box assistente controle">Sistema de<br>Controle Interno</div>
    </div>
    <div class="linhaGrande"></div>
    <div>
        <div class="dpto admin">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaAdmin"></div>
            <div class="box level2">Administração e Planejamento</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Expedição de Documentos</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Material e Patrimônio</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Serviços<br>Gerais</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Imprensa</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Informática</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Recursos<br>Humanos</div>
        </div>
        <div class="dpto fin">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaFin"></div>
            <div class="box level2 alinhartexto">Finanças</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Contabilidade</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Tesouraria</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Cadastro e Tributação</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Fiscalização Externa de Tributos</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Compras</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Licitações e Contratos</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Asessoramento à Contabilidade</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Controle de Contratos e Convênios</div>
        </div>
        <div class="dpto ind">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaInd"></div>
            <div class="box level2">Indústria, Comércio e Turismo</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Assistência à Indústria</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Assistência ao Comércio</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Assistência ao Turismo</div>
        </div>
        <div class="dpto rod">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaRod"></div>
            <div class="box level2">Obras e Serviços Rodoviários</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Obras</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Serviços<br>Rodoviários</div>
        </div>
        <div class="dpto urb">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaUrb"></div>
            <div class="box level2">Obras e Serviços Urbanos</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Engenharia</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Obras<br>Urbanas</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Serviços<br>Urbanos</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Logradouros Públicos</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Utilidade<br>Pública</div>
        </div>
        <div class="dpto social">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaSocial"></div>
            <div class="box level2">Ação Social</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Assistência<br>Social</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Assessoramento a Programas Sociais</div>
        </div>
        <div class="dpto saude">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaSaude"></div>
            <div class="box level2 alinhartexto">Saúde</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Saúde</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Vigilância<br>Sanitária</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Vigilância Epidemiológica</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Asessoramento a Programas de Saúde</div>
        </div>
        <div class="dpto educacao">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaEducacao"></div>
            <div class="box level2">Educação, Cultura e Esportes</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Ensino</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Cultura</div>
            <div class="linhaDiv"></div>
            <div class="box level3 alinhartexto">Esporte</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Educação<br>Física</div>
        </div>
        <div class="dpto agricultura">
            <div class="linhaDpto"></div>
            <div class="linhaDptoHorizontal linhaAgricultura"></div>
            <div class="box level2">Agricultura, Pecuária e Meio Ambiente</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Fomento<br>Agrícola</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Fomento<br>Pecuário</div>
            <div class="linhaDiv"></div>
            <div class="box level3">Proteção ao Meio Ambiente</div>
        </div>
    </div>
</div>

.organograma {
    text-align: center;
    color: white;
    height: 850px;
    position: relative;
    top: 150px;
    font-size: 12px;
}
/*Define o tamanho e espaçamento de cada box*/
.box {
    width: 130px;
    height: 50px;
    margin: 10px;
}
/*Define as cores e alinhamento vertical do texto*/
.level1 {
    background-color: #FFC000;
    padding: 15px;
    position: absolute;
    top: -10px;
    left: 600px;
}
.assistente {
    background-color: #ED7D31;
    padding: 7px;
}
.level2 {
    background-color: #70AD47;
    padding: 7px;
}
.level3 {
    background-color: #4472C4;
    margin-left: 25px;
    padding: 7px;
}
.alinhartexto {
    padding: 15px;
}
/*Define o posicionamento dos cargos de assistência*/
.gabinete {
   position: absolute;
   top: 50px;
   left: 430px;
}
.juridico {
    position: absolute;
    top: 50px;
    left: 770px;
}
.controle {
    position: absolute;
    top: 125px;
    left: 430px;
}
/*Define a posição das colunas de cada departamento*/
.dpto {
    position: absolute;
    top: 200px;
}
/*Cria a linha que sai do Prefeito para os Departamentos*/
.linhaPrefeito {
    width: 5px;
    height: 150px;
    background-color: #70AD47;
    position: absolute;
    top: 50px;
    left: 675px;
}
/*Cria as linhas de ligação dos assistentes ao Prefeito*/
.linhaAssistente {
    width: 210px;
    height: 5px;
    background-color: #70AD47;
    position: absolute;
    top: 85px;
    left: 570px;
}
.linhaAssistente2 {
    width: 110px;
    height: 5px;
    background-color: #70AD47;
    position: absolute;
    top: 155px;
    left: 570px;
}
/*Cria a linha grande sobre os departamentos*/
.linhaGrande {
    width: 1205px;
    height: 5px;
    background-color: #70AD47;
    position: absolute;
    top: 195px;
    left: 75px;
}
/*Cria as linhas pequenas sobre de cada departamento para ligação com a linha grande*/
.linhaDpto {
    width: 5px;
    height: 10px;
    background-color: #70AD47;
    position: absolute;
    top: 0px;
    margin-left: 75px;
}
/*Cria linhas ao lado esquerdo das Divisões*/
.linhaDiv {
    width: 15px;
    height: 5px;
    background-color: #4472C4;
    position: absolute;
    left: 10px;
    margin-top: 20px;
}
/*Cria linhas para ligação dos Departamentos para as Divisões*/
.linhaDptoHorizontal {
    width: 5px;
    background-color: #4472C4;
    position: absolute;
    top: 60px;
    left: 10px;
}
/*Define as alturas das linhas de cada Departamento*/
.linhaAdmin {height: 330px;}
.linhaFin {height: 450px;}
.linhaInd {height: 150px;}
.linhaRod {height: 90px;}
.linhaUrb {height: 275px;}
.linhaSocial {height: 90px;}
.linhaSaude {height: 210px;}
.linhaEducacao {height: 210px;}
.linhaAgricultura {height: 150px;}
/*Define a posição vertical de cada Coluna de Departamento*/
.admin {left: 0px;}
.fin {left: 150px;}
.ind {left: 300px;}
.rod {left: 450px;}
.urb {left: 600px;}
.social {left: 750px;}
.saude {left: 900px;}
.educacao {left: 1050px;}
.agricultura {left: 1200px;}