Dessins Mermaid dans neoDraw importer et modifier visuellement

Tu as un diagramme Mermaid sous forme de code et tu veux l'afficher dans WordPress? L'image générée automatiquement est un bon début. Pour un article fini, il faut souvent encore ajuster les espacements, les couleurs ou les légendes.

C'est précisément pour cela que tu peux utiliser neoDraw. Le plugin WordPress gratuit apporte un éditeur de dessin basé sur Excalidraw directement sur ton site. Tu colles ton code Mermaid, vérifies l'aperçu et importes le diagramme comme dessin modifiable. Aucune connaissance préalable en neoDraw n'est nécessaire: ce guide te mène du téléchargement à l'importation jusqu'au fichier SVG final dans la médiathèque WordPress.

Le procédé convient pour la documentation technique, l'architecture logicielle, les processus et les diagrammes UML. En complément tu trouveras un prompt GPT directement utilisable ainsi que des exemples pour des flowcharts, des diagrammes de séquence et des diagrammes de classes.

1. neoDraw télécharger gratuitement, l'installer et l'activer dans WordPress.
2. Ouvrir un nouveau neoDrawdessin dans la médiathèque ou directement dans le page builder utilisé.
3. Dans l'éditeur cliquer sur Plus d'outils puis sur Mermaid vers Excalidraw.
4. Coller la syntaxe Mermaid à gauche et vérifier la prévisualisation à droite.
5. Cliquer sur Insérer, modifier visuellement les formes et les textes et enregistrer le dessin.

neoDraw enregistre le résultat comme SVG dans la médiathèque WordPress. De là tu peux insérer le diagramme comme une image normale dans Gutenberg, Bricks, Elementor ou l'éditeur classique.

Mermaid décrit un diagramme en texte. Les nœuds, les connexions et la direction figurent dans le code tandis que le moteur en déduit le rendu graphique. C'est pratique pour les README, les wikis et la documentation versionnée car une modification de processus se sauvegarde comme une petite modification de texte.

Pour un site web le rendu calculé automatiquement suffit souvent pas. Peut-être qu'un nœud décisionnel doit être plus visible, qu'une connexion doit suivre un autre trajet ou que le dessin doive s'accorder au design du site. Une capture d'écran statique résout le problème seulement en surface. Ce reste une image. Après conversion en neoDraw tu peux en revanche sélectionner les formes, flèches et textes générés et les modifier avec les outils de l'éditeur basé sur Excalidraw.

L'importation évite la partie mécanique du travail. Mermaid crée la structure, neoDraw reprend la mise en forme. Pour un flowchart tu n'as pas à créer chaque boîte individuellement puis les relier avec des flèches. Après insertion tu peux néanmoins déplacer, annoter, colorer ou supprimer chaque élément pris en charge.

• Utiliser le code Mermaid existant comme point de départ
• Importer des diagrammes générés avec ChatGPT ou un autre LLM
• Retoucher visuellement des flowcharts, diagrammes de séquence et diagrammes de classes
• Compléter le style esquisse, les couleurs, la police, les icônes et les indications supplémentaires
• Enregistrer le diagramme final en tant que fichier SVG évolutif dans WordPress

Ceci est particulièrement utile pour les articles techniques, les documents d'intégration, les descriptions de processus, les flux d'API, les arbres de décision et les diagrammes UML qui doivent être compréhensibles et modifiables ultérieurement.

Tu n'as pas besoin de connaître complètement la syntaxe Mermaid par cœur. Un modèle de langage peut produire un premier brouillon exploitable à partir d'une description de processus. Indique le type de diagramme, le sens de lecture, les libellés souhaités et le format de sortie. Demande expressément du code Mermaid pur sans explication, afin que tu puisses copier directement le résultat.

Un prompt qui fonctionne pour un processus simple de validation :

Crée un flowchart Mermaid pour un processus éditorial WordPress. Sens de lecture de gauche à droite. Étapes : rédiger le brouillon, vérifier sur le fond, revenir au brouillon si des modifications sont nécessaires, sinon publier. Ne donne que du code Mermaid valide dans un bloc de code. Utilise de courts libellés allemands et pas d'étapes supplémentaires de ta part.

Le résultat possible ressemble à ceci :

flowchart LR
    A[Entwurf schreiben] --> B{Fachlich freigegeben?}
    B -- Nein --> A
    B -- Ja --> C[Veroeffentlichen]

