3

I usually post in StackOverflow, but this is more a layout/design question. I am trying to get an overview of the HTML structure of an application I am working on, and was looking for a tool to automatically generate a diagram of the layout/ordering. Does anybody use such a tool?

It would be great to see the layers, or a UML type diagram, showing the order of the parent/child elements in relation to each other.

What I've found:

  • Chrome DevTools Layers Panel (in experimental state, and barely usable)
  • FireFox 3D View - Using the Tilt plugin (looks very impressive, but is more visual than practical)

Example of FireFox Tilt plugin

Improve this question
8
  • UML is not designed to work with HTML for as far as I know, I've tried to make it work but that is just not very convenient. Do you want it to look great visually or do you want to model it for your co-workers (what UML is meant for)? Firefox obviously checks your CSS before it creates the model, wich I think is relevant if you want to see the z-index and stuff like that.
    – Randy
    Aug 8, 2016 at 10:25
  • Remember that the "layer" concept on an html page is only a marketing term used by dreamweaver. There are not "layers" but nested elements.
    – Rafael
    Aug 8, 2016 at 10:52
  • 1
    @Rafael They are referred to as layers by development teams, and the Google DevTool is called Layers Panel. Also, Mozilla documentation refers to layers in most of their css z-index documentation developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/…
    – Drenai
    Aug 8, 2016 at 11:57
  • @Randy I used uml as an example only. It's for documentation purposes, so the Firefox Tilt is too visual, with not enough detail
    – Drenai
    Aug 8, 2016 at 12:02
  • 2
    Found something that looks promising. gojs.net/latest/samples/DOMTree.html
    – Drenai
    Aug 8, 2016 at 12:13

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.