How to create a diagram with unconnected nested blocks

0 votes
asked Apr 6 in Question / help by kaushalmodi (300 points)
Hello,

I'd like to document the nested HTML tags for my web page, and represent them as a diagram with nested blocks.

While searching for an existing representation like that online, I came across this: https://mdn.mozillademos.org/files/14075/bubbling-capturing.png

Is there a way to draw something like the nested blocks in the center of that figure using PlantUML?

Thanks

1 Answer

+1 vote
answered Apr 6 by Serge Wenger Work (9,810 points)
selected Apr 6 by kaushalmodi
 
Best answer

You can use rectangles:

@startuml

rectangle "<html>, <body>, etc." as a  {

rectangle "<div>..." as b #antiquewhite{

    rectangle "<video>...\n\n\n" as c

    }

}

@enduml

commented Apr 6 by kaushalmodi (300 points)
Thanks for your quick response! I have added that code + rendered png to my notes here: https://scripter.co/notes/plantuml/#nested-boxes
...