outils pour générer des diagrammes UML pour les classes existantes en javascript
Le projet prend de l'ampleur et il apparaît nécessaire de visualiser les relations entre les classes présentes dans le projet. Certains d'entre eux sont indépendants, certains sont hérités des autres.
Je cherche un outil pour visualiser ces relations. Je suis conscient qu'une question similaire a déjà été posée ici Bibliothèques JavaScript pour dessiner des diagrammes de classes UML , mais pour autant que je sache, aucune réponse à mes besoins n'a été donnée.
Je suis conscient de cette Liste d'outils de langage de modélisation unifié , mais ils semblent donner la possibilité de dessiner des diagrammes UML, alors que ce dont j'ai besoin est
- un outil autonome
- qui génère des diagrammes UML à partir du code javascript de mes définitions de classe
En Ruby, cet outil s'appelle RailRoady. Si un tel outil existe également en JavaScript, ce serait une aide importante.
Jettes un coup d'oeil à
James Shore visualiseur en ligne . Il s’agit du diagramme de classes UML le plus proche que j’ai rencontré pour Javascript. Ce link pourrait aussi vous aider. En fait, il apporte une autre approche pour Représentant un diagramme de classes UML.
Il est très peu probable qu'un tel outil de reverse engineering existe, tout simplement parce qu'il n'existe pas de concept de classe bien défini en JavaScript. Différents frameworks et différentes personnes utilisent différents modèles de code pour implémenter des objets JavaScript qui agissent comme des plans de classe pour générer des instances.
Certains outils d'analyse statique pourraient peut-être vous aider dans ce que vous essayez d'atteindre. J'utilise principalement le projet jscomplexity (jscomplexity.org) pour le contrôle de la qualité, mais je me souviens du projet TAJS, qui est plus avancé et je viens de regarder la présentation PDF à l'adresse http://cs.au.dk /~amoeller/talks/TAJS2.pdf et si vous regardez la diapositive 9, la sortie de l'état abstrait de JavaScript est peut-être plus adaptée à vos besoins.
TAJS a son code source sur github ( https://github.com/cs-au-dk/TAJS ), donc si vous souhaitez en utiliser certaines parties, cela devrait être possible (si la licence le permet).
Les auteurs ont également publié un plugin pour Eclipse qui affiche le graphe d'appel ou la hiérarchie du code.
J'espère que ça aide un peu.
Plusieurs bibliothèques permettent de générer des diagrammes de classes UML (et non en ligne Services, éditeurs et applications Web). Les principaux problèmes sont la conception graphique des composants et le niveau de réactivité des diagrammes.
Si vous souhaitez créer des composants de diagramme statiques, il existe de nombreuses bibliothèques, mais si vous souhaitez créer un outil similaire à l'éditeur de graphes au moment de l'exécution, votre alternative est limitée:
- mxgraph est quelque chose si vous voulez .__ construire votre propre éditeur de graphes comme draw.io . Les graphiques sont réactifs et interactifs et l’utilisateur peut déplacer ou redimensionner le bloc , Modifier le texte, ajouter ou supprimer des relations.
gojs est une bibliothèque commerciale fournie par des licences gratuites disponibles à des fins académiques. C'est également un choix approprié si vous souhaitez créer un éditeur de diagramme. Il existe de nombreux diagrammes prêts à l'emploi, interactifs pour déplacer les blocs, modifier le texte et les relations; et de nombreuses autres fonctionnalités pour différents autres diagrammes.
La bibliothèque principale de JointJs est une application open source sous Mozilla Public License, ce qui signifie que vous devez inclure le droit d'auteur, mais que vous pouvez l'utiliser à des fins commerciales. Il dépend de jQuery 3.1.1, Lodash 3.10.1, Backbone 1.3.3. ( Rapppid utilise cette bibliothèque) Il fournit de nombreux éléments de diagramme prêts à l’emploi, réactifs et Interactifs. L'utilisateur peut déplacer des blocs, ajouter et supprimer des relations et des joints , Effectuer des zooms avant et arrière.
Draw2D est une bibliothèque pour créer Visio à l’aide de dessins, de diagrammes ou de workflows. La version communautaire coûte presque 5 euros à acheter. Il fournit en effet à Visio des blocs et des diagrammes interactifs qui permettent de redimensionner, de déplacer des blocs et de modifier le texte et les relations, et de regrouper des blocs en effectuant des zooms avant et arrière. Cela peut être un bon choix pour construire un outil d'édition graphique .
![Valid XHTML]()
UmlCanvas de Christophe VG en tant que bibliothèque js fournissant un diagramme UML à partir d’informations textuelles. Les diagrammes répondent de manière à ce que vous puissiez déplacer les blocs; et les lignes de relation sont intelligentes pour garder la conception jolie. Mais pas plus que ça .
![Valid XHTML]()
PlantUML est un outil UML pouvant fournir un diagramme UML à partir d'informations textuelles provenant de bibliothèques jQuery (des bibliothèques dans d'autres langues sont également disponibles). Toutefois, les diagrammes ne sont pas réactifs.
Raphaël est une petite bibliothèque JavaScript qui peut simplifier votre travail avec les graphiques vectoriels sur le Web. Ce n'est pas le meilleur outil pour créer un éditeur de graphique, mais il fournit des diagrammes brillants et beaux pour une interaction utilisateur simple (comme le mouvement et la flexion).
D'autres bibliothèques telles que D3 , FabricJS , paperJS , JsPlumb , p5.js , Cytoscape.js et mermaid are fournissant également des composants de base pour les diagrammes, mais ils n'ont pas l'éditeur intégré. Mais il existe plusieurs composants graphiques et dessins différents disponibles dans ces bibliothèques. Ils peuvent ne pas être la meilleure option pour créer des diagrammes entièrement interactifs et modifiables pour les utilisateurs (y compris l'éditeur de graphique).