Editor Mermaid
Creați diagrame de flux, diagrame de secvență, diagrame Gantt și multe altele din text cu editorul Mermaid. Redați, faceți zoom și exportați în SVG sau PNG în browser.
Ce este Mermaid?
Mermaid este un limbaj open-source de descriere a diagramelor care permite crearea lor din text simplu, asemănător cu Markdown. Descrieți nodurile și conexiunile cu o sintaxă simplă, iar motorul de randare desenează diagrama automat.
Ce tipuri de diagrame sunt suportate?
Editorul include exemple pentru diagrame de flux, secvență, clase, stări, ER, Gantt, circulare, hărți mentale și cronologii. Mermaid 11 suportă multe alte tipuri care pot fi scrise manual.
Cum creez o diagramă?
Alegeți un exemplu din listă sau scrieți codul în editorul din stânga. Previzualizarea se randează din nou la aproximativ 350 ms după oprirea tastării; la erori de sintaxă, un panou roșu arată eroarea exactă, iar diagrama veche rămâne neatinsă.
Codul meu este trimis undeva?
Nu. Totul este randat local în browser cu JavaScript. Codul dumneavoastră nu părăsește niciodată dispozitivul.
Cum export diagrama?
Descarcă SVG oferă un vector scalabil, iar Descarcă PNG o imagine cu rezoluție dublă, cu opțiune de fundal transparent. Copiază codul pune sursa Mermaid în clipboard.
De ce uneori eșuează exportul PNG?
Unele funcționalități Mermaid sunt randate prin foreignObject, pe care browserele pot refuza să le rasterizeze. În acest caz PNG raportează o eroare, dar descărcarea SVG funcționează întotdeauna pentru că nu necesită rasterizare.
Cum funcționează zoom-ul?
Previzualizarea suportă scală de la 0,5x la 2x. Butoanele + și - schimbă cu 10%, Potrivește dimensionează diagrama pe zona de previzualizare, iar 100% restabilește dimensiunea originală.
Pot folosi Mermaid în documentația mea?
Da. GitHub, GitLab și multe instrumente de documentare randează nativ blocurile Mermaid: încercați codul într-un bloc de cod mermaid și va fi desenat automat pe pagină.
Editorul suportă modul întunecat?
Da. Diagrama urmează tema platformei: la trecerea în modul întunecat, este randată din nou automat cu tema dark a Mermaid.
Sfaturi pentru diagrame ușor de citit?
Etichete scurte pentru noduri, o direcție potrivită conținutului (TD vertical sau LR orizontal), împărțirea grafurilor foarte mari în subgrafuri și folosirea exemplelor integrate ca șabloane pentru fiecare tip.
Cum se folosește Editor Mermaid
Mermaid transformă text simplu în diagrame de flux, de secvență, Gantt și altele. Acest editor live randează codul din nou în timp ce scrii, integral în browser — nimic nu pleacă de pe dispozitivul tău.
- Alege un punct de plecare din meniul derulant «Exemplu» — nouă diagrame gata făcute acoperă flux, secvență, clase, stări, ER, Gantt, circular, hartă mentală și cronologie, iar selectarea uneia îi încarcă codul în editor.
- Modifică codul Mermaid în panoul din stânga; previzualizarea din dreapta se randează din nou la o treime de secundă după ce te oprești din scris. Când în panoul roșu apare o eroare de sintaxă, ultima diagramă validă rămâne vizibilă cât corectezi.
- Mărește între 50% și 200% cu butoanele plus și minus, apasă «Potrivește» pentru a scala diagrama în caseta de previzualizare sau «100%» pentru a reveni la mărimea reală.
- Bifează «Fundal transparent» dacă vrei PNG-ul fără fundal alb, apoi apasă «Descarcă SVG» sau «Descarcă PNG» — PNG-ul se exportă la rezoluție dublă și rămâne clar când e inclus în documente.
- Apasă «Copiază codul» pentru a pune sursa Mermaid în clipboard și a o lipi în documentație, wiki-uri sau depozite de cod.
Când o diagramă refuză să se randeze, comentează liniile modificate recent pentru a izola greșeala — mesajul de eroare indică linia vinovată, iar previzualizarea păstrează ultima versiune funcțională până când sintaxa devine din nou corectă.
Instrumente conexe
- Cod în Imagine Convertiți fragmente de cod în imagini partajabile cu evidențiere sintaxă, teme personalizate și decorațiuni fereastră. 100% confidențialitate, totul în browser.
- Previzualizare Markdown Editor Markdown online gratuit cu previzualizare live. Scrieți, randați și exportați Markdown cu suport GFM complet.
- Vizualizator și Editor SVG Previzualizați, editați și optimizați fișiere SVG online. Previzualizare în timp real, editare cod și instrumente de optimizare.
- Vizualizator arbore JSON Vizualizați datele JSON ca arbore interactiv colapsabil. Căutați chei și valori, urmăriți JSONPath la hover și gestionați fișiere mari cu încărcare leneșă. Acceptă drag & drop fișiere .json.
- Verificare Hash Calculați și verificați hash-uri MD5, SHA-1, SHA-256, SHA-512 local
- Calculator Chmod Calculator chmod online gratuit pentru vizualizarea și calcularea permisiunilor fișierelor Linux cu casete de selectare. Conversie instantanee între notația numerică (755, 644) și simbolică (rwxr-xr-x). Suportă permisiuni speciale precum setuid, setgid, sticky bit.
- Tabel ASCII Referință completă de codificare a caracterelor ASCII cu coduri zecimale, hexazecimale, octale, binare, entități HTML și descrieri de caractere. Căutare și filtrare instantanee.
- Vizualizator Hex Vizualizați conținutul fișierelor în format hex dump cu căutare, navigare offset și derulare virtuală