Intégrer des diagrammes Mermaid
Créez un diagramme Mermaid et obtenez un code iframe partageable que vous pouvez intégrer dans n'importe quel site web. Gratuit, instantané, sans compte.
Intégrer des diagrammes Mermaid
Créez un diagramme Mermaid et obtenez un code iframe partageable que vous pouvez intégrer dans n'importe quel site web. Gratuit, instantané, sans compte.
Votre code Mermaid
Aperçu en direct
Code d'intégration
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Pour les développeurs
Vous pouvez générer des URL d'intégration de manière programmatique sans utiliser cet éditeur. Le code du diagramme est encodé en base64 sûr pour URL.
Format d'URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}Comment encoder
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"Thèmes pris en charge : default · dark · forest · neutral
Comment intégrer un diagramme Mermaid
Écrivez le code de votre diagramme Mermaid dans l'éditeur ci-dessus
Copiez le code iframe généré en un clic
Collez-le dans n'importe quel site web, article de blog ou page de documentation
Où l'utiliser
GitHub et GitLab
Intégrez des diagrammes en direct dans les pages wiki, descriptions d'issues ou documentation de projet.
Sites de documentation
Ajoutez des diagrammes interactifs à Confluence, Notion ou toute plateforme de documentation basée sur HTML.
Articles de blog
Enrichissez les articles techniques avec des diagrammes d'architecture, organigrammes et diagrammes de séquence.
Wikis internes
Gardez les bases de connaissances de l'équipe visuelles et à jour grâce aux diagrammes intégrés.
Questions fréquentes
La fonction d'intégration est-elle gratuite ?
Oui, entièrement gratuite. Il n'y a aucune limite d'utilisation, aucun compte requis, et les URL iframe générées fonctionnent indéfiniment.
Quels navigateurs prennent en charge le diagramme intégré ?
Le lecteur d'intégration fonctionne dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Il utilise HTML5 et JavaScript standard.
Puis-je personnaliser la taille de l'iframe ?
Oui — il suffit de modifier les attributs width et height dans le code iframe généré pour l'adapter à votre mise en page. Vous pouvez également ajouter du CSS pour le rendre responsive.