Mermaid Editor

Mermaid editor online, vizuál a kód na jednom místě

Většina mermaid editorů vám dá textové pole a náhled. Tenhle navíc nabízí plátno: klikněte a přidejte blok, přetáhněte šipku, seskupte prvky do oblastí — a mermaid kód se napíše sám. Přepněte na kartu s kódem a upravte ho ručně; plátno se přizpůsobí.

  • Vykresluje se za chodu

    Skutečný mermaid engine, překreslený pár set milisekund po posledním stisku klávesy.

  • Kód a plátno synchronizované

    Upravujte kteroukoli stranu. Druhá se doplní sama — žádné kopírování mezi dvěma nástroji.

  • 14 tvarů uzlů

    Obdélník, zaoblený, pilulka, kruh, kosočtverec, databáze, šestiúhelník a další, jedním kliknutím.

  • Zdarma a bez registrace

    Žádná zkušební verze ani vodoznak — editor se otevře hned. Přihlaste se jen tehdy, chcete-li více než jedno schéma.

Plátno, ne jen textové pole

Vizuální karta je skutečný editor nad vykresleným diagramem: klikněte na uzel pro výběr, dvojklikem ho přejmenujete přímo na místě, tažením kdekoli plátno posunete.

  • Stavte klikánímPřidejte blok, namiřte šipku na jiný, popište ji. Žádnou syntaxi se nemusíte učit předem.

  • Vyberte tvarČtrnáct tvarů mermaid flowchartu — rozhodovací kosočtverce, databázové válce, podprogramy — z jedné nabídky.

  • Obarvěte cokoliOsm přednastavených barev plus výběr vlastní, aplikovatelné na jeden uzel nebo na celou oblast.

Mermaid kód, který zůstává váš

Textová karta je čistý mermaid — stejná syntaxe, kterou už umí vykreslit GitHub, GitLab, Notion i Obsidian. Nic z toho není proprietární formát.

  • Pište ručněNapište mermaid přímo a sledujte, jak se vykresluje. Šest hotových příkladů pro start.

  • ObousměrnéVložené flowcharty se zpětně rozparsují na plátno — uzly, tvary, barvy, podgrafy, všechno.

  • Každý typ diagramuFlowchart, sekvenční, class, state, ER, gantt, git graph, koláčový — náhled vykreslí cokoli, co mermaid podporuje.

Velké diagramy zůstávají čitelné

Architektonické diagramy rychle přerostou jednu obrazovku. Posun, zoom a seskupování jsou stavěné přesně na tohle, místo aby proti tomu bojovaly.

  • Oblasti a vnořováníSeskupte bloky do podgrafů, vložte oblast do jiné, přesuňte celý podstrom jedním gestem.

  • Zoom od 2 % do 1600 %Kolečkem posouváte, ctrl+kolečko přiblíží, nebo vycentrujte jedním tlačítkem.

  • Ukládá se za choduSchéma se při úpravách automaticky ukládá ve vašem prohlížeči. Když se přihlásíte, ukládá se do účtu a jde s vámi na jakékoli zařízení.

Exportujte a jděte dál

Nic vás tu nesvazuje. Vezměte si obrázek, zdroj, nebo Markdown blok připravený ke vložení do dokumentu.

  • Žádné placeníKaždá funkce, včetně exportu, je zdarma. Neexistuje placený tarif, na který byste museli přejít.

  • Vykresluje se ve vašem prohlížečiVykreslování probíhá ve vašem prohlížeči; bez účtu schéma prohlížeč vůbec neopustí a s účtem vás uložený dokument doprovází na jakékoli zařízení.

  • SVG, PNG, .mmd, .mdZkopírujte SVG kód, stáhněte PNG ve 2x rozlišení, uložte mermaid zdroj, nebo vezměte Markdown blok v uvozovkách.

Jak si stojí proti obvyklým možnostem

Nástroje typu diagram-as-code vás nutí psát všechno ručně. Nástroje typu drag-and-drop vám dají obrázek, který nejde diffovat. Tenhle si odmítá vybrat stranu.