Vérifie quand même toi-même la logique. GPT peut omettre une étape, inventer une branche ou utiliser des caractères que Mermaid interprète différemment de ce que tu attends. L'aperçu dans neoDraw montre ces problèmes rapidement.

L'import Mermaid s'exécute intégralement dans le neoDrawéditeur. Tu n'as pas besoin d'un éditeur Mermaid Live externe et tu n'as pas à sauvegarder une image PNG intermédiaire.

Télécharge le fichier ZIP gratuit depuis neoDraw ouvre dans WordPress Extensions > Ajouter > Téléverser une extension, sélectionne le fichier ZIP et active l'extension. Ensuite tu peux créer un nouveau dessin via le lien d'action neoDraw erstellen dans la vue des extensions ou via la médiathèque WordPress.

Si tu travailles déjà sur une page, tu peux neoDraw également ouvrir depuis la zone d'image de Gutenberg, Bricks, Elementor ou de l'éditeur classique. L'éditeur apparaît dans ton flux de travail WordPress.

Clique sur Plus d'outils dans la barre d'outils. Dans la section Generate tu trouveras l'entrée Mermaid vers Excalidraw. La boîte de dialogue comporte deux pages : à gauche le champ Syntaxe Mermaid, à droite l'aperçu.

neoDraw mémorise localement dans le navigateur le dernier code Mermaid saisi. Si tu rouvres la boîte de dialogue plus tard, tu peux continuer là où tu t'étais arrêté. Ne compte quand même pas uniquement sur ce stockage intermédiaire pour les diagrammes importants. Conserve le code original dans ta documentation ou ton système de gestion de version.

Remplace l’exemple dans le champ de gauche par ton code Mermaid. L’aperçu se met à jour pendant la saisie. Un diagramme correct apparaît directement à droite. En cas de syntaxe invalide, la fenêtre affiche une erreur au lieu d’insérer un résultat incomplet dans le dessin.

Pour un premier test, un petit flowchart convient :

flowchart TD
    A[Anfrage] --> B{Vollstaendig?}
    B -- Nein --> C[Rueckfrage]
    C --> A
    B -- Ja --> D[Bearbeiten]

Garde d’abord les étiquettes courtes. Les phrases longues agrandissent les nœuds et perturbent l’agencement calculé automatiquement. Le texte détaillé tu peux l’ajouter plus tard dans neoDraw ou expliquer à côté du diagramme.

Si l’aperçu est correct, clique sur Insérer. neoDraw ferme la fenêtre, place le diagramme au centre de la zone de dessin et adapte la vue au nouveau contenu. Les types Mermaid pris en charge sont convertis en éléments Excalidraw. Tu peux donc cliquer sur un nœud, modifier son texte, reconnecter une flèche ou déplacer plusieurs éléments ensemble.

C’est ce qui distingue le flux de travail de l’export d’un Mermaid-SVG ou de captures d’écran. Le graphique n’est pas réduit à une représentation pixelisée ou vectorielle finale. Il devient la base de départ pour le travail ultérieur dans l’éditeur.

Après l’import, tu peux modifier les couleurs, l’épaisseur des lignes, les pointes de flèche, la police, l’opacité et le style esquissé. Ajoute au besoin des formes libres, des marques à la main, des icônes, des images ou des liens. Pour un article, il est souvent pertinent de mettre en couleur uniquement le chemin principal et d’atténuer les chemins secondaires.

Enregistre ensuite le dessin dans neoDraw. Le plugin dépose un fichier SVG dans la bibliothèque de médias WordPress et intègre les données de l’éditeur. Ainsi le dessin reste modifiable ultérieurement. En même temps, tu peux l’utiliser comme un média classique dans articles et pages. Le SVG reste net sur différentes tailles d’écran.

La fenêtre Mermaid actuelle mentionne trois types de diagrammes pris en charge directement :

• Flowchart : processus, arbres de décision, flux de travail et dépendances
• Sequence Diagram : messages et appels entre personnes, services ou composants logiciels
• Class Diagram : classes, attributs, méthodes et relations dans des modèles proches de l’UML

