Mermaid Editor

Mermaid live editor, οπτικό και κώδικας σε ένα σημείο

Οι περισσότεροι mermaid editor σού δίνουν ένα πεδίο κειμένου και μια προεπισκόπηση. Αυτός δίνει και καμβά: κάντε κλικ για να προσθέσετε ένα block, σύρετε ένα βέλος, ομαδοποιήστε στοιχεία σε περιοχές — και ο κώδικας mermaid γράφεται μόνος του. Μεταβείτε στην καρτέλα κώδικα και επεξεργαστείτε τον με το χέρι· ο καμβάς ακολουθεί.

  • Σχεδιάζει καθώς πληκτρολογείτε

    Η πραγματική μηχανή mermaid, ξανασχεδιάζει λίγα εκατοστά του δευτερολέπτου μετά το τελευταίο σας πάτημα.

  • Κώδικας και καμβάς σε συγχρονισμό

    Επεξεργαστείτε όποια πλευρά θέλετε. Η άλλη ενημερώνεται αυτόματα — χωρίς αντιγραφή-επικόλληση μεταξύ δύο εργαλείων.

  • 14 σχήματα κόμβων

    Ορθογώνιο, στρογγυλεμένο, χάπι, κύκλος, ρόμβος, βάση δεδομένων, εξάγωνο και άλλα, με ένα κλικ το καθένα.

  • Δωρεάν, χωρίς εγγραφή

    Χωρίς δοκιμή ή υδατόσημο — ο editor ανοίγει αμέσως. Συνδεθείτε μόνο αν θέλετε περισσότερα από ένα διαγράμματα.

Ένας καμβάς, όχι μόνο ένα πεδίο κειμένου

Η οπτική καρτέλα είναι ένας πραγματικός editor πάνω στο διάγραμμα που σχεδιάζεται: κάντε κλικ σε έναν κόμβο για να τον επιλέξετε, διπλό κλικ για να τον μετονομάσετε επιτόπου, σύρετε οπουδήποτε για μετακίνηση της προβολής.

  • Κλικ για να χτίσετεΠροσθέστε ένα block, στοχεύστε ένα βέλος σε άλλο, δώστε ετικέτα στο βέλος. Δεν χρειάζεται να θυμάστε σύνταξη πριν ξεκινήσετε.

  • Επιλέξτε σχήμαΔεκατέσσερα σχήματα flowchart mermaid — ρόμβοι απόφασης, κύλινδροι βάσης δεδομένων, υπορουτίνες — από έναν επιλογέα.

  • Χρωματίστε ό,τι θέλετεΟκτώ προεπιλογές συν επιλογέα χρωμάτων, εφαρμόσιμα σε έναν κόμβο ή σε ολόκληρη περιοχή.

Κώδικας mermaid που παραμένει δικός σας

Η καρτέλα κειμένου είναι απλός mermaid — η ίδια σύνταξη που ήδη σχεδιάζουν GitHub, GitLab, Notion και Obsidian. Τίποτα εδώ δεν είναι ιδιόκτητη μορφή.

  • Γράψτε τον με το χέριΠληκτρολογήστε mermaid απευθείας και δείτε το διάγραμμα να εμφανίζεται. Έξι έτοιμα παραδείγματα για να ξεκινήσετε.

  • Αμφίδρομη ροήΤα flowchart που επικολλάτε αναλύονται πίσω στον καμβά — κόμβοι, σχήματα, χρώματα, subgraph, όλα.

  • Κάθε τύπος διαγράμματοςFlowchart, sequence, class, state, ER, gantt, git graph, pie — η προεπισκόπηση σχεδιάζει ό,τι υποστηρίζει το mermaid.

Τα μεγάλα διαγράμματα παραμένουν ευανάγνωστα

