Make a simple flowchart/step diagram with html+css+jQuery

First create a container in the area that needs to be rendered in the page, which is used to append new elements later.
```
 <body>
    <div class="container"></div>
  </body>
```

To get the required process data, I define a fake data here.

var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];

The jQuery part loops through the array, creates an html fragment every time it traverses, and inserts the current row. The if judgment made here generates 5 automatic line breaks, and then continues to insert.

// 循环生成步骤项
      $(arr).each(function (index, item) {
        // 第一个或者每循环6个，在尾部生成一行新的ul标签，也就是每5个一行
        if (index == 0 || index % 5 == 0) {
          $(".container").append("<ul></ul>");
        }
        // 生成固定的html片段$new
        var $new = $(`
          <div class="shell">
            <li>
              <div class="item">
                <span style="font-size: 36px;color: #0096ED;">${index + 1}</span>
                <p>${item}</p>
              </div>
            </li>
            <div class="content">
                  <button>文件上传11111111111111111111111111111<br>1<br>2<br>3</button>
            </div>
          </div>
        `);
        // 每遍历一次，就往当前文档中最后一个ul下的尾部添加进去一个$new
        $(`ul:last-of-type`).append($new);
        
        // 此处还需要放入虚线部分代码

       });

Create a dotted line and add it before each element. If the element is the first in the current line, no dotted line will be added.

// 创建一条虚线
        var $line = $(`<div class="line"></div>`);
        // 判断:如果是当前行第一个元素，元素前不加虚线，如果不是第一个，在元素前加虚线
        if (index % 5 != 0 && index > 0) {
          $new.before($line);
        }

Step 3 + Step 4 combined

$(function () {
      // 数据
      var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];
      // 循环生成步骤项
      $(arr).each(function (index, item) {
        // 第一个或者每循环6个，在尾部生成一行新的ul标签，也就是每5个一行
        if (index == 0 || index % 5 == 0) {
          $(".container").append("<ul></ul>");
        }
        // 生成固定的html片段$new
        var $new = $(`
          <div class="shell">
            <li>
              <div class="item">
                <span style="font-size: 36px;color: #0096ED;">${index + 1}</span>
                <p>${item}</p>
              </div>
            </li>
            <div class="content">
                  <button>文件上传11111111111111111111111111111<br>1<br>2<br>3</button>
            </div>
          </div>
        `);
        // 每遍历一次，就往当前文档中最后一个ul下的尾部添加进去一个$new
        $(`ul:last-of-type`).append($new);
        // 创建一条虚线
        var $line = $(`<div class="line"></div>`);
        // 判断:如果是当前行第一个元素，元素前不加虚线，如果不是第一个，在元素前加虚线
        if (index % 5 != 0 && index > 0) {
          $new.before($line);
        }
      });
    });

css part

      ul {
        display: flex;
      }
      li {
        display: flex;
        list-style: none;
        position: relative;
      }
      .item {
        width: 120px;
        height: 100px;
        text-align: center;
        position: relative;
        margin: 0 auto;
      }
      .line {
        border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
        width: 120px;
        align-self: center;
        position: relative;
        top: -50px;
      }
      .shell {
        height: 200px;
        position: relative;
      }
      .content {
        width: 200px;
        height: 100px;
        text-align: center;
        position: absolute;
        left: -50%;
        margin-left: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

Here is the rendering:

The button button here is written by me to test the style, and you can change it according to your needs later.

This is a very simple and clear flow chart, albeit a bit ugly :)

I hope it can help people in need, if you have any questions, please leave me a message :)

Make a simple flowchart/step diagram with html+css+jQuery

Guess you like