SITUATION: My company has a massively complex and dynamic IT infrastructure. These systems are far too complex to map and present through a diagram. I am trying to create a centralized website that houses all documentation, for all IT teams, with interactive expandable system diagrams, so that teams can drill-down and view as much, or as little of the system as they need without being overwhelmed.
QUESTION: Using DHTML, is it possible to create an interactive diagram that starts out as a simple square with the system name, then once the users clicks on it, that square disappears and expands to reveal more of the system components? Each component would then be clickable, and the process would continue until the system was completely broken down.
NOTE: I apologize if this is ambiguous. I didn't know how else to describe it. Google continues to pull up incorrect results to all queries. All help is appreciated.
What you are looking for is definitely possible. I believe the search terms you should be looking for is diagramming libraries or graph drawing and flow-charting programming libraries. There are a lot of libraries out there, both commercial and open-source. See this related SO question for a number of options.
From your description, I believe the yFiles for HTML diagramming library should be a good match.
There are two demos available online that show scenarios that seem to match your description:
Since this is a library with a huge API you can easily customize the look and feel as well as the data sources to your own specific requirements.
Disclosure: I work for the company that creates that (commercial) library, however I do not represent my employer here. This is my own post and opinion.