Mermaid Editor

Mermaid élő szerkesztő, vizuális és kód egy helyen

A legtöbb mermaid szerkesztő csak egy szövegdobozt és egy előnézetet ad. Ez emellett egy vásznat is: kattints egy blokk hozzáadásához, húzz egy nyilat, csoportosíts elemeket területekbe — a mermaid kód pedig magától megíródik. Válts a kód fülre, és szerkeszd kézzel; a vászon követi.

  • Gépelés közben renderel

    A valódi mermaid motor, néhány száz milliszekundummal az utolsó billentyűleütés után újrarajzolva.

  • Kód és vászon szinkronban

    Szerkeszd bármelyik oldalt. A másik felzárkózik — nincs másolás-beillesztés két eszköz között.

  • 14 csomópont-alak

    Téglalap, lekerekített, pirula, kör, rombusz, adatbázis, hatszög és a többi, egy kattintással.

  • Ingyenes, regisztráció nélkül

    Nincs próbaidő és nincs vízjel — a szerkesztő azonnal megnyílik. Csak akkor jelentkezz be, ha több mint egy diagramot szeretnél.

Vászon, nem csak szövegdoboz

A vizuális fül egy valódi szerkesztő a renderelt diagram tetején: kattints egy csomópontra a kijelöléshez, dupla kattintás az átnevezéshez helyben, húzd bárhová a pásztázáshoz.

  • Kattints és építsAdj hozzá egy blokkot, mutass egy nyíllal egy másikra, címkézd fel a nyilat. Nincs szintaxis, amit meg kell jegyezni indulás előtt.

  • Válassz alakotTizennégy mermaid folyamatábra-alak — döntési rombuszok, adatbázis-hengerek, alfolyamatok — egyetlen választóból.

  • Színezz bármitNyolc előre beállított szín plusz egy színválasztó, alkalmazható egyetlen csomópontra vagy egy egész területre.

Mermaid kód, ami a tiéd marad

A szöveg fül egyszerű mermaid — ugyanaz a szintaxis, amit a GitHub, a GitLab, a Notion és az Obsidian már most is renderel. Semmi itt nincs zárt formátumban.

  • Írd kézzelGépelj mermaid kódot közvetlenül, és nézd, ahogy renderelődik. Hat kész példa, amiből indulhatsz.

  • Oda-vissza konvertálA beillesztett folyamatábrák visszakerülnek a vászonra elemezve — csomópontok, alakok, színek, alcsoportok, minden.

  • Minden diagramtípusFolyamatábra, szekvencia, osztály, állapot, ER, gantt, git gráf, kördiagram — az előnézet mindent renderel, amit a mermaid támogat.

A nagy diagramok is olvashatók maradnak

Az architektúra-diagramok gyorsan kinőnek egy képernyőt. A pásztázás, nagyítás és csoportosítás pontosan erre készült, ahelyett hogy küzdenél vele.

  • Területek és beágyazásCsoportosíts blokkokat alcsoportokba, ágyazz be egy területet egy másikba, mozgass egy teljes részfát egyetlen mozdulattal.

  • Nagyítás 2%-tól 1600%-igGörgess a pásztázáshoz, ctrl+görgetés a nagyításhoz, vagy központosíts újra egy gombbal.

  • Menet közben mentveAz ábra szerkesztés közben automatikusan mentődik a böngésződbe. Ha bejelentkezel, a fiókodba mentődik, és minden eszközön követ.

Exportálj, és menj tovább

Semmi nincs bezárva. Vidd a képet, vidd a forrást, vagy vidd egy Markdown blokkot, ami készen áll egy dokumentumba illesztésre.

  • Nincs fizetőfalMinden funkció, beleértve az exportálást is, ingyenes. Nincs fizetős csomag, amire válthatnál.

  • A böngésződben jelenik megA renderelés a böngésződben történik; fiók nélkül az ábra soha nem hagyja el, fiókkal pedig a mentett dokumentum minden eszközre követ.

  • SVG, PNG, .mmd, .mdMásold ki az SVG kódot, tölts le egy 2x-es PNG-t, mentsd el a mermaid forrást, vagy szerezz egy körbekerített Markdown blokkot.

Hogyan viszonyul a szokásos megoldásokhoz

A diagram-mint-kód eszközök mindent kézzel írat meg veled. A húzd-és-ejtsd eszközök egy képet adnak, amit nem tudsz diffelni. Ez nem választ oldalt.

