L’espace Mermaid ouvre et crée les fichiers .mmd et .mermaid. Le texte du diagramme est le document ; l’image affichée est calculée à partir de lui, et n’est jamais réécrite dans le fichier.
Visuel et Source
Le sélecteur bascule entre le rendu et le langage littéral.
Le même moteur rend aussi les blocs Mermaid de vos documents Markdown, avec la même configuration. Le rendu lui-même ne provoque aucune requête réseau.
Modifier dans le rendu
Le dessin est directement manipulable.
Un clic sélectionne un élément. Glisser son corps tente un déplacement qui a du sens dans la grammaire du diagramme ; quand aucun équivalent fidèle n’existe, l’élément revient à la place calculée par Mermaid.
Le geste échange l’ordre visuel de deux nœuds Flowchart, réordonne les entrées d’une Timeline, déplace un point dans un Quadrant ou une carte entre les colonnes d’un Kanban, et met à jour les coordonnées d’une carte Wardley. Le repositionnement est animé, puis la source reflète immédiatement la mutation obtenue.
Une poignée distincte sert à créer une relation, pour qu’un déplacement ne soit jamais confondu avec une connexion.
Dans un flowchart, un double-clic sur un nœud ou une flèche sélectionne son libellé directement sur le canevas. Pour une flèche sans texte, la saisie apparaît au milieu du tracé. Ajouter, ou un double-clic sur le fond, affiche un nœud provisoire avec « Nœud » sélectionné : tapez son nom, puis validez avec Entrée. Échap abandonne la saisie ; pour un nouveau nœud, il annule entièrement l’ajout. La création et son premier libellé forment une seule action annulable.
Un clic ailleurs valide le texte et poursuit l’action choisie. L’enregistrement, le passage en Source et la fermeture valident aussi la saisie. Le champ conserve la sélection, les accents, copier/coller et Annuler/Rétablir du texte. Le diagramme se recalcule après validation, en conservant le zoom et le cadrage. La touche Supprimer retire la sélection lorsqu’aucun libellé n’est en cours d’édition.
La suppression d’un élément est immédiate, sans confirmation. ⌘Z restaure l’élément et les connexions retirées avec lui ; ⇧⌘Z rétablit la suppression.
Les flèches possèdent une marge cliquable invisible : vous pouvez les sélectionner près du trait, même lorsqu’il est mince ou pointillé. Cette marge reste confortable avec le zoom.
Mermaid garde la responsabilité de la mise en page. Balise ne mémorise pas une position libre que le format ne sait pas exprimer.
Modifier par la structure
En mode Visuel, la navigation expose la structure du diagramme.
Sélectionnez un élément pour modifier ses champs, utilisez Ajouter pour insérer une déclaration adaptée à la famille courante, Connecter quand la grammaire possède des références explicites, et Monter ou Descendre pour réordonner.
La sélection dans la structure ouvre l’inspecteur des propriétés, même s’il était masqué. Dans l’inspecteur, modifiez les propriétés puis choisissez Appliquer (ou appuyez sur Retour dans un champ texte). Pour les formes et les types de flèches d’un flowchart, cliquer sur une vignette applique immédiatement le choix ; ⌘Z permet de revenir au choix précédent. Plusieurs propriétés sont appliquées ensemble et s’annulent en une seule étape. Les valeurs contraintes, comme le risque d’une exigence ou le score d’un parcours, proposent une liste de choix.
Les champs dépendent du diagramme : libellés des sujets Mindmap et des cartes Kanban, participants et messages Sequence, dates et durées Gantt, valeurs XY, axes et courbes Radar, propriétés des exigences ou coordonnées Quadrant et Wardley. Une classe peut recevoir un libellé sans renommer son identifiant référencé.
La navigation structurée expose les mêmes actions au clavier et à VoiceOver.
Créer avec aperçu
Pour les autres familles, Ajouter ouvre une fiche adaptée au type d’élément. Choisissez son parent ou sa section, renseignez ses propriétés et vérifiez le dessin proposé. L’ajout est disponible lorsque l’aperçu du brouillon est valide. Annuler conserve le document. Le double-clic sur un élément structuré, ou Modifier avec aperçu dans l’inspecteur, ouvre la même fiche pour l’édition.
Les formes des flowcharts et les flèches possèdent des miniatures accompagnées de noms. Les relations entre entités proposent des cardinalités illustrées. Pour Gantt, choisissez une date ou une tâche précédente, une durée avec unité et les états de la tâche. Déplacer vers… propose les destinations acceptées.
Modifier les données du graphique
Données du graphique ouvre un tableau pour les familles à valeurs ou séries. Les modifications des cellules s’appliquent ensemble. Pour un graphique XY, le nombre de catégories ajuste toutes les séries ; les valeurs ajoutées commencent à zéro et réduire le nombre retire les dernières valeurs. Cette opération est annulable.
Les fiches des membres de classes distinguent visibilité, nom, paramètres et type. Les opérations Git proposent les branches présentes ; renommer une branche met à jour ses références. L’aperçu vérifie la validité de l’opération proposée. Les constructions avancées non reconnues conservent l’accès à leur définition.
Les modèles
Le centre de création propose les 28 familles reconnues par le moteur, avec un départ minimal pour chacune et 16 modèles recommandés.
La galerie offre une recherche par usage et par type, un aperçu, trois champs de personnalisation, et des vues Favoris, Récents et Personnels.
Vous pouvez désigner un dossier local de fichiers .mmd ou .mermaid comme bibliothèque personnelle. Vos modèles personnels restent des fichiers ordinaires.
Oublier ce dossier retire seulement son accès de Balise. Aucun fichier n’est supprimé.
Dans un diagramme ouvert, Enregistrer une copie comme modèle… ajoute le diagramme courant à cette bibliothèque.
Dans un document Markdown
Le menu Insérer ouvre la même galerie et pose la source choisie dans une clôture calculée pour ne pas entrer en conflit avec le contenu, en une seule modification annulable.
Modifier sur un bloc existant ouvre la même surface Visuel et Source dans une fenêtre redimensionnable.
Le travail y reste isolé : Annuler ne touche pas au Markdown, et Appliquer ne remplace que l’intérieur du bloc. Une ligne qui refermerait le bloc prématurément est refusée, pour ne jamais tronquer le document autour.
Pour produire un diagramme à partir d’un texte avec OpenAI, partez de l’espace Markdown. Vous pouvez ensuite insérer le résultat dans le Markdown ou ouvrir un brouillon Mermaid distinct, selon la présence d’une sélection. La génération exige un envoi explicite à OpenAI ; le rendu du diagramme reste local.
Copier et exporter
Vous pouvez copier la source, copier l’image, ou l’exporter en SVG et en PNG.
L’image exportée est celle qui a été assainie pour l’affichage : elle ne contient ni script ni lien actif.
Ce que cette surface ne fait pas
- Balise ne mémorise pas la position que vous donnez à un élément si le format Mermaid ne sait pas la représenter.
- Le diagramme
infon’a pas de navigation structurée. - Un diagramme trop volumineux reste consultable en Source, sans rendu.
Quand un diagramme refuse de s’afficher, voir Quand un diagramme ne s’affiche pas.
Voir ce parcours de bout en bout : Maintenir un diagramme à côté du code.