Επεξεργαστής Διαγραμμάτων Mermaid δωρεάν
Γράψτε διαγράμματα ροής, διαγράμματα ακολουθίας, γραφήματα Gantt και άλλα σε σύνταξη Mermaid με ζωντανή προεπισκόπηση. Εξαγωγή ως SVG ή PNG. Εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας.
Σύρετε ή κάντε κύλιση για μετακίνηση. Τσιμπήστε ή Ctrl + κύλιση για ζουμ. Σύρετε το κάτω άκρο για να μεγαλώσει η προεπισκόπηση.
💡 Γράψτε διαγράμματα σε σύνταξη Mermaid — διαγράμματα ροής, ακολουθίας, Gantt, κλάσεων και άλλα — και κάντε εξαγωγή σε SVG ή PNG. Όλα εκτελούνται στο πρόγραμμα περιήγησής σας: το κείμενο του διαγράμματός σας δεν ανεβαίνει ποτέ και η μηχανή απόδοσης Mermaid παρέχεται από αυτόν τον ιστότοπο και όχι από εξωτερικό CDN.
Συνηθισμένες χρήσεις
- Δημιουργία διαγράμματος ροήςΔημιουργήστε ένα διάγραμμα ροής από κείμενο και εξάγετε το ως εικόνα.
- Σχεδίαση διαγράμματος ακολουθίαςΔιάγραμμα πώς αλληλεπιδρούν τα συστήματα ή οι άνθρωποι με την πάροδο του χρόνου.
- Προσθήκη διαγράμματος σε READMEΔημιουργήστε διαγράμματα που το GitHub αποδίδει εγγενώς στο README σας.
- Δημιουργία διαγράμματος GanttΠαρουσιάστε μια χρονοδιάγραμμα έργου ως διάγραμμα Gantt από κείμενο.
- Δημιουργία διαγράμματος κατηγορίαςΔιάγραμμα κατηγοριών και των σχέσεών τους για το σχεδιασμό λογισμικού.
Πώς λειτουργεί
Το Mermaid σας επιτρέπει να γράψετε διαγράμματα ως κείμενο και να τα έχετε αποδειχθεί αυτόματα — υπέροχο για να κρατήσετε διαγράμματα σε έλεγχο έκδοσης. Αυτό είναι ένας ζωντανός επεξεργαστής που αποδίδει καθώς πληκτρολογείτε.
- 1Φορτώνει ο κινητήρας MermaidΗ βιβλιοθήκη Mermaid φορτώνεται από τη LibraTool την πρώτη φορά που χρησιμοποιείτε το εργαλείο και μετά την αποθηκεύει προσωρινά το πρόγραμμα περιήγησης.
- 2Γράφετε κώδικα διαγράμματοςFlowcharts, διαγράμματα ακολουθίας, Gantt charts, διαγράμματα κλάσης, pie charts και άλλα — χρησιμοποιώντας τη σύνταξη κειμένου του Mermaid.
- 3Αποδίδεται ζωντανάΟ κώδικας σας αναλύεται και αποδίδεται σε ένα SVG στο πρόγραμμα περιήγησής σας καθώς πληκτρολογείτε, με θέματα φωτός και σκότους.
- 4Εξαγωγή SVG ή PNGΛαμβάνετε το διάγραμμα ως κλιμακωτό SVG ή 2× PNG για να ρίξετε σε docs, slides ή README.
Ο κώδικας διαγράμματος — που μπορεί να περιγράφει εσωτερικά συστήματα — αποδίδεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας και ποτέ δεν ανεβαίνει.
Σχετικά εργαλεία
Επεξεργαστής Markdown
Γράψτε και προεπισκοπήστε Markdown σε πραγματικό χρόνο. Υποστηρίζει επικεφαλίδες, έντονη γραφή, πλάγια γραφή, μπλοκ κώδικα, πίνακες και λίστες.
Γεννήτρια CSS Grid
Σχεδιάστε οπτικά ένα CSS grid — tracks, units και gaps — και αντιγράψτε το generated CSS και HTML.
Γεννήτρια Δέντρου ASCII
Μετατρέψτε μια λίστα με εσοχές σε καθαρό δέντρο φακέλων (├── └──) για README και έγγραφα. Έξοδος Unicode ή ASCII. Εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας.