Siirry pääsisältöön
LibraTool logoLibraTool

Mermaid-kaavioeditori ilmaiseksi

Kirjoita vuokaavioita, sekvenssidiagrammeja, Gantt-kaavioita ja muuta Mermaid-syntaksilla reaaliaikaisella esikatselulla. Vie SVG- tai PNG-muotoon. Toimii kokonaan selaimessasi.

💡 Kirjoita kaavioita Mermaid-syntaksilla — vuokaavioita, sekvenssikaavioita, Gantt-kaavioita, luokkakaavioita ja muita — ja vie ne SVG- tai PNG-muodossa. Kaikki toimii selaimessasi: kaaviotekstiäsi ei koskaan lähetetä, ja Mermaidin renderöintimoottori tarjoillaan tältä sivustolta eikä kolmannen osapuolen CDN:stä.

Yleiset käyttötavat

  • Luo vuokaavioLuo vuokaavio tekstistä ja vie se kuvana.
  • Piirrä sekvenssikaavioKaavio siitä, kuinka järjestelmät tai ihmiset ovat vuorovaikutuksessa ajan myötä.
  • Lisää kaavio README:henLuo kaaviota, jotka GitHub renderöi natiivisti README:ssäsi.
  • Rakenna Gantt-kaavioAseta projektipäivämäärä Gantt-kaaviona tekstistä.
  • Luo luokkien kaavioKaavio luokista ja niiden suhteista ohjelmistojen suunnittelussa.

Miten se toimii

Mermaid antaa sinun kirjoittaa kaaviot tekstiksi ja saada ne renderöidyksi automaattisesti – loistava pitämään kaaviot versionhallinnassa. Tämä on live-editori, joka renderöi kirjoitettaessasi.

  1. 1
    Mermaid-kone latautuu
    Mermaid-kirjasto ladataan LibraToolista, kun käytät työkalua ensimmäisen kerran, ja sen jälkeen selain tallentaa sen välimuistiin.
  2. 2
    Kirjoitat kaavion koodia
    Vuokaaviot, sekvenssikaaviot, Gantt-kaaviot, luokkakaaviot, ympyräkaaviot ja paljon muuta – käyttämällä Mermaid:n tekstisyntaksia.
  3. 3
    Se renderöidään live
    Koodi jäsennetään ja renderöidään SVG-muotoon selaimessasi kirjoitettaessasi, vaaleiden ja tummien teemoin.
  4. 4
    Vie SVG tai PNG
    Lataa kaavio skaalautuvaksi SVG:ksi tai 2× PNG:ksi dokumentaatio-, diasarja- tai README-tiedostoon.

Kaavion koodi – joka voi kuvata sisäisiä järjestelmiä – renderöidään kokonaan selaimessasi eikä lähetetä koskaan.

Liittyvät työkalut

📝

Markdown-editori

Kirjoita ja esikatsele Markdownia reaaliajassa. Tukee otsikoita, lihavointia, kursiivia, koodilohkoja, taulukoita ja listoja.

Kokeile sitä
🟦

CSS-verkon generaattori

Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.

Kokeile sitä
🌳

ASCII-puugeneraattori

Muunna sisennetty luettelo selkeäksi kansiopuuksi (├── └──) README-tiedostoihin ja dokumentaatioon. Unicode- tai pelkkä ASCII-tulostus. Toimii kokonaan selaimessasi.

Kokeile sitä

Usein kysytyt kysymykset