Začátek práce

IQ Mermaid: Dvojklik na plátno a objeví se uzel. Syntaxi se můžete naučit později, nebo vůbec.

Typický nástroj: Nejdřív si přečtěte referenci syntaxe, nebo přijměte kreslicí nástroj bez jakékoli textové reprezentace.

Výstupní formát

IQ Mermaid: Čistý mermaid — stejný text, jaký nativně vykreslí GitHub, GitLab i Notion.

Typický nástroj: Proprietární soubor, který se otevře jen v nástroji, který ho vytvořil.

Pozdější úpravy

IQ Mermaid: Změňte kód, nebo přesuňte bloky. Obojí funguje na stejném diagramu.

Typický nástroj: Jen jeden směr: nástroje založené na kódu nemají plátno, nástroje založené na plátně nemají zdroj.

Cena

IQ Mermaid: Zdarma — ani e-mail není potřeba.

Typický nástroj: Zdarma jen do pár diagramů, export nebo spolupráce jsou za předplatné.

Kde žijí data

IQ Mermaid: Ve vašem prohlížeči, nebo v účtu, pokud chcete, aby vás doprovázelo na jakékoli zařízení.

Typický nástroj: Účet na cizím serveru, s vašimi diagramy k němu připojenými.

Otázky k mermaid editoru

Na začátek stačí otevřít stránku.

Co je mermaid?

Mermaid je textová syntaxe pro diagramy: popíšete uzly a šipky v pár řádcích a renderer z toho vykreslí obrázek. GitHub, GitLab, Notion a Obsidian ho vykreslí přímo v Markdownu, takže mermaid blok zůstává čitelný i v pull requestu nebo na wiki stránce.

Je tenhle mermaid editor opravdu zdarma?

Ano. Všechny funkce včetně exportu do SVG a PNG jsou zdarma a editor můžete používat, aniž byste cokoli vytvářeli. Volitelný bezplatný účet přidá další uložená schémata a synchronizaci mezi zařízeními — žádný placený tarif neexistuje a nic není zadržováno.

Musím znát syntaxi mermaid?

Ne. Začněte na vizuální kartě: dvojklikem na plátno přidáte blok, vyberte ho a nakreslete šipku k dalšímu. Mermaid kód se vygeneruje sám a můžete si ho kdykoli přečíst, abyste se syntaxi naučili.

Jaké typy diagramů jsou podporované?

Kódová karta vykreslí cokoli, co mermaid podporuje — flowchart, sekvenční, class, state, entity relationship, gantt, git graph, koláčový a další. Vizuální plátno upravuje konkrétně flowcharty, což je většina diagramů.

Můžu exportovat do PNG nebo SVG?

Ano. Zkopírujte SVG kód do schránky, stáhněte SVG soubor, nebo stáhněte PNG vykreslené ve 2x rozlišení pro prezentace a dokumenty. Mermaid zdroj můžete uložit i jako .mmd nebo jako Markdown blok v uvozovkách.

Kde se ukládá můj diagram?

Bez účtu se vaše jediné schéma ukládá v prohlížeči, takže je tam, když se vrátíte na stejném zařízení. Přihlásíte-li se, ukládá se do účtu a může vás doprovázet na jiné zařízení. Exportujte zdroj, chcete-li vlastní kopii.

Můžu vložit existující mermaid diagram?

Ano. Vložte ho do kódové karty; flowchart se zpětně rozparsuje na vizuální plátno se svými uzly, tvary, barvami i podgrafy. Ostatní typy diagramů se vykreslí v náhledu, ale zůstávají jen jako kód.

Funguje to i offline?

Vykreslování probíhá zcela ve vašem prohlížeči, takže jakmile se stránka načte, editor funguje i bez připojení.

Otevřete editor. Zdarma — bez registrace.

Prázdné plátno, kódová karta a všechny možnosti exportu — zdarma, přímo v prohlížeči, hned teď.