Guide in italiano

Anteprima dei diagrammi Mermaid in VS Code

VS Code non ha un’anteprima Mermaid propria. Installa Mermaid Viewer, che è gratuito, apri un file .mmd o .mermaid e fai clic sull’icona di anteprima in alto a destra nell’editor. Il diagramma segue quello che scrivi, e su un file Markdown l’anteprima elenca tutti i blocchi mermaid. Mermaid 12.3.0 è incluso nell’estensione, quindi l’anteprima e l’export PNG o SVG sono gratis e funzionano offline, senza login. Zovo Pro (19 USD, una volta sola) aggiunge l’export PDF, l’export di tutti i diagrammi del workspace e l’export al salvataggio, e ognuno si può provare gratis 3 volte.

Gratis, licenza MIT. ID dell’estensione zovo.mermaid-viewer, versione 0.3.3.

Questa guida è anche in English · Deutsch · Español · Français · 日本語 · Polski · Português (Brasil) · 简体中文

Passaggi in VS Code

1. Installa Mermaid Viewer dal Marketplace, oppure premi Ctrl+P (Cmd+P su macOS) ed esegui ext install zovo.mermaid-viewer.
2. Apri un file .mmd o .mermaid e fai clic sull’icona di anteprima nella barra del titolo dell’editor, oppure premi Ctrl+K V (Cmd+K V su macOS). Puoi anche eseguire "Mermaid Viewer: Open Diagram Editor (Text + Live Preview)" dalla Command Palette.
3. Per un file Markdown con blocchi ```mermaid, fai clic sulla stessa icona di anteprima. L’anteprima elenca tutti i diagrammi, ognuno con la propria riga di errore e i propri pulsanti di export.
4. Fai clic su "Edit diagram" sopra un blocco nel file Markdown per modificarlo accanto a un’anteprima live. Quando salvi, il testo torna nel suo blocco.
5. Usa la rotella per lo zoom sul puntatore e trascina per spostarti. Fit e 100% sono nella barra degli strumenti.
6. Fai clic su Export per Save PNG (1x, 2x o 4x, oppure una larghezza o un’altezza esatta), Save SVG, Copy PNG o Copy SVG code.

Cosa è gratis e cosa aggiunge Zovo Pro

L’anteprima live, l’editor di diagrammi, Edit diagram per i blocchi Markdown, il completamento, le sottolineature degli errori, i 15 modelli, la vista Mermaid Diagrams e l’export e la copia in PNG e SVG sono gratis. Non ci sono account, login né AI.

Export All Diagrams in Workspace scrive tutti i diagrammi di tutti i file .mmd, .mermaid e Markdown della cartella in SVG, PNG o entrambi, dentro mermaid-export/ con la stessa struttura di cartelle dei sorgenti. I diagrammi che non si possono disegnare vengono elencati alla fine. Quando la documentazione cambia, non devi aprire ed esportare ogni diagramma a mano.

Usare Export All Diagrams in Workspace (Zovo Pro)

7. Apri la cartella in VS Code. Esegui "Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)" dalla Command Palette, oppure fai clic su "Export All Diagrams in Workspace" nella riga "Pro tools" sotto la barra dell’anteprima.
8. Scegli SVG, PNG oppure SVG e PNG.
9. Lascia la cartella predefinita mermaid-export (impostazione mermaidViewer.exportFolder) o scegli "Choose a folder…". Una prova viene contata solo quando i file sono stati scritti. Se premi Esc non la consumi.

Export All Diagrams in Workspace funziona 3 volte sul tuo computer prima di chiedere una licenza. Non ci sono finestre a comparsa né conti alla rovescia.

Zovo Pro costa 19 USD, una volta sola. Non è un abbonamento, e la licenza attiva gli strumenti Pro in tutte le estensioni Zovo, non solo in Mermaid Viewer. Dopo il pagamento con carta (Stripe), la chiave di licenza compare nella pagina successiva. In VS Code esegui "Zovo Pro: Enter Zovo Pro license key" dalla Command Palette e incolla la chiave. La chiave viene controllata sul tuo computer, senza connessione di rete. Con GitHub Sponsors scegli il livello "$19 one time", poi esegui "Zovo Pro: I already paid: unlock with GitHub Sponsors".

Un team di 5 persone paga 59 USD una volta sola (con carta). Tutte le regole e tutti gli strumenti Pro sono nella pagina di Zovo Pro (in inglese).

Passaggi in Cursor, Windsurf o VSCodium

1. Apri la vista Extensions con Ctrl+Maiusc+X (Cmd+Maiusc+X su macOS).
2. Cerca zovo.mermaid-viewer e fai clic su Install. Cursor, Windsurf e VSCodium installano le estensioni da Open VSX, dove questa si chiama zovo/mermaid-viewer.
3. Se il tuo editor non ha una galleria, scarica il file .vsix dalla pagina di Open VSX ed esegui "Extensions: Install from VSIX...".
4. Da lì in poi funziona tutto come in VS Code.

Cosa fa Mermaid Viewer

• Flowchart, sequence, class, state, ER, Gantt, pie, gitGraph, mindmap, timeline, sankey, XY chart, block, C4, architecture e gli altri tipi che Mermaid 12.3.0 conosce.
• Errori sottolineati sulla loro riga ed elencati nel pannello Problems. L’ultimo diagramma valido resta a schermo, e un blocco con errori in un file Markdown non nasconde gli altri.
• Zoom dall’1% al 3.200% sul puntatore, con spostamento e pinch sul trackpad.
• Export SVG con etichette in testo semplice per le wiki di Azure DevOps e GitHub.
• Sfondo nel colore dell’editor, bianco, trasparente o personalizzato, usato anche negli export.

Cosa non fa

• Non aggiunge i diagrammi all’anteprima Markdown di VS Code. Apre un proprio pannello di anteprima.
• Le formule nelle etichette ($$...$$) possono essere visualizzate male, perché i font KaTeX non sono inclusi.
• I pacchetti di icone che Mermaid carica da internet non vengono caricati. Le icone integrate funzionano.
• I diagrammi oltre 500.000 caratteri o 2.000 collegamenti non vengono disegnati finché non alzi il limite (impostazioni mermaidViewer.maxTextSize e mermaidViewer.maxEdges).
• Un disegno che richiede più di 10 secondi viene interrotto (impostazione mermaidViewer.renderTimeoutSeconds).

Domande frequenti

Per saperne di più

La guida in inglese ha più dettagli e altre opzioni. Ogni funzione e impostazione è descritta nella pagina di Mermaid Viewer (in inglese).

Dati verificati il 12 novembre 2026 sulla versione attuale del Marketplace.