Mermaid Editor

Mermaid editor uživo, vizualno i kod na jednom mjestu

Većina mermaid editora daje vam tekstualni okvir i pregled. Ovaj vam daje i platno: kliknite za dodavanje bloka, povucite strelicu, grupirajte stvari u područja — a mermaid kod se sam piše. Prebacite se na karticu koda i uredite ga ručno; platno prati promjene.

  • Prikazuje se dok tipkate

    Pravi mermaid engine, ponovno iscrtan nekoliko stotina milisekundi nakon vaše zadnje tipke.

  • Kod i platno sinkronizirani

    Uredite bilo koju stranu. Druga se sama ažurira — bez kopiranja i lijepljenja između dva alata.

  • 14 oblika čvorova

    Pravokutnik, zaobljeni, pilula, krug, romb, baza podataka, šesterokut i ostalo, jednim klikom.

  • Besplatno i bez registracije

    Bez probnog razdoblja i bez vodenog žiga — editor se otvara odmah. Prijavite se samo ako želite više od jednog dijagrama.

Platno, ne samo tekstualni okvir

Vizualna kartica pravi je editor iznad prikazanog dijagrama: kliknite čvor da ga odaberete, dvaput kliknite da ga preimenujete na mjestu, povucite bilo gdje za pomicanje.

  • Kliknite za izraduDodajte blok, usmjerite strelicu prema drugom, označite strelicu. Nema sintakse za pamćenje prije nego počnete.

  • Odaberite oblikČetrnaest oblika mermaid flowcharta — rombovi odluke, cilindri baze podataka, potprogrami — iz jednog birača.

  • Obojite bilo štoOsam gotovih paleta plus birač boja, primijenjeno na jedan čvor ili na cijelo područje.

Mermaid kod koji ostaje vaš

Tekstualna kartica čisti je mermaid — ista sintaksa koju GitHub, GitLab, Notion i Obsidian već prikazuju. Ništa ovdje nije vlasnički format.

  • Pišite ručnoUpišite mermaid izravno i gledajte kako se prikazuje. Šest gotovih primjera za početak.

  • DvosmjernoFlowcharti koje zalijepite raščlanjuju se natrag na platno — čvorovi, oblici, boje, podgrafovi, sve.

  • Svaka vrsta dijagramaFlowchart, sequence, class, state, ER, gantt, git graph, pie — pregled prikazuje sve što mermaid podržava.

Veliki dijagrami ostaju čitljivi

Arhitekturni dijagrami brzo prerastu jedan ekran. Pomicanje, zumiranje i grupiranje napravljeni su za to, umjesto da se s tim bore.

  • Područja i ugniježđivanjeGrupirajte blokove u podgrafove, ugnijezdite područje unutar drugog, pomaknite cijelo podstablo jednim potezom.

  • Zum od 2% do 1600%Skrolajte za pomicanje, ctrl-skrol za zumiranje, ili se ponovno centrirajte jednim gumbom.

  • Spremljeno u hoduDijagram se tijekom uređivanja automatski sprema u vaš preglednik. Ako se prijavite, sprema se u vaš račun i prati vas na svaki uređaj.

Izvezite i nastavite dalje

Ništa nije zaključano. Uzmite sliku, uzmite izvorni kod, ili uzmite Markdown blok spreman za lijepljenje u dokument.

  • Bez plaćanjaSvaka značajka, uključujući izvoz, besplatna je. Ne postoji plaćeni plan za nadogradnju.

  • Iscrtava se u vašem preglednikuRenderiranje se odvija u vašem pregledniku; bez računa dijagram ga nikad ne napušta, a s računom vas spremljeni dokument prati na svaki uređaj.

  • SVG, PNG, .mmd, .mdKopirajte SVG oznake, preuzmite PNG u 2x, spremite mermaid izvor, ili uzmite Markdown blok u ogradi.

Kako se uspoređuje s uobičajenim opcijama

