Process Flow Diagram In Pure CSS

Preview:

Description:

A Pure CSS library to render a Process Flow Diagram illustrating the relationships between nodes defined in nested HTML lists.

How to use it:

1. Load the core stylesheet process_diagram.css in the document.

<link rel="stylesheet" href="process_diagram.css" />

2. Build a hierarchical structure that consists of nodes, descriptions, and links for the process flow diagram.

<ol class="process_diagram">
  <li><div>All this magic is pure CSS &amp; HTML</div></li>
  <li>
    <ul>
      <li>
        <ol>
          <li><div>Node 1.1.1
            <p>
              A paragraph on some details. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div></li>
          <li>
            <ul>
              <li><div>Node 1.1.1.1</div></li>
              <li><div>Node 1.1.1.2</div></li>
            </ul>
          </li>
          <li><div>Node 1.1.2</div></li>
          <li>
            <ul>
              <li><div>Node 1.1.2.1</div></li>
              <li><div>Node 1.1.2.2</div></li>
              <li><div>Node 1.1.2.3</div></li>
            </ul>
          </li>
        </ol>
      </li>
      <li>
        <ol>
          <li><div>Node 1.2.1</div></li>
          <li><div>Node 1.2.2</div></li>
          <li><div>Node 1.2.3</div></li>
        </ol>
      </li>
      <li><div>Node 1.3
        <p>N’importe quoi ici.</p>
        </div></li>
    </ul>
  </li>
  <li>
    <ul>
      <li><div>Node 2.1</div></li>
      <li><div>Node 2.2
        <p>Put anything here.</p>
      </div></li>
      <li><div>Node 2.3</div></li>
    </ul>
  </li>
  <li><div>Node&nbsp;3</div></li>
  <li><div>Download The Package <a href="https://www.cssscript.com/process-flow-diagram/">css_process_diagram</a></div></li>
</ol>

3. Customize the thickness and width of the connection lines.

:root {
  --linethick: 3px;
  --linewidth: 1.8em;
}

4. Customize the styles of the nodes.

.process_diagram li > div { 
  background-color:#eef; 
  color:#666; 
  border-style:solid; 
  border-color:#900; 
  text-align:left; 
}

Changelog:

12/08/2021

• Prevent vertical tick where there’s only one child