Incorporare diagrammi Mermaid
Crea un diagramma Mermaid e ottieni un codice iframe condivisibile che puoi incorporare in qualsiasi sito web. Gratuito, istantaneo, nessun account necessario.
Incorporare diagrammi Mermaid
Crea un diagramma Mermaid e ottieni un codice iframe condivisibile che puoi incorporare in qualsiasi sito web. Gratuito, istantaneo, nessun account necessario.
Il tuo codice Mermaid
Anteprima dal vivo
Codice di incorporamento
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Per sviluppatori
Puoi generare URL di incorporamento programmaticamente senza usare questo editor. Il codice del diagramma è codificato come base64 sicuro per URL.
Formato URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}Come codificare
// 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"Temi supportati: default · dark · forest · neutral
Come incorporare un diagramma Mermaid
Scrivi il codice del tuo diagramma Mermaid nell'editor sopra
Copia il codice iframe generato con un clic
Incollalo in qualsiasi sito web, post di blog o pagina di documentazione
Dove usarlo
GitHub e GitLab
Incorpora diagrammi dal vivo nelle pagine wiki, nelle descrizioni delle issue o nella documentazione del progetto.
Siti di documentazione
Aggiungi diagrammi interattivi a Confluence, Notion o qualsiasi piattaforma di documentazione basata su HTML.
Post di blog
Arricchisci gli articoli tecnici con diagrammi di architettura, diagrammi di flusso e diagrammi di sequenza.
Wiki interni
Mantieni le basi di conoscenza del team visive e aggiornate con diagrammi incorporati.
Domande frequenti
La funzione di incorporamento è gratuita?
Sì, completamente gratuita. Non ci sono limiti di utilizzo, non è richiesto un account e gli URL iframe generati funzionano a tempo indeterminato.
Quali browser supportano il diagramma incorporato?
Il visualizzatore di incorporamento funziona in tutti i browser moderni, tra cui Chrome, Firefox, Safari ed Edge. Utilizza HTML5 e JavaScript standard.
Posso personalizzare la dimensione dell'iframe?
Sì — basta modificare gli attributi width e height nel codice iframe generato per adattarlo al tuo layout. Puoi anche aggiungere CSS per renderlo responsive.