Mermaid Editor

Lav mermaid-diagrammer online, gratis editor med visuel tegning og kode

De fleste mermaid-editorer giver dig en tekstboks og en forhåndsvisning. Denne giver dig også et lærred: klik for at tilføje en blok, træk en pil, gruppér ting i områder — og mermaid-koden skriver sig selv. Skift til kode-fanen og redigér den i hånden; lærredet følger med.

  • Genereres mens du skriver

    Den rigtige mermaid-motor, gentegnet et par hundrede millisekunder efter dit sidste tastetryk.

  • Kode og lærred i sync

    Redigér den ene side. Den anden følger med — ingen copy-paste mellem to værktøjer.

  • 14 node-former

    Rektangel, afrundet, pille, cirkel, diamant, database, sekskant og resten, ét klik hver.

  • Gratis, ingen tilmelding

    Ingen prøveperiode eller vandmærke — editoren åbner med det samme. Log kun ind, hvis du vil have mere end ét diagram.

Et lærred, ikke bare en tekstboks

Den visuelle fane er en rigtig editor oven på det genererede diagram: klik på en node for at vælge den, dobbeltklik for at omdøbe den direkte, træk hvor som helst for at panorere.

  • Klik for at byggeTilføj en blok, peg en pil på en anden, sæt en label på pilen. Ingen syntaks at huske, før du går i gang.

  • Vælg en formFjorten mermaid-flowchart-former — beslutningsdiamanter, database-cylindre, subrutiner — fra én vælger.

  • Farvelæg altOtte forudindstillinger plus en farvevælger, anvendt på én node eller på et helt område.

Mermaid-kode, der forbliver din

Kode-fanen er ren mermaid — samme syntaks som GitHub, GitLab, Notion og Obsidian allerede gengiver. Intet her er et proprietært format.

  • Skriv den i håndenSkriv mermaid direkte og se den blive tegnet. Seks færdige eksempler at starte fra.

  • Går begge vejeFlowcharts, du indsætter, bliver parset tilbage på lærredet — noder, former, farver, subgrafer og det hele.

  • Alle diagramtyperFlowchart, sequence, class, state, ER, gantt, git graph, pie — forhåndsvisningen gengiver alt, mermaid understøtter.

Store diagrammer forbliver læsbare

Arkitekturdiagrammer vokser hurtigt ud over én skærm. Panorering, zoom og gruppering er bygget til det i stedet for at bekæmpe det.

  • Områder og indlejringGruppér blokke i subgrafer, indlejr et område i et andet, flyt et helt undertræ med én bevægelse.

  • Zoom fra 2% til 1600%Scroll for at panorere, ctrl-scroll for at zoome, eller centrér på ny med ét klik.

  • Gemmes undervejsDit diagram gemmes automatisk i browseren, mens du redigerer. Logger du ind, gemmes det på din konto i stedet og følger dig til enhver enhed.

Eksportér og kom videre

Intet binder dig. Tag billedet, tag kilden, eller tag en Markdown-blok klar til at indsætte i et dokument.

  • Ingen betalingsmurAlle funktioner, inklusive eksport, er gratis. Der er intet betalt niveau at opgradere til.

  • Gengives i din browserGengivelsen sker i din browser; uden en konto forlader diagrammet den aldrig, og med en konto følger det gemte dokument dig til enhver enhed.

  • SVG, PNG, .mmd, .mdKopiér SVG-markup, download en 2x PNG, gem mermaid-kilden, eller hent en Markdown-blok.

Sådan sammenlignes den med de sædvanlige muligheder

Diagram-som-kode-værktøjer får dig til at skrive alt i hånden. Træk-og-slip-værktøjer giver dig et billede, du ikke kan diffe. Denne her nægter at vælge side.

Kom i gang

IQ Mermaid: Dobbeltklik på lærredet, og en node dukker op. Du kan lære syntaksen senere — eller aldrig.

Typisk værktøj: Læs syntaksreferencen først, eller accepter et tegneværktøj helt uden tekstrepræsentation.

Outputformatet

IQ Mermaid: Ren mermaid — samme tekst, som GitHub, GitLab og Notion gengiver nativt.

Typisk værktøj: En proprietær fil, der kun åbner i det værktøj, der lavede den.

Redigering senere

IQ Mermaid: Ret koden eller flyt blokkene. Begge retninger virker på samme diagram.

Typisk værktøj: Kun én retning: kode-først-værktøjer har intet lærred, lærred-først-værktøjer har ingen kilde.

Pris

IQ Mermaid: Gratis — ikke engang en e-mail.

Typisk værktøj: Gratis niveau begrænset til få diagrammer, med eksport eller samarbejde bag et abonnement.

Hvor dataene bor

IQ Mermaid: I din browser, eller på din konto hvis du vil have det med til enhver enhed.

Typisk værktøj: En konto på en andens server, med dine diagrammer hæftet til den.

Spørgsmål om mermaid-editoren

Alt du behøver for at starte er at åbne siden.

Hvad er mermaid?

Mermaid er en tekstsyntaks til diagrammer: du beskriver noder og pile i nogle få linjer, og en renderer tegner billedet. GitHub, GitLab, Notion og Obsidian gengiver den inde i Markdown, så en mermaid-blok forbliver læsbar i en pull request eller en wiki-side.

Er denne mermaid-editor virkelig gratis?

Ja. Alle funktioner, inklusive eksport til SVG og PNG, er gratis, og du kan bruge editoren uden at oprette noget. En valgfri gratis konto tilføjer flere gemte diagrammer og synkronisering mellem enheder — der er ingen betalt plan, og intet holdes tilbage.

Skal jeg kende mermaid-syntaks?

Nej. Start på den visuelle fane: dobbeltklik på lærredet for at tilføje en blok, vælg den, og tegn en pil til en anden. Mermaid-koden genereres for dig, og du kan læse den, når du vil lære syntaksen.

Hvilke diagramtyper understøttes?

Kode-fanen gengiver alt, mermaid understøtter — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie og mere. Det visuelle lærred redigerer specifikt flowcharts, hvilket er, hvad de fleste diagrammer er.

Kan jeg eksportere til PNG eller SVG?

Ja. Kopiér SVG-markup til udklipsholderen, download SVG-filen, eller download en PNG gengivet i 2x til slides og dokumenter. Du kan også gemme mermaid-kilden som .mmd eller som en Markdown-blok.

Hvor gemmes mit diagram?

Uden en konto gemmes dit ene diagram i browseren, så det er der, når du vender tilbage på samme enhed. Logger du ind, gemmes det på din konto i stedet og kan følge dig til en anden enhed. Eksportér kilden, hvis du vil have din egen kopi.

Kan jeg indsætte et eksisterende mermaid-diagram?

Ja. Indsæt det i kode-fanen; et flowchart bliver parset tilbage på det visuelle lærred med noder, former, farver og subgrafer intakte. Andre diagramtyper bliver gengivet i forhåndsvisningen, men forbliver kun kode.

Virker den offline?

Rendering sker helt i din browser, så når siden er indlæst, fungerer editoren også uden forbindelse.

Åbn editoren. Gratis — ingen tilmelding.

Et tomt lærred, en kode-fane og alle eksportmuligheder — gratis, i din browser, lige nu.