Embarquez des diagrammes UML en ligne avec yUML et JQuery

 

Lorsqu’on édite un site dédié au développement, il arrive souvent que l’on ait à y publier des diagrammes UML. Il en est de même pour le Wiki ou le blog d’une équipe projet.

Ces diagrammes sont essentiels pour une bonne compréhension et sont universellement acceptés et compris par la communauté informatique.

Plutôt que de sortir la grosse artillerie avec un logiciel comme Rational Rose ou Papyrus UML et d’exporter des images statiques (et en cas de retouches de régénérer celles-ci), je vous propose une technique beaucoup plus flexible.

yUML est un webware qui permet de créer des diagrammes UML en se basant sur une syntaxe ultra simple et surtout parlante. Le texte ainsi crée sera transformé en images dynamiques grâce au webware.

yUML gère les diagrammes de classes et de cas d’utilisations. Il est entièrement gratuit.

En voici un exemple simple (syntaxe + résultat):

 <img src="http://yuml.me/diagram/scruffy/class/[Customer{bg:orange}]<>1->*[Order{bg:green}], [Customer]-[note: Aggregate Root{bg:cornsilk}]"/>;

donne:

exemple yuml Embarquez des diagrammes UML en ligne avec yUML et JQuery

Simple non? Au passage, j’adore le style « fait-main » (optionnel) des diagrammes.

Sachez qu’il est également possible de créer le diagramme sous forme de PDF en ajoutant .pdf à la fin (au lieu de .jpg).

Seul problème avec yUML, je ne trouve pas très pratique d’avoir à embarquer la syntaxe dans une balise <img>. Cela nuit à la lisibilité et limite donc le webware à de petits diagrammes.

Heureusement, JQuery nous vient à la rescousse. Nous savons que le script est capable de modifier et créer des éléments à la volé.

L’idée est alors de stocker les « classes » et « relations » UML dans un élément HTML quelconque. Le plus simple reste un <div>. De plus, au lieu de tout mettre à la suite, il est mieux de mettre une classe et une relation par ligne, pour plus de lisibilité.

<div class="diagram" >
[Customer{bg:orange}]&lt;&gt;1-&gt;*[Order{bg:green}]
[Customer]-[note: Aggregate Root{bg:cornsilk}]
<div/>

Ensuite, le script JQuery se charge de recréer l’image comme précédemment.

<script type="text/javascript" charset="utf-8">
        $('document').ready(function(){
                text = $('.diagram').html().substring(1,$('.diagram').html().length-1).replace('t','').replace('n','');
                $('.diagram').html('');
                $('.diagram').append('<img src="http://yuml.me/diagram/class/' + text + '"/>');         
        });
</script>

Le script va en fait créer la chaine de caractère correspondant à l’adresse de l’image, créer la balise , puis vider le <div> afin qu’il ne soit pas affiché, le tout dynamiquement.

Pour mettre à jour un diagramme, il suffit de modifier les données, qui sont directement embarquée dans la page. Je trouve ca génial.

Note: pour les diagrammes de cas d’utilisations, il faut modifier un peu le script car la syntaxe UML varie.

<script type="text/javascript" charset="utf-8">
$('document').ready(
    function(){
        text = $('.diagram').html().replace('t','').replace('n','').replace(/&gt;/g,'>');
        $('.diagram').html('');
        $('.diagram').append('<img width="640" height="480" src="http://yuml.me/diagram/scruffy/usecase/' + text + '" />');
    }
);
</script>

exemple2 yuml 500x252 Embarquez des diagrammes UML en ligne avec yUML et JQuery

download ico Embarquez des diagrammes UML en ligne avec yUML et JQueryEn savoir plus sur yUML

★★★★★

A lire également