Bezplatný editor Mermaid diagramů, který kreslí z obyčejného textu

Nejrychlejší způsob, jak proměnit popis v diagram? Bezplatný editor Mermaid diagramů v prohlížeči, který za vás napíše Mermaid kód, spustí AI rovnou na vašem počítači a vaše data nikam neodešle. Postavili jsme ho přes víkend jako experiment s novou AI zabudovanou v Chromu. Běží, je zdarma a tohle je upřímný příběh o tom, jak se z malé otravnosti stal funkční nástroj. Berte ho jako experiment, ne jako hotový produkt.

Začalo to jako většina našich interních nástrojů. Zkoušeli jsme nový model a procesy si u toho pořád kreslili jako Mermaid diagramy. Jenže nebylo kde si je při práci v klidu prohlížet. Tak jsme jedno odpoledne spíchli živý náhled. Zabralo to zhruba tak dlouho jako jedno kafe.

Pak přišla další otravnost. A ta už byla zajímavá.

Hlavní body

• Bezplatný editor Mermaid diagramů se vykresluje rovnou při psaní, exportuje PNG i SVG připravené k použití a diagram sdílíte jedním odkazem.
• Diagram můžete popsat běžnou řečí a Mermaid kód za vás napíše AI zabudovaná v Chromu, bez API klíče a bez poplatků za používání.
• AI běží celá na vašem zařízení. Vaše diagramy ani text nikdy neopustí prohlížeč.
• AI je experimentální a funguje jen v novějších prohlížečích na bázi Chromia (Chrome 138 a výš) na výkonnějších počítačích.
• Celý nástroj běží na straně prohlížeče. Provoz nás tak nestojí nic a není tu žádný server, který by vaše data mohl vyzradit.
• Je to experiment s AI zabudovanou v Chromu, ne produkt s podporou. Žádné SLA, žádný plán dalšího vývoje.

Otravnost, ze které vznikl nástroj

Mermaid je malý textový jazyk, který z řádků jako `A --> B` udělá vývojové diagramy, sekvenční diagramy a další. Když ho umíte, je skvělý. Háček je v tom, že ho musíte umět.

Sednete si, chcete popsat proces objednávky, přesně víte, co potřebujete, a pak se zaseknete na tom, jestli je to `-->` nebo `->>` a jak vlastně označit rozhodovací blok. Tu syntaxi člověk snadno zapomene, když se k ní dostane jednou za měsíc.

Nabízelo se nechat lidi popsat diagram běžnou řečí a Mermaid za ně napsat pomocí AI. Míň samozřejmá byla podmínka, kterou jsme si dali: chtěli jsme to mít opravdu zadarmo, bez faktury za API na naší straně a bez odesílání čehokoli na cizí server. Právě ta podmínka dělala celý projekt zajímavým. A taky je důvod, proč to žije jako veřejný bezplatný nástroj, ne jako kus kódu schovaný v repu.

Nechcete příběh a chcete si to rovnou vyzkoušet? Editor Mermaid diagramů najdete tady, zdarma a bez registrace.

Co editor Mermaid diagramů doopravdy umí

Editor má dva panely. Vlevo zdrojový Mermaid kód, vpravo vykreslený diagram, který se mění, jak píšete. Pár věcí dělá z editoru místo, kde se dá v klidu pracovat:

