Claude Code + Mermaid : fini les diagrammes qui te font perdre 20 minutes

Anthropic a ajouté un connecteur Mermaid à Claude Code, et ça change pas mal la façon de faire des diagrammes quand on n'a pas envie de passer 20 minutes à aligner des flèches qui refusent de coopérer.

Mermaid, pour ceux qui ne connaissent pas, c'est à la fois un langage texte et un outil qui transforme ce texte en diagramme (flowchart, journey map, et une vingtaine d'autres types). Claude savait déjà écrire du Mermaid depuis un moment, mais il ne pouvait pas l'afficher directement ni le connecter à ton compte Mermaid. C'est exactement ce que règle ce nouveau connecteur MCP.

Comment ça marche concrètement

Avec le connecteur actif, Claude écrit le code du diagramme, et un widget directement dans la conversation le dessine à l'aide de la bibliothèque Mermaid, avec un bouton pour copier le texte brut. En coulisses, il y a sept outils répartis en deux groupes : quatre que Claude utilise tout seul (afficher le diagramme, se connecter à ton compte, lister tes diagrammes sauvegardés, lire le code d'un diagramme existant), et trois réservés à l'appli elle-même (réparer une erreur de syntaxe, sauvegarder, ou mettre à jour un diagramme déjà existant).

Petit détail technique : si tu ajoutes simplement le connecteur Mermaid officiel, tu n'auras qu'un seul outil. Pour débloquer tout le reste, il faut ajouter un connecteur personnalisé avec l'URL v3 de Mermaid.

Pourquoi passer par le connecteur plutôt que copier-coller

On pourrait se dire que demander le code à Claude et le coller soi-même dans Mermaid suffit, mais le connecteur va plus loin : il relie directement Claude à ton compte Mermaid, permet de réparer automatiquement une syntaxe cassée, et surtout ouvre un accès direct à l'éditeur visuel de Mermaid (où le code se met à jour en temps réel quand tu modifies le diagramme à la souris, au moins pour les flowcharts). Tu peux ainsi faire des allers-retours entre le chat et l'éditeur en ligne, exporter dans plusieurs formats, et sauvegarder sans créer de doublon puisque la mise à jour écrase directement l'existant.

Attention quand même : générer et afficher un diagramme est gratuit, mais la réparation automatique consomme des crédits IA Mermaid, et le plan gratuit limite à trois diagrammes.

Ce qu'il faut retenir

• Claude Code peut désormais afficher, sauvegarder et modifier des diagrammes Mermaid directement depuis le chat grâce à un connecteur MCP
• Il faut ajouter le serveur en connecteur personnalisé (URL v3) pour débloquer tous les outils, le connecteur officiel de base n'en donne qu'un
• L'éditeur visuel de Mermaid se synchronise avec le code en temps réel, pratique pour affiner un flowchart à la main
• La génération et l'affichage sont gratuits, mais la réparation de syntaxe consomme des crédits, et le plan gratuit Mermaid limite à trois diagrammes