Ces types sont convertis en éléments Excalidraw modifiables. D’autres formats Mermaid, par exemple Gantt, Mindmap, State Diagram, ER-Diagram, User Journey ou Pie Chart, peuvent être affichés par la fenêtre en tant qu’image. Le résultat peut alors être déplacé ou mis à l’échelle dans son ensemble, mais pas modifié nœud par nœud. Si la retouche visuelle est décisive, construis le contenu si possible comme Flowchart, Sequence Diagram ou Class Diagram.

Un Flowchart Mermaid commence par flowchart ou graph. LR ordonne le déroulement de gauche à droite, TD de haut en bas :

flowchart LR
    A[Ticket reçu] --> B{Priorité élevée ?}
    B -- Oui --> C[Affecter immédiatement]
    B -- Non --> D[Backlog]
    C --> E[Vérifier la solution]
    D --> E

Un diagramme de séquence convient pour une communication ordonnée dans le temps. Cet exemple montre un appel REST simplifié de WordPress :

sequenceDiagram
    participant B as Navigateur
    participant W as WordPress
    participant A as API
    B->>W: Envoyer le formulaire
    W->>A: Envoyer la requête
    A-->>W: Fournir le résultat
    W-->>B: Afficher la sortie

Après l’import, tu peux déplacer les participants, raccourcir les libellés et mettre en couleur les messages importants.

Les diagrammes de classes représentent des relations statiques. Pour une petite logique médias WordPress, le code pourrait ressembler à ceci :

classDiagram
    class MediaItem {
        +String filename
        +String altText
        +save()
    }
    class Drawing {
        +String svgData
        +edit()
    }
    MediaItem <|-- Drawing

Dans neoDraw tu peux, après la conversion, ajouter des explications supplémentaires sans compliquer la syntaxe Mermaid elle-même.

Commence par la disposition générale. Marque les nœuds liés et déplace-les en groupe avant de corriger les flèches individuelles. Ensuite, fais un second passage pour la typographie et les couleurs. Ainsi tu évites de devoir ajuster finement plusieurs fois.

Pour les diagrammes techniques, un système de couleurs limité fonctionne généralement mieux qu’une couleur par nœud. Par exemple, utilise une couleur pour les entrées, une pour les décisions et une pour les résultats. neoDraw a des rectangles, des losanges, des ellipses, des flèches, un stylo libre, du texte, des cadres, des icônes et une bibliothèque. Tu peux aussi ajouter des liens cliquables si un nœud doit pointer vers une documentation ou une sous-page.

Les éléments convertis se comportent ensuite comme des objets Excalidraw dessinés normalement. Tu peux ainsi renforcer l’aspect volontairement dessiné à la main ou rendre les lignes plus calmes, selon que le diagramme doive ressembler davantage à un tableau blanc d’atelier ou à une documentation technique.

neoDraw enregistre les dessins dans la médiathèque WordPress. C’est plus utile au quotidien qu’un dossier d’export supplémentaire : le fichier SVG a une entrée d’attachement normale, peut être sélectionné, retrouvé et rouvert dans l’éditeur.

Dans Gutenberg, Bricks, Elementor et l’éditeur classique ajoute neoDraw des accès directs aux champs d’image correspondants. Même les page builders qui reprennent les images de la médiathèque peuvent utiliser le SVG enregistré. Tu crées donc le diagramme Mermaid là où tu éditeras ensuite l’article.

Lorsque tu mets à jour un dessin, vérifie ensuite les pages concernées et vide si nécessaire le cache de la page ou du CDN. Pour des graphiques de processus importants, conserve aussi une copie locale du code source Mermaid. Le SVG contient la neoDraw-Données de l'éditeur, mais ne remplace pas une documentation technique versionnée.

• L’aperçu reste vide : Vérifie la première ligne. Elle doit correspondre au type de diagramme, par exemple flowchart TD ou sequenceDiagram.
• Un flowchart plante au mot end : Mermaid peut traiter un end comme mot de contrôle. Écris End avec une majuscule au début ou mets le label entre guillemets.
• Les caractères spéciaux provoquent une erreur de syntaxe : Mets les labels longs entre guillemets et simplifie d’abord le texte. Ajoute les détails typographiques plus tard dans neoDraw.
• Le diagramme est trop large : Passe de LR à TD, raccourcis les labels ou divise un grand flux en deux dessins.
• Les éléments ne peuvent pas être sélectionnés individuellement : Tu utilises probablement un type Mermaid qui est rendu uniquement comme image. Utilise pour des nœuds éditables directement Flowchart, diagramme de séquence ou diagramme de classes.
• Le code GPT contient du texte explicatif : Copie uniquement le contenu du bloc de code Mermaid. Les phrases avant ou après le code n’appartiennent pas au champ de syntaxe.