• Živý náhled s klidným chováním při chybě. Když se vám syntaxe rozbije uprostřed psaní, náhled nezbělá. Nechá na obrazovce poslední funkční diagram a chybu nenápadně ukáže pod ním. Nikdy tak nezíráte do prázdna a nehádáte, co jste zrovna pokazili.
• Připravené šablony pro vývojový, sekvenční, třídní, ER a Ganttův diagram, takže nikdy nezačínáte od prázdného editoru.
• Posouvání a přibližování s funkcí přizpůsobit zobrazení, aby se i široký Ganttův diagram vešel čitelně, ne jako malá tečka.
• Motivy. Šest přednastavených a k tomu vlastní motiv, kde si vyberete přechod pozadí i barvy bloků, akcentu a textu. Vaše motivy se ukládají přímo v prohlížeči.
• Export, který vypadá hotově. PNG a SVG se exportují s pozadím motivu, okrajem a jemným stínem, takže diagram rovnou vložíte do prezentace nebo dokumentu. Ne holý graf na průhledném bílém pozadí.
• Sdílení odkazem. Celý diagram i s motivem se zakóduje do adresy. Pošlete odkaz a druhá strana vidí přesně váš diagram, aniž by se cokoli ukládalo na server.
• Automatické ukládání. Stránku načtete znovu a vaše práce tam pořád je.

Když jsme poprvé zapojili export s motivy, zkouška byla prostá. Vložit zamotaný diagram s náhradním dodavatelem, vybrat motiv Oceán a dát stáhnout PNG. Výsledek vypadal jako něco, co byste vážně poslali vedení do reportu. Na víkendový experiment slušný výsledek.

To zajímavé: bezplatná a soukromá AI v prohlížeči

Tady je funkce, ze které máme největší radost. Napíšete třeba „proces objednávky s kontrolou skladu a náhradním dodavatelem", zmáčknete vygenerovat a objeví se diagram. Žádný API klíč. Žádná faktura za tokeny. Nic se nenahrává.

Funguje to díky opravdu nové schopnosti prohlížeče. Chrome dnes obsahuje malý jazykový model Gemini Nano a zpřístupňuje ho webovým stránkám přes takzvané Prompt API. Podle dokumentace Chrome Prompt API je to pro weby k dispozici od Chromu 138. Model běží na zařízení samotného uživatele.

U bezplatného veřejného nástroje je právě tohle, běh přímo na zařízení, úplně zásadní:

• Nestojí nás to nic na provoz. Žádný server na inferenci, žádná faktura za API, žádné limity, které by ve špičce zlobily.
• Vaše data zůstávají u vás. Text, který napíšete, ani diagram, který dostanete zpět, se nedotknou sítě. Pro každého, kdo si kreslí interní systémy nebo citlivé procesy, je to zásadní.
• Když to nejde, nic se nerozbije. Pole vygenerovat se ukáže jen tehdy, když prohlížeč model opravdu má a hlásí ho jako použitelný. Ostatní prostě vidí normální editor. Takhle se má nová funkce prohlížeče nasazovat: jako bonus pro ty, kdo ji můžou využít, nikdy jako zeď pro ty, kdo nemůžou.

Tenhle praktický pohled na AI nosíme i do práce pro klienty. Mnohem víc nás zajímají AI agenti, kteří tiše zautomatizují skutečné úkoly, než AI jako titulek. Model, který lokálně a zdarma napíše kód diagramu, je malý a hodně konkrétní příklad přesně tohohle.

Důležité a upřímné upozornění

Generování přes AI je experimentální. Mějte realistickou představu o tom, kde funguje:

• Běží jen v novějších prohlížečích na bázi Chromia, Chrome 138 a výš, na Windows, macOS 13 a výš, Linuxu nebo Chromebooku Plus.
• Potřebuje výkonnější počítač: zhruba 22 GB volného místa na disku a novější grafickou kartu nebo 16 GB paměti.
• Při prvním použití stáhne několikagigabajtový model.
• Na většině telefonů není a v Safari ani Firefoxu zatím taky ne.

Bereme to jako ukázku toho, kam prohlížeče míří, ne jako funkci, na kterou se dá spolehnout všude. Samotný editor, tedy ta část, kterou budete používat denně, funguje v každém moderním prohlížeči. Omezené je jen to AI pole.

Co nás ten experiment naučil

Příběh, který většinu vývojářů zajímá, je v detailech. Tři stojí za to si poznamenat.

