Mermaid Editor

Mermaid editor online, vizuál a kód na jednom mieste

Väčšina mermaid editorov vám dá textové pole a náhľad. Tento navyše ponúka plátno: kliknite a pridajte blok, potiahnite šípku, zoskupte prvky do oblastí — a mermaid kód sa napíše sám. Prepnite na kartu s kódom a upravte ho ručne; plátno sa prispôsobí.

  • Vykresľuje sa za chodu

    Skutočný mermaid engine, prekreslený pár stoviek milisekúnd po poslednom stlačení klávesy.

  • Kód a plátno synchronizované

    Upravujte ktorúkoľvek stranu. Druhá sa doplní sama — žiadne kopírovanie medzi dvoma nástrojmi.

  • 14 tvarov uzlov

    Obdĺžnik, zaoblený, pilulka, kruh, kosoštvorec, databáza, šesťuholník a ďalšie, jedným kliknutím.

  • Zadarmo a bez registrácie

    Žiadna skúšobná verzia ani vodoznak — editor sa otvorí hneď. Prihláste sa len vtedy, ak chcete viac než jednu schému.

Plátno, nielen textové pole

Vizuálna karta je skutočný editor nad vykresleným diagramom: kliknite na uzol pre výber, dvojklikom ho premenujete priamo na mieste, ťahaním kdekoľvek plátno posuniete.

  • Stavajte klikanímPridajte blok, namierte šípku na iný, popíšte ju. Žiadnu syntax sa nemusíte učiť vopred.

  • Vyberte tvarŠtrnásť tvarov mermaid flowchartu — rozhodovacie kosoštvorce, databázové valce, podprogramy — z jednej ponuky.

  • Vyfarbite čokoľvekOsem prednastavených farieb plus výber vlastnej, aplikovateľné na jeden uzol alebo na celú oblasť.

Mermaid kód, ktorý zostáva váš

Textová karta je čistý mermaid — rovnaká syntax, akú už vedia vykresliť GitHub, GitLab, Notion aj Obsidian. Nič z toho nie je proprietárny formát.

  • Píšte ručneNapíšte mermaid priamo a sledujte, ako sa vykresľuje. Šesť hotových príkladov na začiatok.

  • ObojsmernéVložené flowcharty sa spätne rozparsujú na plátno — uzly, tvary, farby, podgrafy, všetko.

  • Každý typ diagramuFlowchart, sekvenčný, class, state, ER, gantt, git graph, koláčový — náhľad vykreslí čokoľvek, čo mermaid podporuje.

Veľké diagramy zostávajú čitateľné

Architektonické diagramy rýchlo prerastú jednu obrazovku. Posun, zoom a zoskupovanie sú stavané presne na toto, namiesto toho, aby proti tomu bojovali.

  • Oblasti a vnáranieZoskupte bloky do podgrafov, vložte oblasť do inej, presuňte celý podstrom jedným gestom.

  • Zoom od 2 % do 1600 %Kolieskom posúvate, ctrl+koliesko priblíži, alebo vycentrujte jedným tlačidlom.

  • Ukladá sa za choduSchéma sa pri úpravách automaticky ukladá vo vašom prehliadači. Ak sa prihlásite, ukladá sa do účtu a ide s vami na akékoľvek zariadenie.

Exportujte a choďte ďalej

Nič vás tu neviaže. Vezmite si obrázok, zdroj, alebo Markdown blok pripravený na vloženie do dokumentu.

  • Žiadne platenieKaždá funkcia, vrátane exportu, je zadarmo. Neexistuje platený tarif, na ktorý by ste museli prejsť.

  • Vykresľuje sa vo vašom prehliadačiVykresľovanie prebieha vo vašom prehliadači; bez účtu schéma prehliadač nikdy neopustí a s účtom vás uložený dokument sprevádza na akékoľvek zariadenie.

  • SVG, PNG, .mmd, .mdSkopírujte SVG kód, stiahnite PNG v 2x rozlíšení, uložte mermaid zdroj, alebo vezmite Markdown blok v úvodzovkách.

Ako si stojí oproti bežným možnostiam

Nástroje typu diagram-as-code vás nútia písať všetko ručne. Nástroje typu drag-and-drop vám dajú obrázok, ktorý sa nedá diffovať. Tento si odmieta vybrať stranu.

