-1

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.

Josh Campbell
  • 420
  • 9
  • 23
  • What fascinates me about this question is the striking contrast between how on the one hand it got so very few views (I mean a pitiful 1000 views over more than 5 years - in a community like StackOverflow it means it got practically ignored). But on the other hand, all those many people who have the deletion privilege or the privilege to vote did not really condemn it - it is still not deleted after 2 years. So it seems that there is some basic value here and it can stay like that - if nothing extraordinary happens ... like somebody repeatedly drawing the wrong kind of annoyed attention here. – Yunnosch Jul 26 '20 at 08:05

3 Answers3

2

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:

Live Demo Hierarchic Grouping

Live Demo Collapsible Tree

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.

Community
  • 1
  • 1
Sebastian
  • 6,895
  • 1
  • 35
  • 65
1

I am not sure if I understood correctly your question. But it seems you are looking for a tree diagram. There is this example in D3.

Mário Areias
  • 311
  • 2
  • 7
1

Yes, it is possible, but there are many options to possible designs, so more specific suggestions will not be definitive. The distribution of concerns between client and server ( who does compute what part of the schematics at what time / upon which user action ) should be a reasonable first design choice. Further criteria comprise visualization complexity, data complexity, data source, frequency of data change, ease of development, available development skills and budget.

Today's user agents and computing power allow to run the whole gamut between client-only and server-only processing (almost that is: basic user input ['mouse clicks'] will of course be processed client-side).

The easiest path will probably be to use a client-side library like D3.js on a precomputed data set as @MárioAreias suggests.

collapsar
  • 15,446
  • 3
  • 28
  • 56