Bibliothèque Javascript pour dessiner un diagramme de dépendance

Je voudrais être en mesure de générer un diagramme de dépendance qui indique le composant logiciel dépend de qui à l'aide de bibliothèques Javascript.

Exigences:

  • mise en page automatique à partir du haut, vers le bas
  • flèches entre les nœuds
  • étiquettes sur les flèches
  • nœuds pourraient être des images personnalisées (vecteur ou raster)
  • les étiquettes sous les nœuds, qui peuvent avoir un format mixte

Nice-to-have:

  • des info-bulles pour obtenir plus d'informations sur les nœuds
  • box-in-box diagramme de nœuds (pour les nœuds qui sont composées d'autres nœuds)
  • génère assez rapidement

J'ai été à la recherche dans plusieurs possibilités:

  • dagrejs semble manquer de possibilités de personnalisation de l'image nœuds. Edit: en utilisant le html dans les nœuds des images personnalisées a bien fonctionné.
  • jsplumbtoolkit semble manquer de possibilité de mise en page automatique
  • graphdracula semble absence de possibilité pour les de haut en bas de la dépendance de mise en page et peut-être aussi des images personnalisées
  • vizjs a de très rares documents

source d'informationauteur nize

  1. 3

    Je pense que quelque chose à l'aide de d3.js est votre meilleur pari. C'est un peu intimidant (parce que c'est tellement souple, qu'il vous donne plusieurs méthodes pour accomplir la même tâche, et il est difficile de savoir quels sont les inconvénients de certains à l'avance).

    La arborescence pourrait être quelque chose d'assez près pour démarrer à partir d' (Une démonstration de la façon de l'utiliser est ici).

  2. 2

    découvrez webcola. C'est une baisse-dans le remplacement pour les d3.js la force de mise en page et supporte les contraintes de mise en forme, de sorte que vous pouvez exiger de tous les bords à pointer vers le bas selon votre demande.

  3. 0

    Dans un contexte commercial, vous pourriez envisager de yFiles pour le HTML:

    Il semble à toutes vos exigences sont remplies:

    • mise en page automatique à partir du haut, vers le bas: la mise en œuvre de l'hiérarchique (Sugiyama style) algorithme de mise en page dans la bibliothèque est parfait pour visualiser les dépendances entre les éléments:

    Bibliothèque Javascript pour dessiner un diagramme de dépendance

    (Ce diagramme a été créé automatiquement avec la bibliothèque à l'aide de cette démo en ligne)

    • flèches entre les nœuds: être un générique graphique d'édition de la bibliothèque, bien sûr, les bords avec de flèche sont pris en charge.
    • étiquettes sur les flèches: vous pouvez ajouter n'importe quel nombre d'étiquettes à bords (flèches) et les nœuds, chaque.
    • nœuds pourraient être des images personnalisées (vecteur ou raster): yFiles utilise SVG, à sa base, et donne du style par défaut des implémentations pour les visualisations, ainsi qu'il est facile d'ajouter vos propres visualisation
    • les étiquettes sous les nœuds, qui peuvent avoir un format mixte: les étiquettes peuvent également être tout ce qui est pris en charge par le format SVG (ce qui est beaucoup), donc un texte complexe rendus ainsi que des graphiques vectoriels et bitmaps peuvent être inclus dans les étiquettes.
    • des info-bulles pour obtenir plus d'informations sur les nœuds: c'est pris en charge hors de la boîte info-bulles peuvent être n'importe quel code HTML+CSS et SVG/Toile de contenu.
    • box-in-box diagramme de nœuds (pour les nœuds qui sont composées d'autres nœuds): cette fonction est appelée "nœud de regroupement" dans la bibliothèque et est soutenu à la fois en cours d'édition, ainsi que par la mise en page automatique des algorithmes, de sorte que vous pouvez regrouper vos dépendances dans des groupes comme "composants Tiers", "OSS-Composants", etc. Vous pouvez également imbriquer des groupes en plusieurs niveaux.
    • génère assez vite: bien sûr, en fonction de la complexité, "assez rapidement" peut encore être long pour l'utilisateur, mais les algorithmes de disposition devrait être en mesure de générer une mise en page en quelques secondes, même si il y a des dizaines et des dizaines d'éléments.

    Il est beaucoup de documentation disponible en ligne.

    Avertissement: je travaille pour la société qui crée de la bibliothèque, cependant, DONC je ne représente pas mon employeur.