Začiatok práce

IQ Mermaid: Dvojklik na plátno a objaví sa uzol. Syntax sa môžete naučiť neskôr, alebo vôbec.

Typický nástroj: Najprv si prečítajte referenciu syntaxe, alebo prijmite kresliaci nástroj bez akejkoľvek textovej reprezentácie.

Výstupný formát

IQ Mermaid: Čistý mermaid — rovnaký text, aký natívne vykreslí GitHub, GitLab aj Notion.

Typický nástroj: Proprietárny súbor, ktorý sa otvorí len v nástroji, ktorý ho vytvoril.

Neskoršie úpravy

IQ Mermaid: Zmeňte kód, alebo presuňte bloky. Oboje funguje na tom istom diagrame.

Typický nástroj: Len jeden smer: nástroje založené na kóde nemajú plátno, nástroje založené na plátne nemajú zdroj.

Cena

IQ Mermaid: Zadarmo — ani e-mail netreba.

Typický nástroj: Zadarmo len do pár diagramov, export alebo spolupráca sú za predplatné.

Kde žijú dáta

IQ Mermaid: Vo vašom prehliadači alebo v účte, ak chcete, aby vás sprevádzalo na akékoľvek zariadenie.

Typický nástroj: Účet na cudzom serveri, s vašimi diagramami k nemu pripojenými.

Otázky k mermaid editoru

Na začiatok stačí otvoriť stránku.

Čo je mermaid?

Mermaid je textová syntax pre diagramy: popíšete uzly a šípky v pár riadkoch a renderer z toho vykreslí obrázok. GitHub, GitLab, Notion a Obsidian ho vykreslia priamo v Markdowne, takže mermaid blok zostáva čitateľný aj v pull requeste alebo na wiki stránke.

Je tento mermaid editor naozaj zadarmo?

Áno. Všetky funkcie vrátane exportu do SVG a PNG sú zadarmo a editor môžete používať bez toho, aby ste čokoľvek vytvárali. Voliteľný bezplatný účet pridá ďalšie uložené schémy a synchronizáciu medzi zariadeniami — platený plán neexistuje a nič nie je zadržiavané.

Musím poznať syntax mermaid?

Nie. Začnite na vizuálnej karte: dvojklikom na plátno pridáte blok, vyberte ho a nakreslite šípku k ďalšiemu. Mermaid kód sa vygeneruje sám a môžete si ho kedykoľvek prečítať, aby ste sa syntax naučili.

Aké typy diagramov sú podporované?

Kódová karta vykreslí čokoľvek, čo mermaid podporuje — flowchart, sekvenčný, class, state, entity relationship, gantt, git graph, koláčový a ďalšie. Vizuálne plátno upravuje konkrétne flowcharty, čo je väčšina diagramov.

Môžem exportovať do PNG alebo SVG?

Áno. Skopírujte SVG kód do schránky, stiahnite SVG súbor, alebo stiahnite PNG vykreslené v 2x rozlíšení pre prezentácie a dokumenty. Mermaid zdroj môžete uložiť aj ako .mmd alebo ako Markdown blok v úvodzovkách.

Kde sa ukladá môj diagram?

Bez účtu sa vaša jediná schéma ukladá v prehliadači, takže je tam, keď sa vrátite na tom istom zariadení. Ak sa prihlásite, ukladá sa do účtu a môže vás sprevádzať na iné zariadenie. Exportujte zdroj, ak chcete vlastnú kópiu.

Môžem vložiť existujúci mermaid diagram?

Áno. Vložte ho do kódovej karty; flowchart sa spätne rozparsuje na vizuálne plátno so svojimi uzlami, tvarmi, farbami aj podgrafmi. Ostatné typy diagramov sa vykreslia v náhľade, ale zostávajú len ako kód.

Funguje to aj offline?

Vykresľovanie prebieha úplne vo vašom prehliadači, takže po načítaní stránky editor funguje aj bez pripojenia.

Otvorte editor. Zadarmo — bez registrácie.

Prázdne plátno, kódová karta a všetky možnosti exportu — zadarmo, priamo v prehliadači, hneď teraz.