Mermaid Editor

Mermaid-editori verkossa, visuaalinen näkymä ja koodi samassa paikassa

Useimmat mermaid-editorit tarjoavat vain tekstikentän ja esikatselun. Tässä on myös kanvas: lisää lohko klikkaamalla, vedä nuoli, ryhmittele asioita alueiksi – ja mermaid-koodi kirjoittuu itsestään. Vaihda koodivälilehteen ja muokkaa käsin; kanvas seuraa perässä.

  • Piirtyy sitä mukaa kun kirjoitat

    Todellinen mermaid-moottori, piirretään uudelleen muutaman sadan millisekunnin kuluttua viimeisestä näppäimenpainalluksesta.

  • Koodi ja kanvas synkassa

    Muokkaa kumpaa tahansa puolta. Toinen päivittyy perässä – ei kopiointia kahden työkalun välillä.

  • 14 solmun muotoa

    Suorakulmio, pyöristetty, pilleri, ympyrä, vinoneliö, tietokanta, kuusikulmio ja muut, yhdellä klikkauksella.

  • Ilmainen, ilman rekisteröitymistä

    Ei kokeilujaksoa eikä vesileimaa — editori aukeaa heti. Kirjaudu vain, jos haluat useamman kuin yhden kaavion.

Kanvas, ei pelkkä tekstikenttä

Visuaalinen välilehti on oikea editori piirretyn kaavion päällä: klikkaa solmua valitaksesi sen, kaksoisklikkaa nimetäksesi sen uudelleen paikan päällä, vedä mistä tahansa panoroidaksesi.

  • Rakenna klikkaamallaLisää lohko, osoita nuolella toiseen, nimeä nuoli. Ei syntaksia opeteltavaksi ennen aloittamista.

  • Valitse muotoNeljätoista mermaid-vuokaavion muotoa – päätösvinoneliöt, tietokantasylinterit, aliohjelmat – yhdestä valitsimesta.

  • Väritä mitä tahansaKahdeksan valmista väriä ja värivalitsin, sovellettavissa yhteen solmuun tai kokonaiseen alueeseen.

Mermaid-koodi, joka pysyy sinun omanasi

Tekstivälilehti on tavallista mermaidia – samaa syntaksia jonka GitHub, GitLab, Notion ja Obsidian jo osaavat piirtää. Mikään täällä ei ole suljettu formaatti.

  • Kirjoita käsinKirjoita mermaidia suoraan ja katso sen piirtyvän. Kuusi valmista esimerkkiä aloitukseen.

  • Kulkee kumpaankin suuntaanLiitetyt vuokaaviot jäsennetään takaisin kanvakselle – solmut, muodot, värit, alikaaviot ja kaikki.

  • Jokainen kaaviotyyppiVuokaavio, sekvenssi, luokka, tila, ER, gantt, git-graafi, piirakka – esikatselu piirtää kaiken minkä mermaid tukee.

Isot kaaviot pysyvät luettavina

Arkkitehtuurikaaviot kasvavat nopeasti yhtä näyttöä suuremmiksi. Panorointi, zoomaus ja ryhmittely on suunniteltu juuri siihen sen sijaan että ne olisivat esteenä.

  • Alueet ja sisäkkäisyysRyhmittele lohkoja alikaavioiksi, upota alue toisen sisään, siirrä kokonainen alipuu yhdellä eleellä.

  • Zoomaa 2 %:sta 1600 %:iinVieritä panoroidaksesi, ctrl+vieritä zoomataksesi, tai keskitä uudelleen yhdellä painikkeella.

  • Tallentuu matkan varrellaKaaviosi tallentuu muokatessa automaattisesti selaimeesi. Jos kirjaudut sisään, se tallentuu tilillesi ja seuraa sinua kaikille laitteille.

Vie ja jatka eteenpäin

Mikään ei ole lukittu. Ota kuva, ota lähdekoodi, tai ota Markdown-lohko valmiina liitettäväksi dokumenttiin.

  • Ei maksumuuriaJokainen ominaisuus, vienti mukaan lukien, on ilmainen. Ei maksullista tasoa johon päivittää.

  • Renderöidään selaimessasiRenderöinti tapahtuu selaimessasi; ilman tiliä kaavio ei koskaan poistu sieltä, ja tilin kanssa tallennettu asiakirja seuraa sinua mille tahansa laitteelle.

  • SVG, PNG, .mmd, .mdKopioi SVG-merkkaus, lataa 2x PNG, tallenna mermaid-lähdekoodi tai ota aidattu Markdown-lohko.

Miten se vertautuu tavallisiin vaihtoehtoihin

