ZenUML : Création de diagrammes de séquence et d'organigrammes à partir d'un simple code texte

Introduction générale

ZenUML est une solution multiplateforme de diagramme en tant que code, axée sur la création de diagrammes de séquence et d'organigrammes. Elle évite les retards dans les interactions côté serveur en rendant les diagrammes en temps réel dans le navigateur. Les diagrammes de ZenUML ne sont pas seulement des images statiques, mais l'utilisateur peut interagir avec les diagrammes, par exemple en mettant en évidence le message sur le diagramme en mode édition pour sélectionner automatiquement le code correspondant.ZenUML met l'accent sur la confidentialité et la sécurité, en n'envoyant jamais de données au serveur pour le rendu. ZenUML met l'accent sur la confidentialité et la sécurité, en n'envoyant jamais de données au serveur pour le rendu, ce qui garantit la sécurité des données de l'utilisateur. ZenUML est utilisé dans un large éventail d'industries telles que la fintech, les télécommunications et la vente au détail, et est pris en charge sur une variété de plates-formes, y compris Confluence, les applications Web, les extensions de navigateur, les plug-ins IDE et les applications de bureau.

Liste des fonctions

• Rendu en temps réel : rend les graphiques en temps réel dans le navigateur sans interaction avec le serveur.
• Graphiques interactifs : les utilisateurs peuvent interagir avec les graphiques et naviguer rapidement dans des graphiques complexes.
• Confidentialité et sécurité : aucune donnée n'est envoyée au serveur pour le rendu, ce qui garantit la sécurité des données.
• Conformité aux normes : conforme à la norme OMG UML 2.5.1 et offrant de nombreuses extensions.
• Prise en charge multiplateforme : Confluence, les applications web, les extensions de navigateur, les plugins IDE et les applications de bureau sont pris en charge.
• DSL plus simple : utiliser un langage DSL plus simple pour réduire le nombre de lignes de code et améliorer la lisibilité et la maintenabilité.
• Assistance professionnelle : l'installation, la formation et l'assistance en cas de panne sont assurées, la plupart des problèmes étant résolus dans les 8 heures.
• Extensions riches : par exemple, icônes de nuages pour rendre les graphiques plus lisibles.

Utiliser l'aide

Processus d'installation

