from Hacker News

Flow Charts with CSS Anchor Positioning

by roosgit on 6/27/24, 7:07 AM with 66 comments

• by dgb23 on 6/27/24, 5:45 PM

  Neat examples!

  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.

  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.

  Both of these features (as well as CSS grid) are born out of the same underlying issues:

  - HTML and CSS are not orthogonal in terms of layout, but very tightly coupled

  - 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't.

• by bugfactory on 6/27/24, 9:14 AM

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

• by ericyd on 6/27/24, 12:06 PM

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

• by xnx on 6/27/24, 8:55 AM

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

• by lenkite on 6/27/24, 10:04 AM

  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.

• by simple10 on 6/27/24, 5:14 PM

  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't announce support plans yet AFAIK.

  Chrome and Edge currently support anchor positioning: https://caniuse.com/?search=css-anchor-positioning

• by autoexec on 6/27/24, 10:02 AM

  Considering this is a CSS trick, it'd be nice if all the demos didn't require/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't even include the five external JS files it also loads.

• by sollniss on 6/27/24, 9:22 AM

  Connector lines not showing in Firefox.

• by AstroJetson on 6/27/24, 10:42 PM

  I just use Markdeep and create the block diagrams that way

  https://casual-effects.com/markdeep/features.md.html#diagram...

• by mediumsmart on 6/28/24, 3:40 AM

  div popover in css … yay

• by meindnoch on 6/27/24, 1:40 PM

  Great. Yet another special case added to CSS.

• by the_other on 6/27/24, 10:32 AM

  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.

  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.

• by gavinbao on 6/27/24, 4:41 PM

  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?