Pour les types supportés, les formes, textes et connexions restent des éléments Excalidraw. Tu peux les modifier dans le neoDraw-éditeur et les enregistrer avec d’autres objets. Pour la publication sur WordPress, cet état visuel est généralement celui qui compte.

L’importation n’est pas une connexion bidirectionnelle permanente. Si tu déplaces un nœud dans neoDraw si tu renommes ou traces une nouvelle flèche, l’éditeur n’écrit pas ce changement dans ton code Mermaid d’origine. Si tu veux maintenir le code et le graphique en parallèle, décide à l’avance quel état est la source.

Pour la documentation technique, Mermaid comme source est pertinent : modifie le code, réimporte et ne fais ensuite que quelques ajustements visuels. Pour un graphique éditorial sur un site, neoDraw comme source peut convenir une fois la structure de base importée.

Un diagramme peut rendre un article plus compréhensible, mais ne remplace pas le texte explicatif. Les moteurs de recherche et les lecteurs d’écran ne saisissent que partiellement les relations complexes d’un graphique. Décris donc le flux principal dans le paragraphe environnant et donne à la SVG enregistrée un texte alternatif concret.

Un texte alt utile indique le type de diagramme et le message principal, par exemple : Organigramme du processus éditorial WordPress, de la rédaction à la publication. Ne mets pas chaque nœud dans le texte alt. Pour un diagramme UML ou de séquence complexe, une alternative textuelle détaillée appartient à l’article.

Utilise le mot-clé principal là où il décrit le contenu. Les répétitions comme "Mermaid Diagramm Mermaid Zeichnung Mermaid Editor" n’aident pas les lecteurs et ne sont pas une bonne stratégie SEO. Des titres H2 pertinents, un titre de page adapté, des exemples visibles et une réponse claire à la question de recherche valent mieux.

Puis-je modifier un diagramme Mermaid dans WordPress ?

Oui. neoDraw convertit les organigrammes, diagrammes de séquence et diagrammes de classes en éléments Excalidraw modifiables. Les autres types Mermaid sont affichés comme image.

Où trouver Mermaid vers Excalidraw dans neoDraw?

Ouvre dans le neoDraw-éditeur Autres outils et clique dans la section Generate sur Mermaid vers Excalidraw.

ChatGPT peut-il créer des diagrammes Mermaid ?

Oui. Décris le type de diagramme, la direction de lecture, les nœuds et les connexions le plus précisément possible et demande du code Mermaid pur. Vérifie ensuite le flux dans l’aperçu.

Quels types de diagrammes Mermaid sont dans neoDraw directement éditables ?

Flowchart, Sequence Diagram et Class Diagram sont pris en charge directement. Les autres types sont rendus par l’import en image.

Puis-je enregistrer un diagramme Mermaid en SVG ?

Oui. neoDraw enregistre le dessin inséré et modifié comme SVG dans la médiathèque WordPress.

Le code Mermaid reste-t-il synchronisé après modification ?

Non. Les modifications apportées aux éléments Excalidraw ne sont pas réécrites dans le code Mermaid d'origine.

Est neoDraw gratuit?

La version décrite dans ce guide neoDrawpeut être téléchargée gratuitement et installée dans WordPress.

Ai-je besoin d’un éditeur Mermaid externe?

Non. Le champ de saisie, l’aperçu et l’insertion se trouvent directement dans l’éditeur neoDrawMermaid.

Mermaid est puissant quand une structure logique doit rapidement émerger à partir d’un texte. neoDraw prend en charge la partie où un diagramme doit fonctionner pour de vrais lecteurs sur une page WordPress. Tu importes le code, corriges l’affichage avec des outils visuels et sauvegardes le résultat comme SVG toujours modifiable dans la médiathèque.

Pour un premier essai, le petit organigramme de validation de ce guide suffit. Importe-le, déplace un nœud, change une couleur et sauvegarde le dessin. Ensuite, le procédé est le même pour des diagrammes de processus plus larges, l’architecture logicielle et la documentation technique.