Skip to main content

How to create a flowchart in CSS

I am trying to put together a diagram in CSS of a flow chart. I have attached below a picture. Is there a simple way to do this? I've been Googling around quite a bit looking for examples, but I don't know what to call this.

Can you please let me know how to do this? Or if this is something common, what I can Google to find more information.

enter image description here

by Collin Cunningham in StackOverflow on July 04, 2022.
Answer

By using CSS Flex you could achieve something like:

body {font: 16px/1.4 sans-serif;}

.chart-row, 
.chart-col {
  display: flex;
  gap: 1em;
}

.chart-row {
  flex-direction: row;
}

.chart-col {
  flex-direction: column;
}

.chart-pill,
.chart-rect{
  padding: 1em;
  text-align: center;
  border: 2px solid #999;
}

.chart-pill {
  flex: 1;
  border-radius: 1em;
  border-style: dashed;
}

.chart-rect{
  flex: 0;
  margin: auto 0;
  background: #eee;
}

.chart-line-h {
  height: 2px;
  min-width: 3em;
  background: #999;
  margin: auto -1em;
}
<div class="chart-row">
  <div class="chart-pill chart-col">
    <div class="chart-rect">alpha</div>
  </div>
  <div class="chart-line-h"></div>
  <div class="chart-pill chart-col">
    <div class="chart-rect">beta</div>
    <div class="chart-rect">gamma</div>
    <div class="chart-rect">delta</div>
  </div>
  <div class="chart-line-h"></div>
  <div class="chart-pill chart-col">
    <div class="chart-rect">gamma</div>
  </div>
</div>

by Roko C. Buljan on July 05, 2022.
Other helpful answers

I'll just add an answer because I can't write any comments yet, although I'm not new at CSS...

Yes, you can use Flexbox but I will also add CSS Grid, as the combination of both can give you more flexibility if you're planning on making bigger charts...

Once you get it working, it's pretty easy to use...

Copy and paste this code in your code editor and display it in your browser.

( if you use VSCode you can use the liveServer extension)

Then go to the dev tools inside your browser (Ctrl+Shift+i) and click the icon to select an element (the one on top at the very left hand side).

Then, inside the first div, you will see a label with the word grid, click it and you'll see the grid on your screen.

Finally, you just have to fill the rows and columns with the figures as in one of those old battleship games, or a 2D Cartesian Coordinate System.

Keep in mind that when placing your items on the Grid, it's better to use the lines instead of the areas of the rows and columns, as it's much easier to understand it this way.

flowchart & CSS Grid positioning

So for instance, in this case, connector1 goes from vertical line 9 to vertical line 10, or the first figure fills the space between line 5 and line 9, and so on.

Hope it helps!

By the way, I changed colours as it's easier for the explanation..

HTML :

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>

</head>
  <body>
  
      <!-- GRID FLOWCHART -->
      <div class="flowchart">

        <!-- FIRST FIGURE -->
        <div class="set" id="set1">
          <div class="box"><p>alpha</p></div>
      </div>

      <!-- FIRST CONNECTOR -->
      <div class="connector" id="connector1"></div>

      <!-- SECOND FIGURE -->
      <div class="set" id="set2">
        <div class="box"><p>beta</p></div>
        <div class="box"><p>gamma</p></div>
        <div class="box"><p>delta</p></div>
      </div>
      <!-- SECOND CONNECTOR -->
      <div class="connector" id="connector2"></div>

      <!-- THIRD FIGURE -->
      <div class="set" id="set3">
        <div class="box"><p>gamma</p></div>
      </div>

    </div>


  </body>
</html>

CSS :

body {
  width: 100vw;
  height: 100vh;
  background-color: #d3d3d3;
}

/* ****** GENERIC SHAPES : ********** */

.flowchart {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(12, 1fr);
  width: fit-content;
  height: fit-content;
  grid-gap: 2px;
}

.set {
  min-width: 100px;
  min-height: 100px;
  border: 2px dashed blue;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 80%;
  height: 15%;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 4%;
  padding: 6%;
  border: 1px solid black;
  /* border-radius: 5px; */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.9em;
}

.connector {
  width: 120%;
  max-height: 3px;
  background-color: black;
  transform: translateX(-6%);
}

/* ************* FIGURES : ************* */

#set1 {
  grid-column: 5/9;
  grid-row: 5/12;
}
#set2 {
  grid-column: 10/14;
  grid-row: 5/12;
}
#set3 {
  grid-column:15/19;
  grid-row: 5/12;
}


/* ******** CONNECTORS : *********** */

#connector1 {
  grid-column: 9/10;
  grid-row: 8/9;
}

#connector2 {
  grid-column: 14/15;
  grid-row: 8/9;
}
by isaac on July 05, 2022.

Comments

Post a Comment