Εξαγωγή ενός διαγράμματος mermaid σε PNG, SVG ή Markdown
Ένα διάγραμμα είναι χρήσιμο μόνο εκεί όπου μπορεί να φανεί. Το mermaid σάς δίνει τέσσερις τρόπους εξόδου — μια εικόνα, ένα διάνυσμα, την πηγή, ή ένα block Markdown που σχεδιάζεται μόνο του — και ο σωστός εξαρτάται εξ ολοκλήρου από το πού πηγαίνει το διάγραμμα. Αυτή είναι η σύντομη εκδοχή, συν τι χαλάει με τον καθέναν.
Επιλέξτε πρώτα τη μορφή
| Προορισμός | Χρήση | Γιατί |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Ένα block Markdown | Σχεδιάζεται φυσικά και παραμένει diffable — κανένα αρχείο να κρατάτε συγχρονισμένο. |
| Παρουσιάσεις, ένα spec, ένα μήνυμα chat | PNG | Επικολλάται παντού, δεν χρειάζεται renderer, φαίνεται ίδιο παντού. |
| Ένας ιστότοπος, ένα τυπωμένο έγγραφο | SVG | Διάνυσμα — ευκρινές σε οποιοδήποτε μέγεθος, και το κείμενο παραμένει επιλέξιμο. |
| Άλλος editor, ένα repo | Πηγή .mmd | Επεξεργάσιμο αργότερα. Μια εικόνα είναι αδιέξοδο. |
Αν ο προορισμός σχεδιάζει mermaid, μην κάνετε καθόλου εξαγωγή. Ένα διάγραμμα που παραμένει κείμενο μπορεί να αναθεωρηθεί γραμμή προς γραμμή· το ίδιο διάγραμμα ως PNG μπορεί μόνο να αντικατασταθεί.
Εξαγωγή από αυτόν τον editor
Ανοίξτε την καρτέλα κώδικα — τα κουμπιά εξαγωγής βρίσκονται στη γραμμή εργαλείων, και το καθένα ενεργεί πάνω σε ό,τι εμφανίζεται εκείνη τη στιγμή.
- Αντιγραφή SVG — βάζει τον κώδικα
<svg>στο πρόχειρο, έτοιμο για επικόλληση απευθείας σε ένα αρχείο HTML ή εργαλείο σχεδίασης. - Λήψη SVG — αποθηκεύει το
diagram.svg. - Λήψη PNG — αποθηκεύει το
diagram.png, σχεδιασμένο σε 2x με λευκό φόντο ώστε να παραμένει ευκρινές σε οθόνη υψηλής πυκνότητας και να μη καταλήγει ποτέ ως διάφανη κηλίδα σε λευκή παρουσίαση. - Λήψη .mmd — αποθηκεύει την πηγή mermaid ως απλό αρχείο κειμένου.
- Λήψη .md (Notion) — αποθηκεύει την πηγή τυλιγμένη σε ένα περιφραγμένο block ```mermaid, το οποίο Notion, GitHub και Obsidian σχεδιάζουν κατά την επικόλληση.
Για μια παρουσίαση, πάρτε το PNG. Για οτιδήποτε θα αλλάξει μέγεθος — τίτλο εγγράφου, αφίσα, εκτύπωση — πάρτε το SVG· ένα PNG μεγεθυμένο πέρα από το μέγεθος εξαγωγής του θολώνει αμέσως.
Κρατήστε το ως κείμενο αντ' αυτού
Το περιφραγμένο block είναι η μόνη εξαγωγή που παραμένει επεξεργάσιμη επιτόπου. Τρεις backticks, η λέξη mermaid, το διάγραμμά σας, τρεις backticks:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — σχεδιάζεται σε αρχεία README, issues, pull requests και σχόλια.
- GitLab — σχεδιάζεται στο wiki, σε issues και merge requests.
- Notion — επικολλήστε σε code block και ορίστε τη γλώσσα σε Mermaid.
- Obsidian — σχεδιάζεται στην προεπισκόπηση και σε δημοσιευμένες σημειώσεις.
- Docusaurus / MkDocs Material / VitePress — τα mermaid blocks σχεδιάζονται στην τελική τεκμηρίωση.
Τι πάει στραβά
Το PNG είναι θολό
Ένα PNG έχει σταθερή ανάλυση: εξάγεται σε συγκεκριμένο μέγεθος pixel και η μεγέθυνση πέρα από αυτό γίνεται με παρεμβολή. Γι' αυτό αυτός ο editor κάνει εξαγωγή σε 2x. Αν και πάλι δεν αρκεί, κάντε εξαγωγή του SVG και μετατρέψτε το στο μέγεθος που χρειάζεστε — ή απλώς χρησιμοποιήστε το SVG.
Το SVG δεν έχει φόντο
Οι εξαγωγές SVG είναι διάφανες εξ ορισμού, οπότε το σκούρο κείμενο κόμβου εξαφανίζεται σε σκούρα παρουσίαση. Είτε βάλτε το SVG πάνω σε ανοιχτόχρωμη κάρτα, είτε πάρτε το PNG, που εξάγεται σε λευκό φόντο.
Οι γραμματοσειρές φαίνονται διαφορετικές αλλού
Ένα SVG αναφέρεται σε οικογένειες γραμματοσειρών αντί να τις ενσωματώνει, οπότε ένας υπολογιστής χωρίς αυτή τη γραμματοσειρά αντικαθιστά μια άλλη και τα πλαίσια ετικετών σταματούν να ευθυγραμμίζονται. Χρησιμοποιήστε το PNG όταν δεν μπορείτε να ελέγξετε τις γραμματοσειρές του θεατή.
Το διάγραμμα είναι κομμένο
Η εξαγωγή διαβάζει ό,τι εμφανίζεται εκείνη τη στιγμή, οπότε επαναφέρετε το κέντρο της προβολής πριν κάνετε εξαγωγή ενός μεγάλου διαγράμματος. Αν μια ετικέτα κόμβου είναι τεράστια, σπάστε τη με <br> — το mermaid δεν αναδιπλώνει μόνο του τις ετικέτες.
Εξαγωγή σε δύο κλικ
Ανοίξτε τον editor, επικολλήστε ή σχεδιάστε το διάγραμμά σας, και πάρτε το SVG, το PNG ή την πηγή. Τίποτα δεν είναι πίσω από λογαριασμό.
Συχνές ερωτήσεις
Πώς μετατρέπω mermaid σε PNG;
Σχεδιάστε το διάγραμμα, μετά χρησιμοποιήστε το Λήψη PNG. Ο editor σχεδιάζει το SVG σε καμβά σε κλίμακα 2x με λευκό φόντο και αποθηκεύει το αποτέλεσμα — χωρίς μετάβαση σε server, οπότε το διάγραμμα δεν φεύγει ποτέ από τον browser σας.
Μπορώ να κάνω εξαγωγή διάφανου PNG;
Όχι από το κουμπί PNG — γεμίζει σκόπιμα λευκό, γιατί σκούρο κείμενο διαγράμματος πάνω σε διάφανο φόντο είναι δυσανάγνωστο στα περισσότερα μέρη όπου επικολλάται ένα PNG. Κάντε αντ' αυτού εξαγωγή του SVG· είναι διάφανο.
Υπάρχει όριο μεγέθους;
Κανένα σταθερό. Η εξαγωγή γίνεται στον browser σας, οπότε το πρακτικό όριο είναι όσο μπορεί να σχεδιάσει ο browser σας — που είναι πολύ πέρα από το σημείο όπου ένα διάγραμμα παραμένει ευανάγνωστο για έναν άνθρωπο.
Πώς κρατάω το διάγραμμα επεξεργάσιμο μετά την εξαγωγή;
Κρατήστε την πηγή. Κατεβάστε το αρχείο .mmd ή το block Markdown μαζί με την εικόνα· ένα PNG ή SVG δεν μπορεί να μετατραπεί ξανά σε mermaid, αλλά η πηγή επικολλάται κατευθείαν πίσω στον editor.