Mermaid Editor

Mermaid editor online, gratis – skapa diagram visuellt eller med kod

De flesta mermaid-editorer ger dig en textruta och en förhandsgranskning. Den här ger dig också en canvas: klicka för att lägga till ett block, dra en pil, gruppera saker i områden — och mermaid-koden skriver sig själv. Byt till kodfliken och redigera för hand; canvasen följer med.

  • Renderas medan du skriver

    Den riktiga mermaid-motorn, omritad några hundra millisekunder efter ditt senaste tangenttryck.

  • Kod och canvas synkas

    Redigera valfri sida. Den andra hänger med — ingen kopiering mellan två verktyg.

  • 14 nodformer

    Rektangel, rundad, piller, cirkel, romb, databas, hexagon och resten, ett klick var.

  • Gratis, ingen registrering

    Ingen provperiod eller vattenstämpel — editorn öppnas direkt. Logga in bara om du vill ha mer än ett diagram.

En canvas, inte bara en textruta

Den visuella fliken är en riktig editor ovanpå det renderade diagrammet: klicka på en nod för att markera den, dubbelklicka för att döpa om den direkt, dra var som helst för att panorera.

  • Klicka för att byggaLägg till ett block, peka en pil mot ett annat, märk pilen. Ingen syntax att komma ihåg innan du börjar.

  • Välj en formFjorton mermaid-flödesdiagramformer — beslutsromber, databascylindrar, subrutiner — från ett enda väljarverktyg.

  • Färglägg vad som helstÅtta färdiga färger plus en färgväljare, tillämpade på en enskild nod eller ett helt område.

Mermaid-kod som förblir din

Textfliken är ren mermaid — samma syntax som GitHub, GitLab, Notion och Obsidian redan renderar. Inget här är ett proprietärt format.

  • Skriv för handSkriv mermaid direkt och se det renderas. Sex färdiga exempel att utgå från.

  • Tolkas tillbakaFlödesdiagram du klistrar in tolkas tillbaka till canvasen — noder, former, färger, undergrafer och allt.

  • Varje diagramtypFlowchart, sequence, class, state, ER, gantt, git graph, pie — förhandsgranskningen renderar allt mermaid stödjer.

Stora diagram förblir läsbara

Arkitekturdiagram växer snabbt ur en skärm. Panorering, zoom och gruppering är byggda för just det, inte något du behöver kämpa mot.

  • Områden och nästlingGruppera block i undergrafer, nästla ett område inuti ett annat, flytta ett helt underträd med en gest.

  • Zooma från 2 % till 1600 %Scrolla för att panorera, ctrl-scrolla för att zooma, eller centrera om med en knapp.

  • Sparas medan du jobbarDiagrammet sparas automatiskt i webbläsaren medan du redigerar. Loggar du in sparas det på ditt konto och följer med till alla enheter.

Exportera och gå vidare

Inget är inlåst. Ta bilden, ta källkoden, eller ta ett Markdown-block redo att klistras in i ett dokument.

  • Ingen betalväggAlla funktioner, inklusive export, är gratis. Det finns ingen betald nivå att uppgradera till.

  • Renderas i din webbläsareRendereringen sker i din webbläsare; utan konto lämnar diagrammet den aldrig, och med konto följer det sparade dokumentet med till alla enheter.

  • SVG, PNG, .mmd, .mdKopiera SVG-koden, ladda ner en 2x PNG, spara mermaid-källkoden, eller hämta ett Markdown-block med staket.

Så jämför den sig med de vanliga alternativen

Diagram-som-kod-verktyg får dig att skriva allt för hand. Dra-och-släpp-verktyg ger dig en bild du inte kan diffa. Den här vägrar välja sida.

Att komma igång

IQ Mermaid: Dubbelklicka på canvasen och en nod dyker upp. Du kan lära dig syntaxen senare, eller aldrig.

Typiskt verktyg: Läs syntaxreferensen först, eller nöj dig med ett ritverktyg utan någon textrepresentation alls.

Utdataformatet

IQ Mermaid: Ren mermaid — samma text som GitHub, GitLab och Notion renderar direkt.

Typiskt verktyg: En proprietär fil som bara öppnas i verktyget som skapade den.

Redigera senare

IQ Mermaid: Ändra koden eller flytta blocken. Båda riktningarna fungerar på samma diagram.

Typiskt verktyg: Bara en riktning: kodbaserade verktyg saknar canvas, canvasbaserade verktyg saknar källkod.

Pris

IQ Mermaid: Gratis — inte ens ett mejl.

Typiskt verktyg: Gratisnivå begränsad till några få diagram, med export eller samarbete bakom en prenumeration.

Var datan finns

IQ Mermaid: I din webbläsare, eller på ditt konto om du vill att det följer med till alla enheter.

Typiskt verktyg: Ett konto på någon annans server, med dina diagram kopplade till det.

Mermaid-editor frågor

Allt du behöver för att börja är att öppna sidan.

Vad är mermaid?

Mermaid är en textsyntax för diagram: du beskriver noder och pilar i några rader, och en renderare ritar bilden. GitHub, GitLab, Notion och Obsidian renderar den inuti Markdown, så ett mermaid-block förblir läsbart i en pull request eller på en wikisida.

Är den här mermaid-editorn verkligen gratis?

Ja. Alla funktioner, inklusive export till SVG och PNG, är gratis och du kan använda editorn utan att skapa något. Ett valfritt gratis konto lägger till fler sparade diagram och synkronisering mellan enheter — det finns ingen betald nivå och inget hålls tillbaka.

Behöver jag kunna mermaid-syntax?

Nej. Börja på den visuella fliken: dubbelklicka på canvasen för att lägga till ett block, markera det och dra en pil till ett annat. Mermaid-koden genereras åt dig, och du kan läsa den när du vill lära dig syntaxen.

Vilka diagramtyper stöds?

Kodfliken renderar allt mermaid stödjer — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie och mer. Den visuella canvasen redigerar specifikt flödesdiagram, vilket är vad de flesta diagram är.

Kan jag exportera till PNG eller SVG?

Ja. Kopiera SVG-koden till urklipp, ladda ner SVG-filen, eller ladda ner en PNG renderad i 2x för presentationer och dokument. Du kan också spara mermaid-källkoden som .mmd eller som ett Markdown-block med staket.

Var lagras mitt diagram?

Utan konto sparas ditt enda diagram i webbläsaren, så det finns där när du kommer tillbaka på samma enhet. Loggar du in sparas det på ditt konto i stället och kan följa med till en annan enhet. Exportera källan om du vill ha en egen kopia.

Kan jag klistra in ett befintligt mermaid-diagram?

Ja. Klistra in det i kodfliken; ett flödesdiagram tolkas tillbaka till den visuella canvasen med noder, former, färger och undergrafer intakta. Andra diagramtyper renderas i förhandsgranskningen men förblir kodbaserade.

Fungerar det offline?

Rendering sker helt i din webbläsare, så när sidan har laddats fungerar editorn även utan anslutning.

Öppna editorn. Gratis — ingen registrering.

En tom canvas, en kodflik och alla exportalternativ — gratis, i din webbläsare, just nu.