Graphics, Figures & Tables ⇒ Web Layout

[ricardo-reis-1970]

I'm a fullstack dev. I need to produce figures with wireframes of web apps. These are essentially rectangles (HTML `DIV` elements) with other rectangles inside, with added elements such as names (HTML `id`), classes (HTML `class`) and dimensions, like `<--50px-->`, or its vertical counterpart. The goal is to illustrate various CSS settings and their effect on the web page layout.

I usually produce these documents with pandoc markdown, which allows for LaTeX snippets, or even TikZ snippets.

I tried other tools, such as PlantUML, but these are more for structured diagrams than for something like CSS depicting.

Is there any package for this, or am I down to handcrafted* TikZ?
___
* if the handcrafted option is all there is, that's ok. \LaTeX and I go back to 1989 and we're happy together. As long as it's not a WYSIWYG solution, it's great.

[JerryD]

There are plenty (well, several) alternatives in addition to Tikz. Have a look at dpic examples in
https://gitlab.com/aplevich/circuit_mac ... amples.pdf
or, perhaps if the diagrams are simple enough, at Pikchr:
https://pikchr.org/home/doc/trunk/homepage.md