Mermaid-kaaviot

Mikä on Mermaid?

Mermaid on tekstipohjainen kaavioiden kuvauskieli. Sen sijaan että vedät muotoja visuaalisessa työkalussa, kirjoitat lyhyen kuvauksen kaaviosta ja Mermaid renderöi sen visuaaliseksi grafiikaksi. Se on suunniteltu elämään koodin rinnalla — Markdown-tiedostoissa, wikeissä tai dokumentaatiossa — joten kaaviot pysyvät versiohallinnassa ja ovat helppoja päivittää.

Mermaid tukee monia kaaviotyyppejä:

• Vuokaaviot — päätöspuut ja prosessivirrat
• Sekvenssikaaviot — miten järjestelmät tai palvelut kutsuvat toisiaan ajan kuluessa
• Entiteetti-relaatiokaaviot (ER) — tietokantarakenteet (Schema)
• Arkkitehtuurikaaviot — komponentit ja niiden suhteet
• Gantt-kaaviot — aikataulut ja projektisuunnitelmat

Reaaliaikainen kaavion renderöinti

Avaa mikä tahansa .md-tiedosto IDE Stripissä, joka sisältää Mermaid-koodilohkon. Mermaid-lohko näyttää tältä:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

Kun IDE Strip havaitsee Mermaid-lohkon, se renderöi visuaalisen kaaviopaneelin lähteen rinnalle. Näet molemmat samanaikaisesti: tekstikuvauksen vasemmalla ja renderöidyn kaavion oikealla. Muokkaa tekstiä ja kaavio päivittyy välittömästi — tallenna-ja-lataa-uudelleen-vaihetta ei tarvita.

Interaktiivinen muokkaus

Tässä 1DevToolin Mermaid-tuki ylittää tavallisen renderöijän. Voit vetää solmuja visuaalisessa kaaviossa, ja lähdekoodi päivittyy automaattisesti heijastamaan uutta asettelua. Tämä toimii molempiin suuntiin:

• Muokkaa tekstiä → kaavio päivittyy — muuta tunnistetta tai lisää uusi yhteys lähteessä ja näe kaavion piirtyvän uudelleen.
• Vedä solmua → lähde päivittyy — siirrä solmua visuaalisessa kaaviossa ja vastaava sijaintitieto lähdekoodissa mukautuu vastaamaan.

Voit myös muuttaa solmujen kokoa ja yhdistää reunoja uudelleen vetämällä yhdeltä solmun reunalta toiselle. Lähde pysyy synkronoituna koko ajan.

Tämä tekee Mermaid-kaavioista huomattavasti vähemmän "kirjoita ja toivo parasta" -kokemuksen. Voit saada rakenteen suunnilleen oikeaksi tekstissä ja hienosäätää asettelua sitten visuaalisesti.

Käyttö AI Agentin kanssa

Yksi 1DevToolin tehokkaimmista yhdistelmistä on pyytää AI Agentia luomaan Mermaid-kaavio ja järjestää tulos sitten visuaalisesti uudelleen. Avaa esimerkiksi Claude Code Terminal ja kysy:

"Luo Mermaid-kaavio, joka näyttää miten tämän koodikannan pääkomponentit ovat vuorovaikutuksessa keskenään."

Agent lukee koodikantasi ja kirjoittaa .md-tiedoston, joka sisältää Mermaid-kaavion. Avaa tiedosto IDE Stripissä, ja kaavio renderöityy visuaalisesti. Jos asettelu on vaikea lukea, vedä solmut selkeämpään järjestykseen. Lähde päivittyy automaattisesti, joten voit Commitoida parannetun kaavion.

Tämä toimii myös hyvin tietokantarakenteiden, API-kutsusekvenssien ja deployment-arkkitehtuurikaavioiden kanssa.

Vinkki: Kysy Claude Codelta: "Piirrä Mermaid-kaavio, joka näyttää miten tämän repon komponentit ovat vuorovaikutuksessa." Avaa sitten luotu .md-tiedosto nähdäksesi kaavion visuaalisesti ja järjestääksesi sen uudelleen.