Mermaid Editor

Mermaid live editor, lag diagram på nett – visuelt og med kode

De fleste mermaid-editorer gir deg en tekstboks og en forhåndsvisning. Denne gir deg også et lerret: klikk for å legge til en boks, dra en pil, grupper ting i områder – og mermaid-koden skriver seg selv. Bytt til kode-fanen og rediger den for hånd; lerretet følger med.

  • Rendres mens du skriver

    Den ekte mermaid-motoren, tegnet på nytt noen hundre millisekunder etter siste tastetrykk.

  • Kode og lerret synkronisert

    Rediger på begge sider. Den andre følger med – ingen kopiering mellom to verktøy.

  • 14 nodeformer

    Rektangel, avrundet, pille, sirkel, diamant, database, sekskant og resten, ett klikk hver.

  • Gratis, ingen registrering

    Ingen prøveperiode eller vannmerke — editoren åpner med en gang. Logg inn bare hvis du vil ha mer enn ett diagram.

Et lerret, ikke bare en tekstboks

Den visuelle fanen er en ekte editor oppå det gjengitte diagrammet: klikk på en node for å velge den, dobbeltklikk for å gi den nytt navn direkte, dra hvor som helst for å panorere.

  • Klikk for å byggeLegg til en boks, pek en pil mot en annen, merk pilen. Ingen syntaks å huske før du starter.

  • Velg en formFjorten mermaid-flytskjemaformer – beslutningsdiamanter, databasesylindre, subrutiner – fra én velger.

  • Farge hva som helstÅtte forhåndsinnstillinger pluss en fargevelger, brukt på én enkelt node eller på et helt område.

Mermaid-kode som forblir din

Kode-fanen er ren mermaid – samme syntaks som GitHub, GitLab, Notion og Obsidian allerede gjengir. Ingenting her er et proprietært format.

  • Skriv den for håndSkriv mermaid direkte og se den gjengis. Seks ferdige eksempler å starte fra.

  • Går begge veierFlytskjema du limer inn tolkes tilbake til lerretet – noder, former, farger, undergrafer og alt.

  • Alle diagramtyperFlytskjema, sekvens, klasse, tilstand, ER, gantt, git-graf, kake – forhåndsvisningen gjengir alt mermaid støtter.

Store diagrammer forblir lesbare

Arkitekturdiagrammer vokser raskt forbi én skjerm. Panorering, zoom og gruppering er bygget for nettopp det, i stedet for å kjempe imot det.

  • Områder og nestingGrupper bokser i undergrafer, nest et område inni et annet, flytt et helt undertre med én bevegelse.

  • Zoom fra 2 % til 1600 %Rull for å panorere, ctrl-rull for å zoome, eller sentrer på nytt med én knapp.

  • Lagres underveisDiagrammet lagres automatisk i nettleseren mens du redigerer. Logger du inn, lagres det på kontoen din og følger deg til alle enheter.

Eksporter og gå videre

Ingenting er låst inne. Ta bildet, ta kildekoden, eller ta en Markdown-blokk klar til å limes inn i et dokument.

  • Ingen betalingsmurAlle funksjoner, inkludert eksport, er gratis. Det finnes ingen betalt versjon å oppgradere til.

  • Gjengis i nettleseren dinTegningen skjer i nettleseren din; uten konto forlater diagrammet den aldri, og med konto følger det lagrede dokumentet deg til alle enheter.

  • SVG, PNG, .mmd, .mdKopier SVG-markup, last ned en 2x PNG, lagre mermaid-kilden, eller hent en Markdown-blokk med kodeformatering.

Hvordan den sammenlignes med de vanlige alternativene

Diagram-som-kode-verktøy får deg til å skrive alt for hånd. Dra-og-slipp-verktøy gir deg et bilde du ikke kan diffe. Denne nekter å velge side.

Å komme i gang

IQ Mermaid: Dobbeltklikk på lerretet, og en node dukker opp. Du kan lære syntaksen senere – eller aldri.

Typisk verktøy: Les syntaksreferansen først, eller aksepter et tegneverktøy uten noen tekstrepresentasjon i det hele tatt.

Utdataformatet

IQ Mermaid: Ren mermaid – samme tekst som GitHub, GitLab og Notion gjengir naturlig.

Typisk verktøy: En proprietær fil som bare åpnes i verktøyet som laget den.

Redigering senere

IQ Mermaid: Endre koden eller flytt boksene. Begge retninger virker på samme diagram.

Typisk verktøy: Bare én retning: kode-først-verktøy har ikke noe lerret, lerret-først-verktøy har ikke kildekode.

Pris

IQ Mermaid: Gratis — ikke engang e-post.

Typisk verktøy: Gratisversjon begrenset til noen få diagrammer, med eksport eller samarbeid bak et abonnement.

Hvor dataene bor

IQ Mermaid: I nettleseren din, eller på kontoen din hvis du vil at det skal følge deg til alle enheter.

Typisk verktøy: En konto på en annens server, med diagrammene dine koblet til den.

Mermaid-editor spørsmål

Alt du trenger for å begynne er å åpne siden.

Hva er mermaid?

Mermaid er en tekstsyntaks for diagrammer: du beskriver noder og piler på noen få linjer, og en renderer tegner bildet. GitHub, GitLab, Notion og Obsidian gjengir det inni Markdown, så en mermaid-blokk forblir lesbar i en pull request eller en wiki-side.

Er denne mermaid-editoren virkelig gratis?

Ja. Alle funksjoner, inkludert eksport til SVG og PNG, er gratis, og du kan bruke editoren uten å opprette noe. En valgfri gratis konto gir flere lagrede diagrammer og synkronisering mellom enheter — det finnes ingen betalt plan, og ingenting holdes tilbake.

Må jeg kunne mermaid-syntaks?

Nei. Start på den visuelle fanen: dobbeltklikk på lerretet for å legge til en boks, velg den og tegn en pil til en annen. Mermaid-koden genereres for deg, og du kan lese den når du vil lære syntaksen.

Hvilke diagramtyper støttes?

Kode-fanen gjengir alt mermaid støtter – flytskjema, sekvens, klasse, tilstand, entitetsrelasjon, gantt, git-graf, kake og mer. Det visuelle lerretet redigerer spesifikt flytskjemaer, som er det de fleste diagrammer er.

Kan jeg eksportere til PNG eller SVG?

Ja. Kopier SVG-markup til utklippstavlen, last ned SVG-filen, eller last ned en PNG gjengitt i 2x for lysbilder og dokumenter. Du kan også lagre mermaid-kilden som .mmd eller som en Markdown-blokk med kodeformatering.

Hvor lagres diagrammet mitt?

Uten konto lagres det ene diagrammet ditt i nettleseren, så det er der når du kommer tilbake på samme enhet. Logger du inn, lagres det på kontoen din og kan følge deg til en annen enhet. Eksporter koden hvis du vil ha din egen kopi.

Kan jeg lime inn et eksisterende mermaid-diagram?

Ja. Lim det inn i kode-fanen; et flytskjema tolkes tilbake til det visuelle lerretet med noder, former, farger og undergrafer intakt. Andre diagramtyper gjengis i forhåndsvisningen, men forblir kun kode.

Fungerer det uten nett?

Rendering skjer helt i nettleseren din, så når siden er lastet, fungerer editoren også uten tilkobling.

Åpne editoren. Gratis — ingen registrering.

Et blankt lerret, en kode-fane og alle eksportalternativer – gratis, i nettleseren din, akkurat nå.