Első lépések

IQ Mermaid: Dupla kattintás a vászonra, és megjelenik egy csomópont. A szintaxist később is megtanulhatod, vagy soha.

Tipikus eszköz: Előbb olvasd el a szintaxis-referenciát, vagy fogadj el egy rajzolóeszközt, aminek egyáltalán nincs szöveges reprezentációja.

A kimeneti formátum

IQ Mermaid: Egyszerű mermaid — ugyanaz a szöveg, amit a GitHub, a GitLab és a Notion natívan renderel.

Tipikus eszköz: Egy zárt fájl, ami csak abban az eszközben nyílik meg, ami létrehozta.

Későbbi szerkesztés

IQ Mermaid: Változtasd meg a kódot, vagy mozgasd a blokkokat. Mindkét irány működik ugyanazon a diagramon.

Tipikus eszköz: Csak egy irány: a kód-először eszközöknek nincs vásznuk, a vászon-először eszközöknek nincs forrásuk.

Ár

IQ Mermaid: Ingyenes — még e-mail sem kell.

Tipikus eszköz: Ingyenes csomag néhány diagramra korlátozva, az exportálás vagy az együttműködés előfizetés mögött.

Hol él az adat

IQ Mermaid: A böngésződben, vagy a fiókodban, ha azt szeretnéd, hogy minden eszközre kövessen.

Tipikus eszköz: Egy fiók valaki más szerverén, a diagramjaid hozzácsatolva.

Mermaid szerkesztő kérdések

Az induláshoz csak meg kell nyitnod az oldalt.

Mi az a mermaid?

A mermaid egy szöveges szintaxis diagramokhoz: néhány sorban leírod a csomópontokat és a nyilakat, egy renderelő pedig megrajzolja a képet. A GitHub, a GitLab, a Notion és az Obsidian Markdownon belül is megjeleníti, így egy mermaid blokk olvasható marad egy pull requestben vagy egy wiki oldalon.

Tényleg ingyenes ez a mermaid szerkesztő?

Igen. Minden funkció, az SVG- és PNG-export is, ingyenes, és a szerkesztőt anélkül is használhatod, hogy bármit létrehoznál. Egy opcionális ingyenes fiók több mentett diagramot és eszközök közötti szinkronizálást ad — fizetős csomag nincs, és semmit sem tartunk vissza.

Ismernem kell a mermaid szintaxist?

Nem. Kezdd a vizuális fülön: dupla kattintás a vászonra egy blokk hozzáadásához, jelöld ki, és rajzolj egy nyilat egy másikhoz. A mermaid kód automatikusan generálódik, és bármikor elolvashatod, ha meg akarod tanulni a szintaxist.

Mely diagramtípusok támogatottak?

A kód fül bármit renderel, amit a mermaid támogat — folyamatábra, szekvencia, osztály, állapot, entitás-kapcsolat, gantt, git gráf, kördiagram és más. A vizuális vászon kifejezetten folyamatábrákat szerkeszt, ami a legtöbb diagram esetében ez.

Exportálhatok PNG-be vagy SVG-be?

Igen. Másold az SVG kódot a vágólapra, töltsd le az SVG fájlt, vagy töltsd le a 2x-es felbontásban renderelt PNG-t diákhoz és dokumentumokhoz. A mermaid forrást is elmentheted .mmd fájlként vagy körbekerített Markdown blokkként.

Hol tárolódik a diagramom?

Fiók nélkül az egyetlen ábrád a böngészőben tárolódik, így ott van, amikor ugyanazon az eszközön visszatérsz. Ha bejelentkezel, a fiókodba mentődik, és egy másik eszközre is követhet. Exportáld a forrást, ha saját másolatot szeretnél.

Beilleszthetek egy meglévő mermaid diagramot?

Igen. Illeszd be a kód fülbe; egy folyamatábra visszakerül a vizuális vászonra a csomópontjaival, alakjaival, színeivel és alcsoportjaival együtt. A többi diagramtípus megjelenik az előnézetben, de kód-only marad.

Működik offline?

A renderelés teljesen a böngészőben történik, így betöltés után a szerkesztő kapcsolat nélkül is működik.

Nyisd meg a szerkesztőt. Ingyenes — regisztráció nélkül.

Egy üres vászon, egy kód fül és minden exportlehetőség — ingyen, a böngésződben, most azonnal.