Create Great Diagrams using CSS Grid Layouts (Source Code Included)

Why use HTML and CSS instead of images?

Diagrams based on HTML and CSS have the following advantages:

  • Accessibility: If the diagram consists of plain DIV elements, it’s automatically accessible. Screen readers and other assistive technologies can handle HTML beautifully. Your diagrams will be accessible to everyone, and no extra work is required on your part.
  • Responsiveness: Diagrams defined in HTML and CSS can adapt to different screen sizes automatically. No need for users to scroll horizontally and only see parts of the diagram at a time.
  • Easy Styling: If your diagrams are styled using CSS, it’s easier to make them look like the rest of the page. If you decide to change the styles, like fonts and colors, the diagram will be updated automatically.
  • Easy Editing: If your diagrams are based on HTML, changing the text is a matter of editing the text on some HTML blocks. There’s no need to dig out the original application and document with the diagram, edit the document, and re-export it to a PNG or SVG file.
  • Clipboard Support: If your diagrams are based on HTML, people will be able to copy parts of it to get the original text. Of course, they can still take screenshots if they want to copy images.
  • Performance: Images are large! Even if you size if properly and use compressed formats, a very simple diagram image could be 30 to 50k in size, maybe a lot more. The same diagram in HTML/CSS is about 20% of the size and loads on the same request, so your app loads faster.

How to create the diagram

The best way to create diagrams in HTML and CSS is to use CSS’s grid layout. It provides a two-dimensional grid that allows you to align elements to row and column ranges, with complete control over alignment, justification, and sizing.

Step 1: Sketch out the diagram

To create the diagram, start by sketching it out on a piece of paper or on a spreadsheet. This will make it easy to determine the row and column coordinates of each block.

Step 2: Create the HTML

Once you have the basic layout, create DIVs to represent each block. Give each DIV a unique class name or ID so you can style it later in CSS. You don’t have to worry too much about the content at this point, it will be easy to edit later if you have to.

<div class="diagram" aria-label="Wijmo Olap Architecture Diagram">           <div class="raw-data-client">         
<h4>
Raw Data (client-side)
</h4>
<p>
Arrays with plain JavaScript objects.
</p>

</div>
<div class="pivot-engine component">
<h4>
PivotEngine
</h4>
<p>
Summarizes the raw data according to views
defined by fields and field lists
(row, column, filter, and value lists).
</p>
</div>

<!-- connectors -->
<div class="conn row-2 col-4"> <!-- client data => engine --> <svg viewBox="0 0 10 10">
<path d="M5 10 L1 5 L4 5 L4 -9 L6 -9 L6 5 L9 5z"/>
</svg>
</div>

Step 3: Create the CSS for the grid

This is where we turn the plain text into a diagram.

.diagram {     
display: grid;
grid-template-columns: repeat(14, 1fr);
align-items: start;
justify-items: center;
max-width: 7in;
margin: .2in 0; }

Step 4: Style the blocks

After that, the CSS uses a few generic rules that are applied to every block and to every block that represents a component. Those rules are not related to the CSS grid:

.diagram > div { 
padding: 12px;
background: #EEE;
border: 1px solid #C0C0C0;
}
.diagram > .component {
border-radius: 12px;
background: #E6E0FF;
border: 2px solid #8E8EFF;
}

Step 4: Position the blocks within the grid

The most interesting parts are the rules that define the position of each block. For example, the code below defines the position of the “raw-data-client” and “pivot-engine” blocks.

.raw-data-client { 
grid-column: 1/span 5;
grid-row: 1;
}
.pivot-engine {
grid-column: 4/span 5;
grid-row: 3;
}

Step 5: Position and Style the SVG connectors

The connector elements use a slightly different approach. They have class names that specify the row and column where they should be rendered.

.row-2 { 
grid-row: 2;
}
.row-3 {
grid-row: 3;
}
.col-4 {
grid-column: 4;
}
.col-8 {
grid-column: 8; }
.diagram .conn { 
position: relative;
width: .5in;
height: .5in;
padding: 0;
border: none;
background: transparent; z-index: -1;
} .diagram .conn svg {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
fill: #E6E0FF;
}
  • An outer DIV with relative positioning, fixed width and height, and a negative z-index to prevent the arrows from rendering above the blocks.
  • An inner SVG element that fills the cell but can overflow so the connector “spills” out of the cell and into any empty space above it.

Conclusion

And that’s all there is to it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
GrapeCity Developer Solutions

GrapeCity Developer Solutions

We provide developers with the widest range of Microsoft Visual Studio components, IDE platform development tools, and applications.