Exporta un diagrama mermaid a PNG, SVG o Markdown
Un diagrama només és útil on es pot veure. Mermaid et dona quatre sortides — una imatge, un vector, el codi font, o un bloc Markdown que es renderitza sol — i la correcta depèn totalment d'on va el diagrama. Aquesta és la versió curta, més el que falla amb cadascuna.
Tria primer el format
| Destinació | Fes servir | Per què |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Un bloc Markdown | Es renderitza de manera nativa i es manté comparable amb diff — cap fitxer per mantenir sincronitzat. |
| Diapositives, una especificació, un missatge de xat | PNG | S'enganxa a qualsevol lloc, no necessita cap renderitzador, es veu igual a tot arreu. |
| Un lloc web, un document imprès | SVG | Vectorial — nítid a qualsevol mida, i el text es manté seleccionable. |
| Un altre editor, un repositori | Codi font .mmd | Editable més tard. Una imatge és un carreró sense sortida. |
Si la destinació renderitza mermaid, no exportis res. Un diagrama desat com a text es pot revisar línia per línia; el mateix diagrama desat com a PNG només es pot substituir.
Exporta des d'aquest editor
Obre la pestanya de codi — els botons d'exportació estan a la barra d'eines, i cadascun actua sobre el que hi ha renderitzat en aquell moment.
- Copia SVG — posa el codi
<svg>al porta-retalls, a punt per enganxar directament en un fitxer HTML o una eina de disseny. - Descarrega SVG — desa
diagram.svg. - Descarrega PNG — desa
diagram.png, renderitzat a 2x amb fons blanc perquè es mantingui nítid en una pantalla d'alta densitat i mai no acabi com una taca transparent en una diapositiva blanca. - Descarrega .mmd — desa el codi font mermaid com a fitxer de text pla.
- Descarrega .md (Notion) — desa el codi font envoltat en un bloc ```mermaid amb tanca, que Notion, GitHub i Obsidian renderitzen en enganxar-lo.
Per a una presentació de diapositives, agafa el PNG. Per a qualsevol cosa que es redimensionarà — un títol de document, un pòster, una impressió — agafa el SVG; un PNG ampliat més enllà de la seva mida d'exportació es torna borrós de seguida.
Mantén-lo com a text en lloc d'això
El bloc amb tanca és l'única exportació que es manté editable in situ. Tres cometes invertides, la paraula mermaid, el teu diagrama, tres cometes invertides:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — es renderitza en fitxers README, issues, pull requests i comentaris.
- GitLab — es renderitza a la wiki, els issues i els merge requests.
- Notion — enganxa'l en un bloc de codi i configura el llenguatge a Mermaid.
- Obsidian — es renderitza en la previsualització i en les notes publicades.
- Docusaurus / MkDocs Material / VitePress — els blocs mermaid es renderitzen en la documentació generada.
El que pot sortir malament
El PNG surt borrós
Un PNG té resolució fixa: s'exporta a una mida de píxels determinada i ampliar-lo més enllà interpola. Aquest editor exporta a 2x precisament per això. Si encara no n'hi ha prou, exporta el SVG i converteix-lo a la mida que necessitis — o simplement fes servir el SVG.
El SVG no té fons
Les exportacions SVG són transparents per disseny, així que el text fosc dels nodes desapareix en una diapositiva fosca. O bé posa el SVG sobre una targeta clara, o agafa el PNG, que s'exporta sobre blanc.
Les lletres es veuen diferents en un altre lloc
Un SVG fa referència a famílies de lletra en lloc d'incrustar-les, així que una màquina sense aquesta lletra en substitueix una altra i les caixes de les etiquetes deixen d'alinear-se. Fes servir el PNG quan no puguis controlar les lletres del visor.
El diagrama queda tallat
L'exportació llegeix el que hi ha renderitzat en aquell moment, així que torna a centrar la vista abans d'exportar un diagrama gran. Si l'etiqueta d'un node és enorme, trenca-la amb <br> — mermaid no ajusta les etiquetes tot sol.
Exporta en dos clics
Obre l'editor, enganxa o dibuixa el teu diagrama, i agafa el SVG, el PNG o el codi font. Res no està darrere d'un compte.
Preguntes freqüents
Com converteixo mermaid a PNG?
Renderitza el diagrama, i després fes servir Descarrega PNG. L'editor dibuixa l'SVG renderitzat en un llenç a escala 2x amb fons blanc i desa el resultat — sense passar pel servidor, així que el diagrama mai no surt del teu navegador.
Puc exportar un PNG transparent?
No des del botó de PNG — omple de blanc a propòsit, perquè el text fosc del diagrama sobre un fons transparent és il·legible a la majoria de llocs on s'enganxa un PNG. Exporta el SVG en lloc d'això; és transparent.
Hi ha un límit de mida?
Cap de fix. L'exportació passa al teu navegador, així que el límit pràctic és el que el teu navegador pugui renderitzar — molt més enllà del punt on un diagrama encara és llegible per a un humà.
Com mantinc el diagrama editable després d'exportar-lo?
Conserva el codi font. Descarrega el fitxer .mmd o el bloc Markdown juntament amb la imatge; un PNG o SVG no es pot tornar a convertir en mermaid, però el codi font s'enganxa directament de tornada a l'editor.