Convertisseur en ligne gratuit de MERMAID en SVG

Qu’est-ce que le format MERMAID ?

Dans le contexte des cartes heuristiques et des organigrammes, un fichier MERMAID est un fichier source en texte brut contenant la syntaxe Mermaid, généralement enregistré avec l’extension .mmd ou .mermaid. La source décrit des organigrammes, des diagrammes de séquence, des diagrammes de classes, des diagrammes d’état, des diagrammes entité-association et des cartes heuristiques, au lieu de stocker une image finale.

Les fichiers Mermaid sont créés ou modifiés dans Mermaid Live Editor, Visual Studio Code avec une extension Mermaid, Obsidian et les systèmes de documentation prenant en charge les blocs Mermaid. L’ouverture du fichier dans un éditeur de texte affiche des déclarations telles que flowchart TD ou mindmap ; ces déclarations doivent être rendues par un moteur compatible avec Mermaid.

Qu’est-ce que le format SVG ?

SVG, ou Scalable Vector Graphics, est un format d’image basé sur XML qui stocke des tracés, des formes et du texte. Les navigateurs, les outils de documentation, les éditeurs vectoriels et de nombreuses applications de publication peuvent l’afficher sans environnement d’exécution Mermaid.

Un SVG reste net lorsqu’il est agrandi, offre généralement une meilleure mise à l’échelle qu’une capture d’écran raster et peut être mis en forme ou modifié dans des applications telles qu’Inkscape. Le fichier exporté est le diagramme rendu, et non la source Mermaid d’origine ; pour modifier ultérieurement la structure du diagramme, il est donc préférable d’utiliser le fichier .mmd.

Comment convertir MERMAID en SVG

Utilisation de Mermaid CLI

Mermaid CLI est la méthode de bureau ou en ligne de commande la plus directe et nécessite Node.js. Installez le moteur de rendu avec :

npm install -g @mermaid-js/mermaid-cli

Enregistrez la source sous le nom diagram.mmd, puis effectuez le rendu avec :

mmdc -i diagram.mmd -o diagram.svg

L’option -i indique la source Mermaid et -o indique la sortie SVG. Pour un diagramme utilisant un thème personnalisé ou un fichier de configuration, transmettez-le avec :

mmdc -i diagram.mmd -o diagram.svg -c mermaid-config.json

Vous pouvez également effectuer le rendu directement avec npx sans installation globale :

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg

Utilisation de Mermaid Live Editor

Ouvrez la source dans Mermaid Live Editor, vérifiez l’aperçu rendu pour détecter les erreurs de syntaxe, puis utilisez Actions → Export Diagram → SVG ou le contrôle d’export SVG équivalent. Enregistrez le fichier téléchargé avec une extension .svg. Cette méthode convient lorsque Node.js ne peut pas être installé, mais elle dépend de la version de Mermaid prise en charge par l’éditeur et des fonctionnalités de diagramme disponibles.

Utilisation du convertisseur en ligne intégré

Vous pouvez convertir gratuitement le fichier sur 101convert.com sans installer de logiciel : téléversez le fichier .mmd ou .mermaid, choisissez SVG comme format de sortie, lancez la conversion, puis téléchargez le fichier .svg obtenu.

Considérations relatives à la qualité et à la compatibilité

Les erreurs de conversion proviennent généralement d’une syntaxe Mermaid non prise en charge, de dépendances de diagramme manquantes ou d’une indentation incorrecte dans des constructions telles que les cartes heuristiques. Effectuez le rendu de la source avant l’exportation et examinez le SVG à sa taille d’affichage prévue.

La sortie SVG peut dépendre des polices disponibles, du rendu du navigateur, de la version de Mermaid et des paramètres du thème. Si l’apparence exacte est importante, utilisez une police courante ou convertissez le texte en tracés dans un éditeur vectoriel après l’exportation ; la conversion du texte en tracés rend sa modification ultérieure plus difficile.

Certains logiciels prenant en charge SVG limitent les styles intégrés, les scripts, les liens hypertexte ou les éléments XML étrangers. Pour une compatibilité maximale, utilisez un SVG statique simple et supprimez les fonctionnalités interactives qui dépendent de JavaScript. Conservez le fichier Mermaid d’origine avec le SVG afin que le diagramme reste modifiable au niveau de sa structure.