Kaavio-koodina-työkalut vaativat kirjoittamaan kaiken käsin. Vedä-ja-pudota-työkalut antavat kuvan, jota ei voi diffata. Tämä ei valitse kumpaakaan puolta.

Aloittaminen

IQ Mermaid: Kaksoisklikkaa kanvasta ja solmu ilmestyy. Syntaksin voi oppia myöhemmin, tai ei koskaan.

Tyypillinen työkalu: Lue syntaksiohje ensin, tai hyväksy piirustustyökalu, jossa ei ole lainkaan tekstiesitystä.

Tulostusmuoto

IQ Mermaid: Tavallista mermaidia – samaa tekstiä jonka GitHub, GitLab ja Notion piirtävät natiivisti.

Tyypillinen työkalu: Suljettu tiedosto, joka aukeaa vain sen tehneessä työkalussa.

Muokkaaminen myöhemmin

IQ Mermaid: Muuta koodia tai siirrä lohkoja. Molemmat suunnat toimivat samassa kaaviossa.

Tyypillinen työkalu: Vain yksi suunta: koodilähtöisillä työkaluilla ei ole kanvasta, kanvaslähtöisillä ei ole lähdekoodia.

Hinta

IQ Mermaid: Ilmainen — sähköpostiakaan ei tarvita.

Tyypillinen työkalu: Ilmainen taso rajattu muutamaan kaavioon, vienti tai yhteistyö tilauksen takana.

Missä data sijaitsee

IQ Mermaid: Selaimessasi tai tililläsi, jos haluat sen seuraavan sinua mille tahansa laitteelle.

Tyypillinen työkalu: Tili jonkun palvelimella, kaaviosi sidottuna siihen.

Mermaid-editorin kysymyksiä

Aloittamiseen riittää, että avaat sivun.

Mikä on mermaid?

Mermaid on tekstipohjainen syntaksi kaavioille: kuvailet solmut ja nuolet muutamalla rivillä, ja piirtomoottori piirtää kuvan. GitHub, GitLab, Notion ja Obsidian piirtävät sen Markdownin sisällä, joten mermaid-lohko pysyy luettavana pull requestissa tai wiki-sivulla.

Onko tämä mermaid-editori todella ilmainen?

Kyllä. Kaikki ominaisuudet, myös vienti SVG- ja PNG-muotoon, ovat ilmaisia, ja voit käyttää editoria luomatta mitään. Valinnainen ilmainen tili lisää tallennettuja kaavioita ja laitteiden välisen synkronoinnin — maksullista tasoa ei ole eikä mitään pidetä takana.

Pitääkö minun osata mermaid-syntaksia?

Ei. Aloita visuaaliselta välilehdeltä: kaksoisklikkaa kanvasta lisätäksesi lohkon, valitse se ja piirrä nuoli toiseen. Mermaid-koodi luodaan puolestasi, ja voit lukea sitä milloin tahansa oppiaksesi syntaksin.

Mitkä kaaviotyypit ovat tuettuja?

Koodivälilehti piirtää kaiken minkä mermaid tukee – vuokaavio, sekvenssi, luokka, tila, entiteettisuhde, gantt, git-graafi, piirakka ja muut. Visuaalinen kanvas muokkaa nimenomaan vuokaavioita, mitä useimmat kaaviot ovat.

Voinko viedä PNG- tai SVG-muotoon?

Kyllä. Kopioi SVG-merkkaus leikepöydälle, lataa SVG-tiedosto, tai lataa PNG piirrettynä 2x-koossa diaesityksiin ja dokumentteihin. Voit myös tallentaa mermaid-lähdekoodin .mmd-tiedostona tai aidattuna Markdown-lohkona.

Mihin kaavioni tallentuu?

Ilman tiliä ainoa kaaviosi tallentuu selaimeen, joten se on siellä, kun palaat samalla laitteella. Jos kirjaudut sisään, se tallentuu tilillesi ja voi seurata sinua toiselle laitteelle. Vie lähdekoodi, jos haluat oman kopion.

Voinko liittää olemassa olevan mermaid-kaavion?

Kyllä. Liitä se koodivälilehteen; vuokaavio jäsennetään takaisin visuaaliselle kanvakselle solmuineen, muotoineen, väreineen ja alikaavioineen. Muut kaaviotyypit piirtyvät esikatselussa mutta pysyvät vain koodina.

Toimiiko se offline-tilassa?

Renderöinti tapahtuu kokonaan selaimessasi, joten sivun latauduttua editori toimii myös ilman yhteyttä.

Avaa editori. Ilmainen — ilman rekisteröitymistä.

Tyhjä kanvas, koodivälilehti ja jokainen vientivaihtoehto – ilmaiseksi, selaimessasi, juuri nyt.