Mermaid-editori
Luo vuokaavioita, sekvenssikaavioita, Gantt-kaavioita ja muuta tekstistä Mermaid-editorilla. Renderöi, zoomaa ja vie SVG- tai PNG-muotoon selaimessasi.
Mikä Mermaid on?
Mermaid on avoimen lähdekoodin kaaviokieli, jolla luodaan kaavioita pelkästä tekstistä, kuten Markdownilla. Kuvaat solmut ja yhteydet yksinkertaisella syntaksilla, ja renderöijä piirtää kaavion automaattisesti.
Mitkä kaaviotyypit ovat tuettuja?
Editorissa on valmiit esimerkit vuokaavioista, sekvenssi-, luokka-, tila- ja ER-kaavioista sekä Gantt-kaavioista, ympyräkaavioista, miellekartoista ja aikajanoista. Mermaid 11 tukee monia muita muotoja, jotka voi kirjoittaa itse.
Miten kaavion luon?
Valitse esimerkki avattavasta luettelosta tai kirjoita oma koodisi vasemmanpuoleiseen editoriin. Esikatselu renderöityy uudelleen noin 350 ms jälkeen, kun lopetat kirjoittamisen; syntaksivirheestä punainen paneeli näyttää tarkan virheen ja vanha kaavio säilyy.
Lähetetäänkö koodiani jonnekin?
Ei. Kaikki renderöidään paikallisesti selaimessasi JavaScriptillä. Koodisi ei koskaan lähde laitteeltasi.
Miten kaavion vie?
Lataa SVG antaa skaalautuvan vektoritiedoston ja Lataa PNG kaksinkertaisen resoluution kuvan, valinnaisella läpinäkyvällä taustalla. Kopioi koodi laittaa Mermaid-lähteen leikepöydälle.
Miksi PNG-vienti joskus epäonnistuu?
Osa Mermaidin ominaisuuksista renderöidään foreignObjectin kautta, jonka selain voi kieltää rasteroimasta canvasille. Silloin PNG-vienti ilmoittaa virheen, mutta SVG-lataus toimii aina, koska rasterointia ei tarvita.
Miten zoomaus toimii?
Esikatselu tukee 0,5x–2x-skaalausta. + ja - painikkeet muuttavat 10 % kerrallaan, Sovita sovittaa kaavion esikatselualueeseen ja 100 % palauttaa alkuperäisen koon.
Voinko käyttää Mermaidia omassa dokumentaatiossani?
Kyllä. GitHub, GitLab ja monet dokumentaatiotyökalut renderöivät Mermaid-lohkot natiivisti: kiedä koodisi mermaid-koodilohkoon, ja se piirtyy sivulle automaattisesti.
Tukeeko editori tummaa tilaa?
Kyllä. Kaavio seuraa alustan teemaa: käyttöliittymän siirtyessä tummaan tilaan se renderöidään uudelleen automaattisesti Mermaidin tummalla teemalla.
Vinkkeä luettavien kaavioiden tekemiseen?
Pidä solujen tekstit lyhyinä, valitse suunta sisällön mukaan (TD pystyyn tai LR vaakaan), jaa hyvin suuret graafit aligraafeihin ja käytä valmiita esimerkkejä mallina jokaiselle tyypille.
Näin käytät työkalua Mermaid-editori
Mermaid muuttaa tavallisen tekstin vuokaavioksi, sekvenssikaavioksi, Gantt-kaavioksi ja moniksi muiksi. Tämä suora editori piirtää koodin uudelleen kirjoittaessasi, kokonaan selaimessa — mikään ei lähde laitteeltasi.
- Valitse lähtökohta «Esimerkki»-pudotusvalikosta — yhdeksän valmista kaaviota kattaa vuokaavion, sekvenssin, luokat, tilat, ER:n, Ganttin, ympyräkaavion, miellekartan ja aikajanan, ja valinta lataa sen koodin editoriin.
- Muokkaa Mermaid-koodia vasemmalla paneelilla; oikean esikatselu piirtyy uudelleen noin kolmasosasekuntia kirjoittamisen lopettamisen jälkeen. Kun punaisessa paneelissa näkyy syntaksivirhe, viimeisin kelvollinen kaavio pysyy näkyvissä korjaamisen ajan.
- Zoomaa 50 %:n ja 200 %:n välillä plus- ja miinusnappulilla, paina «Sovita», jotta kaavio skaalautuu esikatseluruutuun, tai «100%» palataksesi todelliseen kokoon.
- Rastita «Läpinäkyvä tausta», jos haluat PNG:n ilman valkoista pohjaa, ja paina sitten «Lataa SVG» tai «Lataa PNG» — PNG viedään kaksinkertaisella tarkkuudella, joten se pysyy terävänä upotettaessa.
- Paina «Kopioi koodi», jotta Mermaid-lähdekoodi siirtyy leikepöydälle ja voit liittää sen dokumentaatioon, wikiin tai versionhallintaan.
Kun kaavio ei piirry, muuta viimeksi muuttamasi rivit kommenteiksi erottaaksesi virheen — virheilmoitus nimeää ongelmarivin, ja esikatselu säilyttää viimeisen toimivan version, kunnes syntaksi on taas kunnossa.
Aiheeseen liittyvät työkalut
- Koodi kuvaksi Muunna koodinpätkät jaettaviksi kuviksi syntaksikorostuksella, mukautetuilla teemoilla ja ikkunakoristeilla. 100% yksityisyys, kaikki selaimessasi.
- Markdown Esikatselu Ilmainen online-Markdown-editori live-esikatselulla. Kirjoita, renderöi ja vie Markdown täydellisellä GFM-tuella.
- SVG-katselin ja Editori Esikatsele, muokkaa ja optimoi SVG-tiedostoja verkossa. Reaaliaikainen esikatselu, koodin muokkaus ja optimointityökalut.
- JSON-puun katselin Visualisoi JSON-tiedot interaktiivisena pienennettävänä puuna. Hae avaimia ja arvoja, seuraa JSONPathia hoveroitaessa ja käsittele suuria tiedostoja laiskalla latauksella. Tukee .json-tiedostojen raahausta ja pudotusta.
- Tiivistetarkistus Laske ja vahvista MD5, SHA-1, SHA-256, SHA-512 tiedostotiivisteet paikallisesti
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- Hex-katselin Näytä tiedostojen sisältö hex-dump-muodossa haulla, siirtymällä ja virtuaalisella vierityksellä