1. Utilisation d'applications web: :
   • Visitez le site web de ZenUML (https://zenuml.com/).
   • Inscrivez-vous et connectez-vous à votre compte.
   • Entrez dans l'espace de travail et commencez à créer le graphique.
2. Installation du plugin Confluence: :
   • Dans le backend d'administration de Confluence, sélectionnez Appliquer.
   • Recherchez "ZenUML" et cliquez sur "Installer".
   • Une fois l'installation terminée, ajoutez la macro ZenUML à la page et commencez à créer le diagramme.
3. Installation de l'extension du navigateur: :
   • Recherchez "ZenUML" dans la boutique d'extensions de votre navigateur.
   • Cliquez sur "Ajouter au navigateur" et suivez les instructions pour terminer l'installation.
   • Une fois l'installation terminée, cliquez sur l'icône ZenUML dans la barre d'outils du navigateur pour commencer à créer le diagramme.
4. Installation du plug-in IDE: :
   • Recherchez "ZenUML" dans le marché des plugins de l'IDE.
   • Cliquez sur "Installer" et suivez les instructions pour terminer l'installation.
   • Une fois installé, ouvrez le plugin ZenUML dans l'IDE et commencez à créer des diagrammes.

Processus d'utilisation

1. Création de diagrammes de séquence: :
   • Sélectionnez "Nouveau graphique" dans l'espace de travail.
   • Sélectionnez le modèle Diagramme de séquence.
   • Écrire du code en utilisant le langage DSL de ZenUML, par exemple :

    Alice -> Bob: Hello Bob, how are you?
   Bob --> Alice: I am good thanks!
   

   • Prévisualisez les graphiques en temps réel, effectuez des ajustements et optimisez.
2. Création d'organigrammes: :
   • Sélectionnez "Nouveau graphique" dans l'espace de travail.
   • Sélectionnez le modèle d'organigramme.
   • Écrire du code en utilisant le langage DSL de ZenUML, par exemple :

    start
   :Step 1;
   :Step 2;
   :Step 3;
   end
   

   • Prévisualisez les graphiques en temps réel, effectuez des ajustements et optimisez.
3. Exporter et partager des graphiques: :
   • Lorsque vous avez terminé de créer le diagramme, cliquez sur le bouton "Exporter" et sélectionnez le format d'exportation (PNG, SVG, etc.).
   • Partager les graphiques par le biais d'un lien ou d'un code d'intégration.
4. Fonctionnalités avancées: :
   • Améliorez la lisibilité des graphiques avec des icônes de nuages et d'autres extensions.
   • Mettez en surbrillance les messages sur le graphique en mode édition pour naviguer rapidement dans le code.
   • Visitez le centre d'aide ZenUML pour plus de conseils et d'assistance.

problèmes courants

• Comment garantir la sécurité des données ? ZenUML n'envoie pas de données au serveur pour le rendu, toutes les opérations sont effectuées localement pour garantir la sécurité des données.
• Comment puis-je obtenir une assistance technique ? Visitez le centre d'aide de ZenUML pour soumettre une demande d'assistance. La plupart des problèmes sont résolus dans les 8 heures.
• Favorise-t-il le travail d'équipe ? ZenUML prend en charge la collaboration en équipe, où les utilisateurs peuvent partager des liens de diagramme et éditer et visualiser des diagrammes ensemble.

Aiguisoir de schéma D2

Il existe de nombreux outils pour réaliser des schémas.

J'aime utiliser des outils de diagramme basés sur le code texte pour les diagrammes filaires comme Mermaid, Plantuml, Graphviz.

Ils génèrent tous des images, basées sur le code, et sont parfaits pour être placés dans des référentiels de code pour la gestion des versions.

Récemment, j'ai découvert un outil de ce type beaucoup plus facile à utiliser D2Voici un outil simple, intuitif et puissant à vous présenter.

D2 peut être utilisé en ligne de commande ou dans le navigateur. Supposons que vous ayez un fichier de code imageexample.d2La commande permettant de générer l'image est la suivante.

$ d2 exemple.d2

La plupart du temps, je l'utilise via mon navigateur. Il dispose d'un générateur en ligne play.d2lang.com(ci-dessous), collez le code, appuyez sur le bouton "compiler" et l'image sera générée immédiatement.

Si vous voulez le nœud A (le nom du nœud est A), tapez simplement A.

A

A est juste le nom du noeud, si vous voulez personnaliser le contenu du noeud, écrivez-le comme ci-dessous.

A : A

Ensuite, ajoutez un nœud.

A : A
B : B

Les connecter.

A : A
B : B
A -> B

La connexion peut être faite avec une flèche positive (->), ou vous pouvez utiliser la flèche d'inversion (<-), et même des flèches bidirectionnelles (<->). Si vous n'avez pas besoin de flèches, reliez simplement les lignes (--).

Du texte peut également être ajouté aux flèches.

A : A
B : B
A -> B : Connexion

Il peut y avoir plusieurs connexions entre les nœuds.

A : A
B : B
A -> B : Demande
A <- B : Réponse

Les connexions de nœuds peuvent également être écrites sur une seule ligne.

A -> C <- B : Connexion

Étape 1 -> Étape 2 -> Étape 3 -> Étape 4
Étape 4 -> Étape 1 : Retour d'information

Cette syntaxe est suffisante pour dessiner un schéma filaire de base, n'est-ce pas assez simple ?

D2 peut dessiner des diagrammes très complexes, pour plus de syntaxe voirfichier (informatique).

Enfin, si vous souhaitez modifier la forme du nœud, la boîte est remplacée par un cercle, comme indiqué ci-dessous.

A : A
A.forme : cercle

La forme peut même être transformée en nuage pour indiquer un service en nuage.

A : A
A.forme : nuage

La couleur de la ligne peut également être modifiée.

A : A
A.style.stroke : red