Post

Ready for another CSS-only diagram? This time, I am trying another connector type. It sticks to the selected sides, regardless of the node's position. css-tip.com/node-connect... Look how the lines get distorted! 👀 Another cool demo powered by border-shape, anchor position, and more!

CSS by T. Afif@css-only.dev

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

Sam Littlefair

@littlefair.ca

9 Sept

This is so awesome. Do you think it could potential be a Mermaid replacement?

CSS by T. Afif

@css-only.dev

I don't know what Mermaid is

9/9/26, 1:23 pm0 reposts0 likes

Sam Littlefair

@littlefair.ca

9 Sept

It's a JavaScript diagramming library, which has been accepted as a de facto standard. For instance, many markdown tools parse Mermaid by default. It's good for making flowcharts and whatnot, but I think it's a bloated package and it's challenging to style.