Mermaid szerkesztő
Hozzon létre folyamatábrákat, szekvenciadiagramokat, Gantt-diagramokat és többet szövegből a Mermaid szerkesztőben. Rendereljen, zoomoljon és exportáljon SVG-be vagy PNG-be a böngészőjében.
Mi az a Mermaid?
A Mermaid egy nyílt forráskódú diagramnyelv, amellyel egyszerű szövegből készíthetők diagramok, hasonlóan a Markdownhoz. A csomópontokat és kapcsolatokat egyszerű szintaxissal írja le, a motor pedig automatikusan megrajzolja a diagramot.
Milyen diagramtípusok támogatottak?
A szerkesztő beépített példákat tartalmaz folyamatábrákhoz, szekvencia-, osztály-, állapot- és ER-diagramokhoz, Gantt-diagramokhoz, kördiagramokhoz, elmetérképekhez és idővonalakhoz. A Mermaid 11 sok más típust is támogat, amelyek kézzel is beírhatók.
Hogyan hozhatok létre diagramot?
Válasszon példát a legördülő listából, vagy írja be a kódját a bal oldali szerkesztőbe. Az előnézet a gépelés befejezése után kb. 350 ms-mal újrarajzolódik; szintaxishibánál piros panel mutatja a pontos hibát, a régi diagram pedig megmarad.
Elküldésre kerül a kódom?
Nem. Minden helyben, a böngészőjében renderelődik JavaScripttel. A kód soha nem hagyja el az eszközét.
Hogyan exportálhatom a diagramot?
Az SVG letöltése skálázható vektorfájlt ad, a PNG letöltése kétszeres felbontású képet (opcionálisan átlátszó háttérrel). A kód másolása a vágólapra helyezi a Mermaid forrást.
Miért sikerül néha a PNG export?
Bizonyos Mermaid-funkciók foreignObject segítségével rajzolódnak, amelyet a böngésző megtagadhat a canvasre raszterezését. Ilyenkor a PNG hibát jelez, de az SVG letöltés mindig működik, mert nem igényel raszterezést.
Hogyan működik a nagyítás?
Az előnézet 0,5x és 2x közötti nagyítást támogat. A + és - gombok 10%-os lépésekben módosítanak, az Illesztés a előnézeti területre méretezi a diagramot, a 100% visszaállítja az eredeti méretet.
Használhatom a Mermaidot a saját dokumentációmban?
Igen. A GitHub, a GitLab és sok dokumentációs eszköz natívan rendereli a Mermaid blokkokat: foglalja kódját mermaid kódblokkba, és automatikusan megrajzolódik az oldalon.
Támogatja a szerkesztő a sötét módot?
Igen. A diagram követi a platform témáját: sötét módra váltáskor automatikusan a Mermaid sötét témájával renderelődik újra.
Tippek olvasható diagramokhoz?
Rövid csomópontfeliratok, a tartalomhoz illő irány (TD függőleges, LR vízszintes), a nagyon nagy gráfok feldarabolása algráfokra, és a beépített példák használata sablonként minden típushoz.
A(z) Mermaid szerkesztő használata
A Mermaid sima szöveget alakít folyamatábrákká, szekvenciadiagramokká, Gantt-diagramokká és sok minden mássá. Ez az élő szerkesztő újrarajzolja a kódot gépelés közben, teljesen a böngészőben — semmi nem hagyja el az eszközét.
- Válasszon kiindulópontot a „Példa” legördülőből — kilenc kész diagram fed le folyamatábrát, szekvenciát, osztályokat, állapotokat, ER-t, Ganttot, kördiagramot, elmetérképet és idővonalat, a kiválasztás betölti a kódját a szerkesztőbe.
- Szerkessze a Mermaid-kódot a bal panelen; a jobbra eső előnézet a gépelés leállása után körülbelül egyharmad másodperccel újrarajzolódik. Ha szintaxishiba jelenik meg a vörös panelen, az utolsó érvényes diagram látható marad, amíg javítja.
- Nagyítson 50% és 200% között a plusz és mínusz gombokkal, kattintson az „Illesztés”-re, hogy a diagram kitöltse az előnézeti dobozt, vagy a „100%”-ra a valódi mérethez való visszatéréshez.
- Jelölje be az „Átlátszó háttér”-t, ha fehér háttér nélküli PNG-t szeretne, majd kattintson az „SVG letöltése” vagy „PNG letöltése” gombra — a PNG dupla felbontásban exportálódik, így beágyazva is éles marad.
- Kattintson a „Kód másolása”-ra, hogy a Mermaid-forrást a vágólapra tegye, és dokumentációba, wikibe vagy verziókezelőbe illessze.
Ha egy diagram nem jelenik meg, tegye megjegyzésbe a nemrég módosított sorokat a hiba elkülönítéséhez — a hibaüzenet megnevezi a probléma sorát, és az előnézet megőrzi az utolsó működő verziót, amíg a szintaxis helyes nem lesz újra.
Kapcsolódó eszközök
- Kód Képpé Kódrészletek megosztott képekké alakítása szintaxiskiemeléssel, egyéni témákkal és ablakdekorációkkal. 100% adatvédelem, minden a böngészőjében.
- Markdown Előnézet Ingyenes online Markdown szerkesztő élő előnézettel. Írjon, rendereljen és exportáljon Markdown-t teljes GFM támogatással.
- SVG Megtekintő és Szerkesztő SVG fájlok előnézete, szerkesztése és optimalizálása online. Élő előnézet, kódszerkesztés és optimalizáló eszközök.
- JSON fa nézegető A JSON adatokat interaktív, összecsukható faként vizualizálja. Keressen kulcsokat és értékeket, kövesse a JSONPath-et az egér felülvitelével, és kezelje a nagy fájlokat lusta betöltéssel. Támogatja a .json fájlok húzd-és-ejtsd funkcióját.
- Hash-ellenőrző MD5, SHA-1, SHA-256, SHA-512 fájl hash-ek helyi kiszámítása és ellenőrzése
- Chmod-számológép Ingyenes online chmod-számológép a Linux fájljogosultságok vizualizálásához és számításához jelölőnégyzetekkel. Azonnali átváltás numerikus (755, 644) és szimbolikus jelölés (rwxr-xr-x) között. Támogatja a különleges jogosultságokat mint setuid, setgid, sticky bit.
- ASCII Táblázat Teljes ASCII karakterkódolási referencia tizes, tizenhatos, nyolcas, kettes számrendszerbeli kódokkal, HTML entitásokkal és karakterleírásokkal. Azonnali keresés és szűrés.
- Hex megjelenítő Fájltartalom megtekintése hex dump formátumban kereséssel, offset navigációval és virtuális görgetéssel