Flow Charts with CSS Anchor Positioning

Neat examples!<p>However I think I would still use SVG for these sorts of things, especially since they can easily be manipulated, animated and are more mathematically declarative than CSS anchor positioning.<p>I think the sweet spot for this CSS feature is not having to do complex workarounds with calc, positioning, transforms or JS in order to have more control over positioning elements relative to others. Container queries have a similar use case.<p>Both of these features (as well as CSS grid) are born out of the same underlying issues:<p>- HTML and CSS are not orthogonal in terms of layout, but very tightly coupled<p>- Trees are a fundamentally crippled data structure to express layouts. Almost every sufficiently complex layout wants to be represented as a graph or a matrix. Trees are fine until they aren&#x27;t.

I&#x27;m constantly amazed by how much can be achieved with only CSS nowadays. It seems like it&#x27;s getting more powerful by the month as developers find new and tricky ways to push the boundary ;)

Friendly warning that anchor positioning is not yet available in any non-Chromium-derived browser.

We might have pushed CSS further than it should go, but using gradient for the connector lines is pretty clever.

Ideally, browsers should offer an API where a certain rect on screen can be rendered as SVG or PNG. Then such CSS flowcharts can be distributed as independent images instead of being a web-page.

Thanks for sharing. This has a lot of promise once browsers fully support anchor positioning. With the current rate of CSS standards adoption, my guess is Firefox and Safari will add support by end of this year. Pure speculation as they haven&#x27;t announce support plans yet AFAIK.<p>Chrome and Edge currently support anchor positioning: <a href="https:&#x2F;&#x2F;caniuse.com&#x2F;?search=css-anchor-positioning" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;?search=css-anchor-positioning</a>

Considering this is a CSS trick, it&#x27;d be nice if all the demos didn&#x27;t require&#x2F;load a ton of JS. Viewing source on the demos shows them to be like 90% javascript, several tens of thousands of characters, and that doesn&#x27;t even include the five external JS files it also loads.

Connector lines not showing in Firefox.

I just use Markdeep and create the block diagrams that way<p><a href="https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;features.md.html#diagramexamples&#x2F;flowchart" rel="nofollow">https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;features.md.html#diagram...</a>

div popover in css <i>… yay</i>

Great. Yet another special case added to CSS.

Flow charts are a terrible use case for CSS (and HTML). The nodes and edges of a flow chart are all meaningful data. When you render the connectors using a mixture of empty divs, pseudo-content and largely arbitrary hacks, all that meaning gets lost from the _content_ (the HTML). Access tooling will largely fail to communicate your intent.<p>Flow charts are much better represented by something like PlantUML or Mermaid, and then rendered direct to SVG or a canvas. The mark-up is much more human-readable and could be used as source to drive an even-more accessible alternative.

Is it possible that it can create a flow chart library with pure css? maybe like we make the className like tailwind to let others use to easily ship flow chat with pure css?