Partez d’un exemple ou collez une définition Mermaid. Lancez le rendu, vérifiez l’aperçu et exportez le diagramme.
Fonctionne localement dans votre navigateurUtilisez uniquement la syntaxe Mermaid. Les libellés HTML sont assainis : les scripts et les gestionnaires d'événements sont supprimés.
Conservez une définition Mermaid à côté de votre code, affichez-la ici pour examen et téléchargez la sortie lorsque vous avez besoin d'une image portable. L'outil évite délibérément les thèmes distants, le stockage cloud et les liens de suivi générés.
Collez une définition Mermaid : la page la dessine avec un moteur Mermaid 11.17.1 embarqué, puis vous pouvez copier le balisage SVG ou le télécharger sous le nom kivtools-diagram.svg. Les trois exemples fournis (organigramme, diagramme de séquence et modèle ER) sont des points de départ : lors des tests, des diagrammes d’état, des diagrammes de classes et des diagrammes de Gantt ont également été rendus, car l’analyseur accepte toute la grammaire Mermaid.
L’analyse, la disposition et le style s’exécutent dans cet onglet. Le texte du diagramme n’est jamais téléversé, le rendu fonctionne hors ligne une fois la page chargée, et le SVG exporté embarque ses propres styles au lieu de référencer des fichiers externes.
La première ligne choisit la grammaire : flowchart LR, sequenceDiagram, erDiagram, stateDiagram-v2, classDiagram, gantt et les autres types Mermaid 11 ont tous été rendus lors des tests. Un premier mot-clé inconnu arrête immédiatement l’analyseur, et une définition copiée depuis un autre outil peut utiliser une syntaxe que cette version n’accepte plus.
L’éditeur est du texte brut : pas d’autocomplétion ni d’aperçu en direct, donc relancez le rendu après chaque modification et fiez-vous à la ligne d’état. Recharger l’exemple est le moyen le plus rapide de revenir à un document dont l’analyse est garantie.
Le moteur fonctionne en mode strict de Mermaid. Lors des tests, un libellé contenant <img src=x onerror=...> est revenu sans le gestionnaire d’événement, les balises script ne se sont pas exécutées, les liens javascript: ont été écartés et les directives click n’ont produit aucun lien externe. Les libellés peuvent contenir du HTML sûr, comme du gras ou des sauts de ligne.
Considérez cela comme une garantie d’assainissement, pas comme une interdiction du HTML : l’outil retire le contenu exécutable des libellés mais ne rejette pas la définition. Évitez malgré tout les données sensibles — la page est locale, mais le SVG exporté est un fichier que vous pouvez partager.
Copier SVG place le balisage SVG dans le presse-papiers ; Télécharger SVG enregistre ce même balisage sous kivtools-diagram.svg. Les deux boutons restent désactivés tant qu’aucun diagramme n’a été rendu, et Effacer les désactive de nouveau. Le fichier exporté s’ouvre seul et peut être intégré à du Markdown, une page HTML ou une demande de tirage.
Une erreur de syntaxe ne vide pas la scène : le dernier aperçu réussi reste affiché pendant que la ligne d’état montre le message de l’analyseur avec le numéro de ligne. Vérifiez cette ligne avant de copier le SVG, surtout si le diagramme a été modifié à la hâte.