Τα διαγράμματα αρχιτεκτονικής ξεπερνούν γρήγορα μία οθόνη. Η μετακίνηση, το zoom και η ομαδοποίηση είναι φτιαγμένα γι' αυτό, όχι ενάντια σε αυτό.

  • Περιοχές και εμφωλευμένη δομήΟμαδοποιήστε blocks σε subgraph, εμφωλεύστε μια περιοχή μέσα σε άλλη, μετακινήστε ολόκληρο υποδέντρο με μία κίνηση.

  • Zoom από 2% έως 1600%Κύλιση για μετακίνηση, ctrl-κύλιση για zoom, ή επαναφορά κέντρου με ένα κουμπί.

  • Αποθηκεύεται αυτόματαΤο διάγραμμά σας αποθηκεύεται αυτόματα στον browser καθώς επεξεργάζεστε. Αν συνδεθείτε, αποθηκεύεται στον λογαριασμό σας και σας ακολουθεί σε κάθε συσκευή.

Εξαγωγή και συνεχίστε τη δουλειά σας

Τίποτα δεν είναι κλειδωμένο. Πάρτε την εικόνα, πάρτε την πηγή, ή πάρτε ένα block Markdown έτοιμο για επικόλληση σε ένα έγγραφο.

  • Χωρίς πληρωμήΚάθε δυνατότητα, συμπεριλαμβανομένης της εξαγωγής, είναι δωρεάν. Δεν υπάρχει επί πληρωμή πλάνο για αναβάθμιση.

  • Αποδίδεται στο πρόγραμμα περιήγησής σαςΗ απόδοση γίνεται στον browser σας· χωρίς λογαριασμό το διάγραμμα δεν τον εγκαταλείπει ποτέ, και με λογαριασμό το αποθηκευμένο έγγραφο σας ακολουθεί σε κάθε συσκευή.

  • SVG, PNG, .mmd, .mdΑντιγράψτε τον κώδικα SVG, κατεβάστε ένα PNG σε 2x, αποθηκεύστε την πηγή mermaid, ή πάρτε ένα block Markdown.

Πώς συγκρίνεται με τις συνηθισμένες επιλογές

Τα εργαλεία diagram-as-code σάς αναγκάζουν να γράφετε τα πάντα με το χέρι. Τα εργαλεία drag-and-drop σάς δίνουν μια εικόνα που δεν μπορείτε να συγκρίνετε (diff). Αυτό εδώ αρνείται να διαλέξει πλευρά.

Ξεκίνημα

IQ Mermaid: Διπλό κλικ στον καμβά και εμφανίζεται ένας κόμβος. Μπορείτε να μάθετε τη σύνταξη αργότερα, ή ποτέ.

Τυπικό εργαλείο: Διαβάστε πρώτα την αναφορά σύνταξης, ή δεχτείτε ένα εργαλείο σχεδίασης χωρίς καμία αναπαράσταση κειμένου.

Η μορφή εξόδου

IQ Mermaid: Απλός mermaid — το ίδιο κείμενο που σχεδιάζουν φυσικά GitHub, GitLab και Notion.

Τυπικό εργαλείο: Ένα ιδιόκτητο αρχείο που ανοίγει μόνο στο εργαλείο που το δημιούργησε.

Επεξεργασία αργότερα

IQ Mermaid: Αλλάξτε τον κώδικα ή μετακινήστε τα blocks. Και οι δύο κατευθύνσεις λειτουργούν στο ίδιο διάγραμμα.

Τυπικό εργαλείο: Μία μόνο κατεύθυνση: τα εργαλεία code-first δεν έχουν καμβά, τα εργαλεία canvas-first δεν έχουν πηγή.

Τιμή

IQ Mermaid: Δωρεάν — ούτε email δεν χρειάζεται.

Τυπικό εργαλείο: Δωρεάν πλάνο με όριο λίγων διαγραμμάτων, με εξαγωγή ή συνεργασία πίσω από συνδρομή.

Πού βρίσκονται τα δεδομένα

IQ Mermaid: Στον browser σας ή στον λογαριασμό σας, αν θέλετε να σας ακολουθεί σε κάθε συσκευή.

Τυπικό εργαλείο: Ένας λογαριασμός στον server κάποιου άλλου, με τα διαγράμματά σας συνδεδεμένα σε αυτόν.

