Création d'un diagramme système multicouche extensible

Question

SITUATION: Mon entreprise dispose d'une infrastructure informatique extrêmement complexe et dynamique. Ces systèmes sont beaucoup trop complexes pour être cartographiés et présentés à l'aide d'un diagramme. J'essaye de créer un site Web centralisé qui hébergera toute la documentation, pour toutes les équipes informatiques, avec des diagrammes interactifs extensibles, afin que les équipes puissent explorer et visualiser autant ou aussi peu que nécessaire le système sans être submergé.

QUESTION: En utilisant DHTML, est-il possible de créer un diagramme interactif qui commence comme un simple carré avec le nom du système, une fois que les utilisateurs clique dessus, qui disparaît carré et se développe pour révéler plus du système Composants? Chaque composant serait alors cliquable, et le processus continuerait jusqu'à ce que le système soit complètement décomposé.

NOTE: Je m'excuse si c'est ambigu. Je ne savais pas comment le décrire autrement. Google continue d'afficher des résultats incorrects pour toutes les requêtes. Toute aide est appréciée.

Answer 1

Ce que vous cherchez est définitivement possible. Je crois que les termes de recherche que vous devriez rechercher sont diagramming libraries ou graph drawing et flow-charting bibliothèques de programmation. Il y a beaucoup de bibliothèques, à la fois commerciales et open-source. Voir this related SO question pour un certain nombre d'options.

De votre description, je crois que le yFiles for HTML diagramming library devrait être un bon match.

Il y a deux démos disponibles en ligne qui montrent des scénarios qui semblent correspondre à votre description:

Live Demo Hierarchic Grouping

Live Demo Collapsible Tree

Puisque c'est une bibliothèque avec huge API vous pouvez facilement personnaliser l'apparence ainsi que les sources de données à vos propres exigences spécifiques.

Divulgation: Je travaille pour l'entreprise qui crée cette bibliothèque (commerciale), mais je ne représente pas mon employeur ici. Ceci est mon propre message et opinion.

Answer 2

Je ne sais pas si j'ai bien compris votre question. Mais il semble que vous cherchiez un diagramme en arbre. Il y a cette example dans D3.

Answer 3

Oui, c'est possible, mais il existe de nombreuses options pour les conceptions possibles, donc des suggestions plus spécifiques ne seront pas définitives. La distribution des préoccupations entre le client et le serveur (qui calcule quelle partie des schémas à quel moment/à quelle action de l'utilisateur) devrait constituer un premier choix de conception raisonnable. D'autres critères comprennent la complexité de la visualisation, la complexité des données, la source de données, la fréquence du changement de données, la facilité de développement, les compétences de développement disponibles et le budget. Les agents utilisateurs et la puissance de calcul d'aujourd'hui permettent de gérer toute la gamme entre le traitement client uniquement et le traitement serveur uniquement (c'est-à-dire que l'entrée utilisateur de base sera bien entendu traitée côté client). Le chemin le plus facile sera probablement d'utiliser une bibliothèque côté client comme D3.js sur un ensemble de données précalculé comme le suggère @ MárioAreias.