Malé modely potřebují mantinely, ne slepou důvěru

Gemini Nano je malý, takže jeho výstupu nikdy nevěříme tak, jak přijde. Použitelné je to až díky tomu, co jsme kolem modelu postavili:

1. Pošli modelu popis od uživatele.
1. Odstraň případné značky bloků kódu, které sám přidá.
1. Ověř výsledek vlastním parserem Mermaidu, ještě než ho ukážeš.
1. Když ověření selže, vrať modelu chybu k jediné opravě.
1. Když to selže i potom, ukaž srozumitelnou hlášku a editor nech beze změny.

Tahle smyčka „ověř a zkus znovu" je rozdíl mezi efektní ukázkou a něčím, co reálně použijete. Model je užitečný kreslíř, ne konečná autorita. Tou je parser.

Chyba s „pošpiněným" plátnem

Export do PNG znamená vykreslit diagram na skryté plátno a uložit ho. V Chromu to pořád padalo na strohé hlášce: „Tainted canvases may not be exported."

Příčinu jsme odhalili po chvíli. Mermaid vykresloval textové popisky uvnitř vloženého HTML prvku (`foreignObject`) a prohlížeč to bere jako bezpečnostní pošpinění plátna, které export zablokuje. Pomohlo donutit Mermaid, aby popisky vykresloval jako skutečný SVG text místo vloženého HTML. Jako bonus teď text v PNG vyjde čistě a v SVG zůstane vybíratelný. Pokud někdy uvidíte chybu s pošpiněným plátnem u SVG, které je přitom celé jen z vašeho počítače, tohle je dobré zkontrolovat jako první.

Jeden rámec, tři exporty

PNG, SVG i kopírování do schránky procházejí jednou funkcí, která diagram zabalí do rámce podle motivu: přechod na pozadí, okraj, jemný stín. PNG je jen export toho samého orámovaného SVG ve vysokém rozlišení. Výsledek? Všechny tři výstupy jsou shodné mezi sebou i s živým náhledem. Co vidíte, to opravdu vyexportujete, bez druhé větve kódu, která by se časem rozešla.

Ať je to jasné: je to experiment, ne produkční software. Žádné SLA, žádná podpora, žádný plán dalšího vývoje. Pár testů v prohlížeči jsme přesto dopsali na místa, která se nám rozbíjela, hlavně na export a chybu s pošpiněným plátnem, aby další úpravy tiše nerozbily, co už fungovalo. Pořád to ale berte jako experiment, ne jako základ vašeho provozu.

Vyzkoušejte editor Mermaid diagramů a řekněte nám, co má umět dál

Editor je spuštěný a zdarma. Otevřete editor Mermaid diagramů, vyberte šablonu a začněte psát, nebo diagram popište a nechte ho napsat prohlížeč. Najdete ho vedle našich dalších bezplatných nástrojů.

Jestli si z toho máte odnést jednu věc nad rámec samotného nástroje, pak tuhle: nejlepší experimenty vznikají jako oprava konkrétní otravnosti a stojí za to zjistit, kam až nová schopnost prohlížeče dosáhne. Živý náhled vyřešil první problém. AI na zařízení ten další. Smyčka „ověř a zkus znovu" udržela AI na uzdě. Nebyl v tom žádný velký plán, jen jeden zádrhel po druhém.

U práce pro klienty je to jiné. Všimneme si, kde vám den reálně drhne, postavíme nejmenší ostrý nástroj, který to odstraní, a doděláme ho tak, aby se na něj dalo spolehnout. Někdy je to systém na míru postavený podle toho, jak doopravdy pracujete. Jindy tichý AI agent, který dělá práci, kterou by nikdo neměl dělat ručně.

Editor Mermaid diagramů byl rychlý experiment. Pokud máte proces, který volá po vlastním malém ostrém nástroji postaveném pořádně, napište nám. Takové problémy máme rádi.