Beauty Diagram

Qu'est-ce que Beauty Diagram ?

Beauty Diagram est un éditeur en ligne qui prend du code source Mermaid et PlantUML (et peut importer certains workflows draw.io) pour rendre des diagrammes avec une mise en page et un style plus nets, prêts pour les présentations. Son objectif principal est d’« embellir » ce que ces langages de diagrammes produisent déjà — repositionnement, remise en page et sortie prête à l’export — sans obliger les utilisateurs à redessiner manuellement leurs diagrammes.

Il prend en charge l’aperçu en direct, l’embellissement en un clic, et les exports en SVG ou PNG pour la documentation, les présentations et les revues. La page décrit aussi une typographie et des thèmes axés sur les présentations, plus un aperçu « SVG animé » pour les indications de mouvement de type séquence.

Fonctionnalités principales

• Éditeur Mermaid avec aperçu en direct et embellissement en un clic : Collez le code source Mermaid, visualisez le résultat immédiatement, et appliquez des changements de formatage sans réécrire le code.
• Éditeur PlantUML avec workflow d’embellissement : Passez à PlantUML, collez le code d’activité, et appliquez un formateur qui réaligné l’espacement et les éléments du diagramme.
• Import draw.io (Pro) : Importez un .drawio ou un export XML (le site note que c’est disponible sur Pro). L’éditeur parse le workflow en code source Mermaid pour l’embellissement.
• Remise en page avec routage orthogonal pour les diagrammes de flux/activités : Réespacement et routage des diagrammes sur une grille avec des connexions orthogonales (pour éviter les flèches diagonales traversant les nœuds).
• Changement de thèmes pour un style cohérent : Passez d’un thème à l’autre (listés : modern, atlas, obsidian, atelier) sans modifier le code source du diagramme.
• Typographie et style de niveau présentation : La page met en avant Geist à 14px / 500, les ligatures OpenType, des étiquettes alignées sur la ligne de base, et une préférence pour des ombres douces plutôt que des traits durs de 1px.
• Aperçus SVG animés (même source, superpositions de mouvement différentes) : Superposez des mouvements subtils (exemples listés : charge, laser, pulse) sur la sortie Mermaid pour clarifier la séquence/direction.
• Exports pour docs et présentations : Exportez en SVG et PNG. La page indique aussi export PNG 4× sur Pro et note que le SVG convient pour l’affichage à l’écran tandis que le PNG peut être utilisé quand les destinations ne supportent pas le SVG.
• Ajustements de nœuds/lignes via barre d’outils (source intacte) : Le site décrit le clic sur les nœuds/lignes pour ouvrir une barre d’outils flottante afin d’ajuster l’arrière-plan, la bordure, la couleur/largeur de ligne et la couleur du texte ; les personnalisations peuvent être sauvegardées avec le diagramme et partagées via lien.

Comment utiliser Beauty Diagram

1. Ouvrez l’éditeur en ligne et choisissez le type de diagramme (Mermaid ou PlantUML ; l’import draw.io est mentionné comme Pro).
2. Collez votre code source Mermaid ou PlantUML existant dans l’éditeur.
3. Utilisez Beautify pour appliquer le formateur : il remet en page le diagramme et applique le thème/règles de style sélectionnés.
4. Vérifiez l’aperçu en direct, ajustez éventuellement les couleurs via la barre d’outils nœuds/lignes, et changez de thème si nécessaire.
5. Exportez en SVG ou PNG pour le workflow cible (docs/présentations/revues comme décrit sur la page).

Cas d’utilisation

• Transformer un diagramme de flux Mermaid en graphique prêt pour diapositive : Collez le code Mermaid, embellissez pour obtenir un routage en grille orthogonal et une palette/typographie de présentation, puis exportez en SVG pour intégration ou visionnage en gros plan.
• Corriger des diagrammes d’activité PlantUML surchargés : Passez à l’onglet PlantUML, collez un diagramme d’activité, embellissez pour normaliser l’espacement et les détails de voies de circulation/mise en page.
• Maintenir une source de diagramme unique dans différents contextes de présentation : Utilisez le changement de thèmes (modern/atlas/obsidian/atelier) pour rendre le même contenu Mermaid pour une présentation, une page de documentation ou un README en mode sombre.
• Améliorer la lisibilité des diagrammes en réduisant le désordre visuel : Appliquez une palette à un seul accent où les losanges de décision/branches ressortent sur un contenu en niveaux de gris.
• Intégrer des workflows draw.io dans un pipeline de formatage basé sur Mermaid (Pro) : Importez un fichier .drawio ou export XML, parsez-le en code source Mermaid, et continuez l’édition/embellissement dans le workflow Mermaid.

FAQ

Comment embellir un diagramme de flux Mermaid ? Collez votre code source Mermaid dans l’éditeur, cliquez sur Beautify, et utilisez l’aperçu en direct pour confirmer les changements de mise en page et de style. La page indique que le code original reste inchangé ; c’est le rendu qui change.

Puis-je améliorer un diagramme d’activité PlantUML de la même manière ? Oui. La page décrit le passage à l’onglet PlantUML, la saisie du code d’activité, et le clic sur Beautify pour réaligner les swimlanes et normaliser l’espacement par défaut resserré.

Que signifie SVG par rapport à PNG pour les exports ? Le site indique que SVG est préférable pour l’affichage à l’écran (docs/sites web/intégrations Figma) car il reste net à tout zoom, tandis que PNG est utile pour les présentations exportées en PDF/imprimées ou quand l’outil de destination ne supporte pas SVG. Il mentionne aussi l’export PNG 4× en Pro.

Beauty Diagram peut-il importer un fichier draw.io ? Oui, mais c’est noté Pro : vous pouvez déposer un fichier .drawio ou un export XML dans l’éditeur. Le site explique qu’il parse le diagramme de flux/séquence en code source Mermaid pour une embellissement ultérieur.

Est-ce juste un clone de l’éditeur Mermaid Live ? La page contraste explicitement avec Mermaid Live en indiquant que Beauty Diagram post-traite la sortie Mermaid — en ajoutant une remise en page, espacement, typographie et changements de palette — plutôt que de simplement rendre ce que Mermaid produit par défaut.

Alternatives

• Mermaid Live editor (ou autres renderers Mermaid) : Utile pour le rendu en direct de la syntaxe Mermaid, mais la source suggère que Beauty Diagram se concentre sur le post-traitement du renderer par défaut pour une mise en page et un style de niveau présentation.
• Outils d’auteur de diagrammes/tableaux blancs (ex. outils de conception de diagrammes de flux) : Ils peuvent créer des graphiques pour slides, mais nécessitent souvent un redessin manuel plutôt qu’une embellissement de code source Mermaid/PlantUML existant.
• Outils de diagrammes génériques avec support d’export : Ils produisent des sorties SVG/PNG, mais sont typiquement orientés workflow de dessin plutôt que formatage/remise en page de code Mermaid/PlantUML.
• Workflows d’export natifs draw.io : Si vos diagrammes sont déjà dans draw.io, vous pouvez vous appuyer sur les exports intégrés ; la valeur de Beauty Diagram est décrite spécifiquement autour de la conversion/import en workflow Mermaid et l’application de règles d’embellissement ensuite.