Éditeur Mermaid en ligne

Dessinez des organigrammes, des diagrammes de séquence, des diagrammes de Gantt et bien plus à partir de quelques lignes de texte. Écrivez du code Mermaid à gauche, regardez le diagramme se mettre à jour à droite, puis exportez-le en SVG ou PNG pour des documents, des présentations ou du Markdown. GitHub, GitLab, Notion et de nombreuses applications de notes affichent aussi le code Mermaid directement.

Fonctionne dans votre navigateur — rien de ce que vous saisissez n’est envoyé

Chargement de Mermaid…

Mode d’emploi

Choisissez un diagramme dans Insérer un modèle, ou collez du code Mermaid que vous avez déjà.
Modifiez le code à gauche. L'aperçu se met à jour après une pause dans la frappe, et les erreurs de syntaxe s'affichent en dessous.
Choisissez un thème, puis téléchargez en SVG ou PNG, ou copiez le code SVG.

Explication des options

Types de diagrammes: Les modèles couvrent les organigrammes, les diagrammes de séquence, de classes, d'états et ER, les diagrammes de Gantt, les diagrammes circulaires et les cartes mentales. D'autres types Mermaid comme les chronologies, les diagrammes en quadrants et les graphes Git peuvent être écrits directement.
Thème: Les thèmes intégrés par défaut, neutre, sombre et forêt. Neutre est proche du noir et blanc et s'imprime bien.
Export: Le SVG est vectoriel et s'agrandit sans perte. Le PNG est exporté au double de la taille avec une couleur de fond, pour les applications de messagerie et les présentations.

Aide-mémoire des organigrammes

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|Yes| D[(Database)]
    C -.->|No| E((Circle))

TD de haut en bas, LR de gauche à droite
--> flèche continue, -.-> en pointillés, ==> épaisse, -->|texte| avec un libellé

Questions fréquentes

Puis-je coller du code Mermaid dans GitHub ?

Oui. Placez-le dans un bloc de code ```mermaid dans un fichier Markdown, une issue ou un commentaire, et GitHub affiche le diagramme. GitLab, Notion, Obsidian et Typora le prennent en charge aussi.

Mon code est-il envoyé quelque part ?

Non. Mermaid s'affiche dans votre navigateur ; le code et le diagramme ne quittent jamais votre appareil.

Pourquoi le formatage Markdown à l'intérieur des nœuds ne fonctionne-t-il pas ?

Pour permettre l'export en PNG, les libellés des nœuds sont dessinés comme du texte SVG, qui ne prend pas en charge les balises HTML ni une partie de la mise en forme riche.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.