Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
CSS

Flow Charts with CSS Anchor Positioning

Cory Rylan

-

With the introduction of the CSS Anchor Position API in Chrome 125, it's never been easier to position an element relative to another element. This is a great way to manage complex positioning use cases like popovers and tooltips.

However, CSS Anchor Posititioning can be used for more than just popovers and tooltips, it can be used to create basic flow chart diagrams. In this post we will learn how to use CSS Anchor Positioning to create flow charts and diagram with just CSS.

Basic Flow Chart using CSS Anchor Position

This post won't cover the full Anchor Poisitioning API. To learn more about the CSS Anchor Positioning API in depth check out the Chrome Dev blog post Introducing the CSS anchor positioning API.

Basic Positioning

CSS Anchor Positioning is a great way to position an element relative to another element.

Basic CSS Anchor Position
Basic CSS Anchor Position Demo

To create our first anchored element we need to provide a name to div "one" so we can reference it. Anchor names must be unique and start with two dashes --.

.one {
  anchor-name: --anchor-one;
}

Next we need to provide the anchor positioning for div "two". We will use anchor(--anchor-one top) to position div "two" relative to the top of div "one".

.two {
  position-anchor: --anchor-one;
  bottom: anchor(--anchor-one top);
  justify-self: anchor-center;
}

We assign the div "two" bottom position to the top of div "one" using anchor(--anchor-one top). We also use justify-self: anchor-center to center div "two" horizontally relative to div "one". We can position any side of dive "two" to any side of div "one" using the same syntax (top, left, bottom, right).

Multiple Anchors

With CSS Anchor Positioning we can anchor an element to two other elements at the same time.

CSS Anchor Positioning Multiple
CSS Anchor Positioning Multiple Demo

Just like div "one" we assign an anchor name to div "two" for our new third div to reference.

.one {
  anchor-name: --anchor-one;
}

.two {
  anchor-name: --anchor-two;
}

The third div can now reference anchors one and two for positioning. To poisition div "three" to the center of both divs "one" and "two", we use the anchor() function for each side of the element. We can position any side of div "three" to any side of either div "one" or "two".

In this instance we are using center instead of a side to position relative to. This creates a overlap effect for the anchors.

.three {
  top: anchor(--anchor-one center);
  bottom: anchor(--anchor-two center);
  left: anchor(--anchor-one center);
  right: anchor(--anchor-two center);
}

Basic Flow Chart Nodes

Using what we leanered with anchor positioning we can create a basic flow chart.

Basic Flow Chart using CSS Anchor Position
Basic Flow Chart using CSS Anchor Position Demo

Using the same technique by anchoring an element between two nodes we can create a flow chart like effect with some additional CSS tricks.

Basic Flow Chart - Step 1

For the third div we can change the background color to use a background gradient to create a line effect in the middle of the div.

.line {
  anchor-name: --line;
  top: anchor(--one center);
  bottom: anchor(--two center);
  left: anchor(--one center);
  right: anchor(--two center);
  position: absolute;
  z-index: -1;
  background: linear-gradient(#2d2d2d, #2d2d2d) no-repeat center/2px 100%;
}
Basic Flow Chart - Step 2

Now that we have the centered positioned line, we can use CSS pseudo elements to create the arrow head on each side of the line.

.line::before {
  position: fixed;
  display: block;
  content: '';
  background: #2d2d2d;
  height: 2px;
}

.line::before {
  bottom: anchor(--one center);
  left: anchor(--one right);
  right: anchor(--line center);
}
Basic Flow Chart - Step 3

Then again with a CSS pseudo element on the other side of the line.

.line::before,
.line::after {
  position: fixed;
  display: block;
  content: '';
  background: #2d2d2d;
  height: 2px;
}

.line::before {
  bottom: anchor(--one center);
  left: anchor(--one right);
  right: anchor(--line center);
}

.line::after {
  bottom: anchor(--two center);
  right: anchor(--two left);
  left: anchor(--line center);
}
Basic Flow Chart using CSS Anchor Position
Basic Flow Chart using CSS Anchor Position Demo

Multiple Node Flow Chart

This approach can be expanded on by providing additional nodes and chaining the anchors. However when we add additional lines we need to flip the line directions depending on the nodes relative position to the anchor. The CSS position-try-options allows a easy way to declare fallback positions to use if the element can't be rendered within the provided space relative to the anchor.

.line {
  position-try-options: flip-block, flip-inline, flip-block flip-inline;
  ...
}
Complex Flow Chart using CSS Anchor Position
Complex Flow Chart using CSS Anchor Position Demo

Draggable Flow Chart

Using a bit of JavaScript we can make our node elements draggable and create a draggable flow chart.

Complex Flow Chart using CSS Anchor Position Demo
View Demo Code   
Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

CSS

Design System Architecture - Managing CSS Themes

Learn how to use leverage CSS themes to create a flexible and efficient theming system in your design system architecture.

Read Article
CSS

Dynamic Contrast Layers with CSS Style Queries

Learn how to create contrasting layers with CSS style queries ensuring your UI is always the right contrast ratio.

Read Article
Web Components

CSS Container Queries in Web Components

Learn how to use CSS Container Queries in Web Components to create reusable and responsive UI.

Read Article