Alati tipa dijagram-kao-kod tjeraju vas da sve pišete ručno. Alati za povlačenje i ispuštanje daju vam sliku koju ne možete usporediti liniju po liniju. Ovaj odbija odabrati stranu.

Početak rada

IQ Mermaid: Dvaput kliknite platno i pojavi se čvor. Sintaksu možete naučiti kasnije, ili nikad.

Tipičan alat: Prvo pročitajte referencu sintakse, ili prihvatite alat za crtanje bez ikakvog tekstualnog prikaza.

Format izlaza

IQ Mermaid: Čisti mermaid — isti tekst koji GitHub, GitLab i Notion prikazuju izvorno.

Tipičan alat: Vlasnička datoteka koja se otvara samo u alatu koji ju je napravio.

Uređivanje kasnije

IQ Mermaid: Mijenjajte kod ili pomičite blokove. Oba smjera rade na istom dijagramu.

Tipičan alat: Samo jedan smjer: alati usmjereni na kod nemaju platno, alati usmjereni na platno nemaju izvorni kod.

Cijena

IQ Mermaid: Besplatno — čak ni e-pošta nije potrebna.

Tipičan alat: Besplatni plan ograničen na nekoliko dijagrama, s izvozom ili suradnjom iza pretplate.

Gdje se podaci nalaze

IQ Mermaid: U vašem pregledniku ili u vašem računu ako želite da vas prati na svaki uređaj.

Tipičan alat: Račun na tuđem poslužitelju, s vašim dijagramima vezanim uz njega.

Mermaid editor pitanja

Za početak je dovoljno otvoriti stranicu.

Što je mermaid?

Mermaid je tekstualna sintaksa za dijagrame: opisujete čvorove i strelice u nekoliko redaka, a renderer crta sliku. GitHub, GitLab, Notion i Obsidian prikazuju ga unutar Markdowna, pa mermaid blok ostaje čitljiv u pull requestu ili na wiki stranici.

Je li ovaj mermaid editor zaista besplatan?

Da. Sve su značajke, uključujući izvoz u SVG i PNG, besplatne i editor možete koristiti bez da išta stvarate. Neobavezan besplatan račun dodaje više spremljenih dijagrama i sinkronizaciju među uređajima — plaćenog plana nema i ništa nije zadržano.

Moram li znati mermaid sintaksu?

Ne. Počnite na vizualnoj kartici: dvaput kliknite platno za dodavanje bloka, odaberite ga i nacrtajte strelicu prema drugom. Mermaid kod generira se umjesto vas, a možete ga pročitati kad god poželite naučiti sintaksu.

Koje su vrste dijagrama podržane?

Kartica koda prikazuje sve što mermaid podržava — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie i više. Vizualno platno uređuje konkretno flowcharte, što su najčešći dijagrami.

Mogu li izvesti u PNG ili SVG?

Da. Kopirajte SVG oznake u međuspremnik, preuzmite SVG datoteku, ili preuzmite PNG prikazan u 2x za prezentacije i dokumente. Također možete spremiti mermaid izvor kao .mmd ili kao Markdown blok u ogradi.

Gdje se pohranjuje moj dijagram?

Bez računa, vaš jedini dijagram sprema se u preglednik, pa je ondje kad se vratite na istom uređaju. Ako se prijavite, sprema se u vaš račun i može vas pratiti na drugi uređaj. Izvezite izvor ako želite vlastitu kopiju.

Mogu li zalijepiti postojeći mermaid dijagram?

Da. Zalijepite ga u karticu koda; flowchart se raščlanjuje natrag na vizualno platno s netaknutim čvorovima, oblicima, bojama i podgrafovima. Ostale vrste dijagrama prikazuju se u pregledu, ali ostaju samo kao kod.

Radi li offline?

Renderiranje se u potpunosti događa u pregledniku, pa nakon učitavanja uređivač radi i bez veze.

Otvorite editor. Besplatno — bez registracije.

Prazno platno, kartica koda i sve opcije izvoza — besplatno, u vašem pregledniku, odmah.