Ερωτήσεις για τον mermaid editor

Για να ξεκινήσετε, αρκεί να ανοίξετε τη σελίδα.

Τι είναι το mermaid;

Το mermaid είναι μια σύνταξη κειμένου για διαγράμματα: περιγράφετε κόμβους και βέλη σε λίγες γραμμές, και ένας renderer σχεδιάζει την εικόνα. Τα GitHub, GitLab, Notion και Obsidian το σχεδιάζουν μέσα σε Markdown, οπότε ένα block mermaid παραμένει ευανάγνωστο σε ένα pull request ή σε μια σελίδα wiki.

Είναι πραγματικά δωρεάν αυτός ο mermaid editor;

Ναι. Κάθε λειτουργία, μαζί και η εξαγωγή σε SVG και PNG, είναι δωρεάν και μπορείτε να χρησιμοποιείτε τον editor χωρίς να δημιουργήσετε τίποτα. Ένας προαιρετικός δωρεάν λογαριασμός προσθέτει περισσότερα αποθηκευμένα διαγράμματα και συγχρονισμό μεταξύ συσκευών — δεν υπάρχει πληρωμένο σχέδιο και τίποτα δεν κρατείται πίσω.

Χρειάζεται να ξέρω τη σύνταξη mermaid;

Όχι. Ξεκινήστε από την οπτική καρτέλα: διπλό κλικ στον καμβά για να προσθέσετε ένα block, επιλέξτε το και σχεδιάστε ένα βέλος προς άλλο. Ο κώδικας mermaid δημιουργείται αυτόματα και μπορείτε να τον διαβάσετε όποτε θέλετε να μάθετε τη σύνταξη.

Ποιοι τύποι διαγραμμάτων υποστηρίζονται;

Η καρτέλα κώδικα σχεδιάζει ό,τι υποστηρίζει το mermaid — flowchart, sequence, class, state, οντότητες-σχέσεις, gantt, git graph, pie και άλλα. Ο οπτικός καμβάς επεξεργάζεται συγκεκριμένα flowchart, που είναι και ο πιο συνηθισμένος τύπος διαγράμματος.

Μπορώ να κάνω εξαγωγή σε PNG ή SVG;

Ναι. Αντιγράψτε τον κώδικα SVG στο πρόχειρο, κατεβάστε το αρχείο SVG, ή κατεβάστε ένα PNG σχεδιασμένο σε 2x για παρουσιάσεις και έγγραφα. Μπορείτε επίσης να αποθηκεύσετε την πηγή mermaid ως .mmd ή ως block Markdown.

Πού αποθηκεύεται το διάγραμμά μου;

Χωρίς λογαριασμό, το ένα σας διάγραμμα αποθηκεύεται στον browser, οπότε είναι εκεί όταν επιστρέψετε στην ίδια συσκευή. Αν συνδεθείτε, αποθηκεύεται στον λογαριασμό σας και μπορεί να σας ακολουθήσει σε άλλη συσκευή. Εξάγετε την πηγή αν θέλετε δικό σας αντίγραφο.

Μπορώ να επικολλήσω ένα υπάρχον διάγραμμα mermaid;

Ναι. Επικολλήστε το στην καρτέλα κώδικα· ένα flowchart αναλύεται πίσω στον οπτικό καμβά με τους κόμβους, τα σχήματα, τα χρώματα και τα subgraph ανέπαφα. Άλλοι τύποι διαγραμμάτων σχεδιάζονται στην προεπισκόπηση αλλά παραμένουν μόνο κώδικας.

Λειτουργεί χωρίς σύνδεση στο internet;

Η απόδοση γίνεται εξ ολοκλήρου στο πρόγραμμα περιήγησης, οπότε μόλις φορτωθεί η σελίδα ο επεξεργαστής λειτουργεί και χωρίς σύνδεση.

Ανοίξτε τον editor. Δωρεάν — χωρίς εγγραφή.

Ένας κενός καμβάς, μια καρτέλα κώδικα και κάθε επιλογή εξαγωγής — δωρεάν, στον browser σας, τώρα.