Mermaid Editor

Editor mermaid online, vizual și cod în același loc

Majoritatea editoarelor mermaid îți dau doar o casetă de text și o previzualizare. Acesta îți dă și o pânză: dai click pentru a adăuga un bloc, tragi o săgeată, grupezi elemente în zone — iar codul mermaid se scrie singur. Treci la fila de cod și editează-l manual; pânza urmează.

  • Se randează pe măsură ce scrii

    Motorul mermaid real, redesenat la câteva sute de milisecunde după ultima apăsare de tastă.

  • Cod și pânză sincronizate

    Editezi oricare parte. Cealaltă se actualizează — fără copy-paste între două unelte.

  • 14 forme de noduri

    Dreptunghi, rotunjit, pilulă, cerc, romb, bază de date, hexagon și restul, la un click distanță.

  • Gratuit, fără cont

    Fără perioadă de probă sau filigran — editorul se deschide imediat. Autentifică-te doar dacă vrei mai multe diagrame.

O pânză, nu doar o casetă de text

Fila vizuală este un editor real peste diagrama randată: dai click pe un nod pentru a-l selecta, dublu-click pentru a-l redenumi pe loc, tragi oriunde pentru a naviga.

  • Construiești cu click-uriAdaugi un bloc, îndrepți o săgeată spre altul, o etichetezi. Fără sintaxă de memorat înainte să începi.

  • Alegi o formăPaisprezece forme de flowchart mermaid — romburi de decizie, cilindri de bază de date, subrutine — dintr-un singur selector.

  • Colorezi oriceOpt presetări plus un selector de culoare, aplicabile unui singur nod sau unei zone întregi.

Cod mermaid care rămâne al tău

Fila de text este mermaid simplu — aceeași sintaxă pe care GitHub, GitLab, Notion și Obsidian o randează deja. Nimic aici nu e un format proprietar.

  • Îl scrii manualTastezi mermaid direct și urmărești cum se randează. Șase exemple gata făcute de la care poți porni.

  • Se convertesc înapoiFlowchart-urile lipite sunt reinterpretate pe pânză — noduri, forme, culori, subgrafuri, totul.

  • Orice tip de diagramăFlowchart, secvență, clase, stare, ER, gantt, git graph, plăcintă — previzualizarea randează orice suportă mermaid.

Diagramele mari rămân lizibile

Diagramele de arhitectură depășesc rapid un ecran. Navigarea, zoom-ul și gruparea sunt construite pentru asta, nu ca să lupți cu ea.

  • Zone și imbricareGrupezi blocuri în subgrafuri, imbrichezi o zonă în alta, muți un subarbore întreg dintr-un singur gest.

  • Zoom de la 2% la 1600%Derulezi pentru a naviga, ctrl-derulezi pentru zoom, sau recentrezi cu un buton.

  • Salvat pe măsură ce lucreziDiagrama se salvează automat în browser în timp ce editezi. Dacă te autentifici, se salvează în contul tău și te urmează pe orice dispozitiv.

Exporți și mergi mai departe

Nimic nu te leagă. Iei imaginea, iei sursa, sau iei un bloc Markdown gata de lipit într-un document.

  • Fără platăFiecare funcție, inclusiv exportul, e gratuită. Nu există un nivel plătit la care să treci.

  • Se randează în browserul tăuRandarea are loc în browserul tău; fără cont diagrama nu îl părăsește niciodată, iar cu cont documentul salvat te urmează pe orice dispozitiv.

  • SVG, PNG, .mmd, .mdCopiezi codul SVG, descarci un PNG 2x, salvezi sursa mermaid sau iei un bloc Markdown.

Cum se compară cu opțiunile obișnuite

Uneltele diagram-as-code te obligă să scrii totul manual. Uneltele drag-and-drop îți dau o imagine pe care nu o poți compara. Acesta refuză să aleagă o tabără.

Primii pași

IQ Mermaid: Dai dublu-click pe pânză și apare un nod. Poți învăța sintaxa mai târziu, sau niciodată.

Unealtă tipică: Citești mai întâi referința de sintaxă, sau accepți o unealtă de desen fără nicio reprezentare text.

Formatul de ieșire

IQ Mermaid: Mermaid simplu — același text pe care GitHub, GitLab și Notion îl randează nativ.

Unealtă tipică: Un fișier proprietar care se deschide doar în unealta care l-a creat.

Editare ulterioară

IQ Mermaid: Schimbi codul sau muți blocurile. Ambele direcții funcționează pe aceeași diagramă.

Unealtă tipică: O singură direcție: uneltele code-first nu au pânză, cele canvas-first nu au sursă.

Preț

IQ Mermaid: Gratuit — nici măcar un e-mail.

Unealtă tipică: Nivel gratuit limitat la câteva diagrame, cu export sau colaborare în spatele unui abonament.

Unde locuiesc datele

IQ Mermaid: În browserul tău sau în contul tău, dacă vrei să te urmeze pe orice dispozitiv.

Unealtă tipică: Un cont pe serverul cuiva, cu diagramele tale atașate de el.

Întrebări despre editorul mermaid

Ca să începi, e suficient să deschizi pagina.

Ce este mermaid?

Mermaid este o sintaxă text pentru diagrame: descrii noduri și săgeți în câteva linii, iar un motor de randare desenează imaginea. GitHub, GitLab, Notion și Obsidian îl randează în interiorul Markdown, așa că un bloc mermaid rămâne lizibil într-un pull request sau într-o pagină de wiki.

Este acest editor mermaid online chiar gratuit?

Da. Toate funcțiile, inclusiv exportul în SVG și PNG, sunt gratuite și poți folosi editorul fără să creezi nimic. Un cont gratuit opțional adaugă mai multe diagrame salvate și sincronizare între dispozitive — nu există plan cu plată și nimic nu este reținut.

Trebuie să cunosc sintaxa mermaid?

Nu. Începi în fila vizuală: dai dublu-click pe pânză pentru a adăuga un bloc, îl selectezi și tragi o săgeată către altul. Codul mermaid este generat automat și îl poți citi oricând vrei să înveți sintaxa.

Ce tipuri de diagrame sunt suportate?

Fila de cod randează orice suportă mermaid — flowchart, secvență, clase, stare, entitate-relație, gantt, git graph, plăcintă și altele. Pânza vizuală editează în mod specific flowchart-uri, care reprezintă majoritatea diagramelor.

Pot exporta în PNG sau SVG?

Da. Copiezi codul SVG în clipboard, descarci fișierul SVG, sau descarci un PNG randat la 2x pentru prezentări și documente. Poți salva și sursa mermaid ca .mmd sau ca bloc Markdown.

Unde este stocată diagrama mea?

Fără cont, singura ta diagramă este salvată în browser, deci e acolo când revii pe același dispozitiv. Dacă te autentifici, este salvată în contul tău și poate să te urmeze pe alt dispozitiv. Exportă sursa dacă vrei o copie a ta.

Pot lipi o diagramă mermaid existentă?

Da. O lipești în fila de cod; un flowchart este reinterpretat pe pânza vizuală cu nodurile, formele, culorile și subgrafurile intacte. Alte tipuri de diagrame se randează în previzualizare, dar rămân doar cod.

Funcționează offline?

Randarea are loc în întregime în browser, așa că după încărcarea paginii editorul funcționează și fără conexiune.

Deschide editorul. Gratuit — fără cont.

O pânză goală, o filă de cod și toate opțiunile de export — gratuit, în browser, chiar acum.