Diagramme en code
Diagram as Code
Rend les organigrammes, les diagrammes de séquence et les camemberts Mermaid à mesure que vous tapez, avec son propre analyseur et sa propre mise en page, énumère exactement la syntaxe qu’il accepte, et exporte en SVG ou en PNG.
Du texte Mermaid à gauche, l’image à droite, mise à jour au fil de la frappe. L’analyseur, la mise en page et le moteur de rendu sont ceux de ce site plutôt que la bibliothèque Mermaid, et c’est pourquoi la grammaire prise en charge est listée en entier sur la page — trois types de diagrammes, et pour chacun exactement les constructions qui sont lues.
Code Mermaid
Aperçu
Grammaire prise en charge (tout le reste est signalé comme une erreur avec un numéro de ligne)
Organigramme — graph / flowchart
- Directions TD, TB, LR, RL, BT
- Formes [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- Traits -->, ---, -.->, -.-, ==>, ===
- Étiquettes -->|texte|, -- texte -->, -. texte .->, == texte ==>
- A --> B --> C, A & B --> C
- subgraph nom [titre] … end (imbrication possible)
- style, classDef, class, :::nomDeClasse
- %% commentaires, ; séparateurs
Non pris en charge : click, linkStyle, direction, les flèches <-->, --o et --x, les chaînes Markdown
Séquence — sequenceDiagram
- participant A as Nom, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
Non pris en charge : par, critical, break, rect, box, create/destroy, links
Camembert — pie
- pie [showData] [title Quelque chose]
- "nom" : valeur
Les diagrammes de classes, d’états, ER, de Gantt, les cartes mentales et les autres types ne sont pas encore dessinés. Pour les diagrammes de Gantt, il existe un outil à part.
Comment s’en servir
Partez d’un exemple
L’organigramme, le diagramme de séquence et le camembert ont chacun un échantillon qui emploie l’essentiel de ce que l’analyseur comprend. En modifier un va plus vite que d’écrire depuis la liste de syntaxe.
Lisez l’erreur par numéro de ligne
Tout ce qui sort de la grammaire prise en charge est refusé avec la ligne et ce qui n’allait pas, plutôt que de laisser un canevas vide à débroussailler.
Exportez ou imprimez
Le SVG garde le texte sélectionnable et s’agrandit proprement ; le PNG à 2× est le choix sûr pour un jeu de diapositives ou un message de discussion.
Questions fréquentes
Quels types de diagrammes fonctionnent ?
L’organigramme (graph / flowchart), sequenceDiagram et pie. Class, state, ER, gantt, gitGraph, mindmap et les autres sont nommés dans l’erreur plutôt que d’échouer vaguement — pour un diagramme de Gantt, il y a un outil séparé sur ce site.
Mon diagramme fonctionne sur mermaid.live mais pas ici
Probablement une construction hors de la liste de la page — `click`, `linkStyle`, `direction` dans un subgraph, les flèches `<-->`, `--o` et `--x`, les métadonnées YAML en tête, ou les chaînes Markdown. L’erreur nomme laquelle, et la liste est le contrat complet.
Le texte français se met-il en page correctement ?
Oui. Les largeurs de boîte sont mesurées en comptant les caractères CJK et hangul à la pleine chasse et tout le reste à une fraction fixe de celle-ci, accents compris : é, à et ç mesurent exactement comme e, a et c, donc « Réévaluation » ne déborde pas de son nœud. C’est aussi pourquoi une étiquette coréenne ne déborde pas comme elle le fait dans les moteurs qui supposent chaque caractère en demi-chasse.
Mon diagramme est-il envoyé quelque part ?
Non. L’analyse et le rendu ont lieu dans la page, et le brouillon est gardé dans ce navigateur. Rien n’est téléversé, ce qui compte quand le diagramme est votre architecture interne.
À alimenter depuis
Générateur de diagramme de Gantt
Gantt Chart Builder
Transforme un tableau de tâches — saisi ou collé en CSV — en diagramme de Gantt à l’échelle du jour, de la semaine ou du mois, avec flèches de dépendance, jalons, ligne du jour et week-ends grisés, exporté en SVG ou en PNG ou imprimé.
Liste de tâches
Todo List
Tient une liste à cocher dans votre navigateur, avec échéances, étiquettes et édition au clavier d’abord, exportable en Markdown.
Bloc-notes
Scratch Notepad
Un bloc-notes en texte brut qui enregistre à mesure que vous tapez et survit à un rechargement, avec un compteur de mots.
Atlas de sprites
Sprite Sheet Packer
Range plusieurs images dans un seul atlas et produit à côté la feuille CSS ou la carte JSON des positions.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Générateur de diagramme de Gantt
Gantt Chart Builder
Transforme un tableau de tâches — saisi ou collé en CSV — en diagramme de Gantt à l’échelle du jour, de la semaine ou du mois, avec flèches de dépendance, jalons, ligne du jour et week-ends grisés, exporté en SVG ou en PNG ou imprimé.
Éditeur Markdown
Markdown Editor
Édite du Markdown avec un aperçu en direct et exporte le HTML rendu, tableaux GFM et listes de tâches compris.
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
Liste de tâches
Todo List
Tient une liste à cocher dans votre navigateur, avec échéances, étiquettes et édition au clavier d’abord, exportable en Markdown.
Encodeur et décodeur Base64
Base64 Encoder & Decoder
Encode et décode en Base64 et en Base64URL, pour du texte comme pour des fichiers, avec un traitement correct de l’UTF-8.
Supprimer l’arrière-plan
Background Remover
Détoure un fond uni ou d’une seule couleur dans l’espace OKLab et rend un PNG transparent, avec un pinceau pour reprendre les bords, sans envoi de fichier, tout dans votre navigateur.