Convertitore online gratuito da MERMAID a SVG

Che cos'è il formato MERMAID

Nel contesto delle mappe mentali e dei diagrammi di flusso, un file MERMAID è un file sorgente di testo semplice contenente la sintassi Mermaid, generalmente salvato con l'estensione .mmd o .mermaid. Il sorgente descrive diagrammi di flusso, diagrammi di sequenza, diagrammi delle classi, diagrammi di stato, diagrammi entità-relazione e mappe mentali, invece di memorizzare un'immagine finita.

I file Mermaid vengono creati o modificati in Mermaid Live Editor, Visual Studio Code con un'estensione Mermaid, Obsidian e nei sistemi di documentazione che supportano i blocchi Mermaid. L'apertura del file in un editor di testo mostra dichiarazioni come flowchart TD o mindmap; tali dichiarazioni devono essere renderizzate da un motore compatibile con Mermaid.

Che cos'è il formato SVG

SVG, ovvero Scalable Vector Graphics, è un formato immagine basato su XML che memorizza tracciati, forme e testo. I browser, gli strumenti di documentazione, gli editor vettoriali e molte applicazioni di pubblicazione possono visualizzarlo senza un runtime Mermaid.

Un SVG rimane nitido quando viene ingrandito, in genere si ridimensiona meglio rispetto a uno screenshot raster e può essere stilizzato o modificato in applicazioni come Inkscape. Il file esportato è il diagramma renderizzato, non il sorgente Mermaid originale, quindi modificare in seguito la struttura del diagramma è più semplice partendo dal file .mmd.

Come convertire MERMAID in SVG

Utilizzo di Mermaid CLI

Mermaid CLI è il metodo desktop o da riga di comando più diretto e richiede Node.js. Installa il renderer con:

npm install -g @mermaid-js/mermaid-cli

Salva il sorgente come diagram.mmd, quindi esegui il rendering con:

mmdc -i diagram.mmd -o diagram.svg

L'opzione -i specifica il sorgente Mermaid e -o specifica l'output SVG. Per un diagramma che utilizza un tema personalizzato o un file di configurazione, passalo con:

mmdc -i diagram.mmd -o diagram.svg -c mermaid-config.json

Puoi anche eseguire il rendering direttamente con npx senza un'installazione globale:

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg

Utilizzo di Mermaid Live Editor

Apri il sorgente in Mermaid Live Editor, controlla l'anteprima renderizzata per individuare eventuali errori di sintassi, quindi usa Actions → Export Diagram → SVG o il controllo di esportazione SVG equivalente. Salva il file scaricato con l'estensione .svg. Questo metodo è adatto quando non è possibile installare Node.js, ma dipende dalla versione di Mermaid supportata dall'editor e dalle funzionalità dei diagrammi disponibili.

Utilizzo del convertitore online integrato

Puoi convertire gratuitamente il file su 101convert.com senza installare software: carica il file .mmd o .mermaid, scegli SVG come formato di output, avvia la conversione e scarica il file .svg risultante.

Considerazioni sulla qualità e sulla compatibilità

Gli errori di conversione derivano solitamente da sintassi Mermaid non supportata, dipendenze mancanti del diagramma o indentazione non valida in costrutti come le mappe mentali. Esegui il rendering del sorgente prima dell'esportazione e controlla l'SVG alle dimensioni di visualizzazione previste.

L'output SVG può dipendere dai font disponibili, dal rendering del browser, dalla versione di Mermaid e dalle impostazioni del tema. Se l'aspetto esatto è importante, usa un font comune o converti il testo in tracciati in un editor vettoriale dopo l'esportazione; la conversione del testo in tracciati rende più difficile modificare successivamente il testo.

Alcuni programmi che utilizzano SVG limitano gli stili incorporati, gli script, i collegamenti ipertestuali o gli elementi XML esterni. Per ottenere la massima compatibilità, usa un SVG statico semplice e rimuovi le funzionalità interattive che dipendono da JavaScript. Conserva il file Mermaid originale insieme all'SVG, così il diagramma rimane modificabile a livello strutturale.