Mermaid-redigerare
Skapa flödesscheman, sekvensdiagram, Gantt-scheman och mer från text med Mermaid-redigeraren. Rendera, zooma och exportera SVG eller PNG i webbläsaren.
Vad är Mermaid?
Mermaid är ett öppen källkod-diagramspråk som låter dig skapa diagram från ren text, likt Markdown. Du beskriver noder och kopplingar i enkel syntax och renderaren ritar diagrammet automatiskt.
Vilka diagramtyper stöds?
Redigeraren innehåller exempel på flödesscheman, sekvens-, klass-, tillstånds- och ER-diagram, Gantt-scheman, cirkeldiagram, tankekartor och tidslinjer. Mermaid 11 stöder många fler varianter att skriva manuellt.
Hur skapar jag ett diagram?
Välj ett exempel ur rullgardinsmenyn eller skriv din kod i vänstra redigeraren. Förhandsvisningen renderas om cirka 350 ms efter att du slutat skriva; vid syntaxfel visar en röd panel det exakta felet medan det gamla diagrammet behålls.
Skickas min kod någonstans?
Nej. Allt renderas lokalt i din webbläsare med JavaScript. Din kod lämnar aldrig din enhet.
Hur exporterar jag mitt diagram?
Använd Ladda ner SVG för en skalbar vektorfil eller Ladda ner PNG för en bild med dubbel upplösning, valfritt med transparent bakgrund. Kopiera kod lägger Mermaid-källan på urklipp.
Varför misslyckas PNG-export ibland?
Vissa Mermaid-funktioner renderas via foreignObject, som webbläsaren kan vägra att rastrera. Då visar PNG-exporten ett fel, men SVG-nedladdningen fungerar alltid eftersom ingen rastrering krävs.
Hur fungerar zoomen?
Förhandsvisningen stödjer 0,5x till 2x. Knapparna + och - stegar 10 %, Anpassa skalar diagrammet till förhandsvisningsytan och 100 % återställer originalstorleken.
Kan jag använda Mermaid i min egen dokumentation?
Ja. GitHub, GitLab och många dokumentationsverktyg renderar Mermaid-block nativt: omslut koden med ett mermaid-kodblock så ritas den automatiskt på sidan.
Stödjer redigeraren mörkt läge?
Ja. Diagrammet följer plattformens tema: vid växling till mörkt läge renderas det om automatiskt med Mermaids mörka tema.
Tips för läsbara diagram?
Håll noded etiketter korta - nodeetiketter korta, välj en passande riktning (TD vertikalt eller LR horisontellt), dela mycket stora grafer i delgrafer och använd de inbyggda exemplen som mall för varje typ.
Hur man använder Mermaid-redigerare
Mermaid förvandlar vanlig text till flödesscheman, sekvensdiagram, Gantt-scheman med mera. Den här live-redigeraren ritar om din kod medan du skriver, helt i webbläsaren — inget lämnar din enhet.
- Välj en utgångspunkt i rullgardinen «Exempel» — nio färdiga diagram täcker flödesschema, sekvens, klasser, tillstånd, ER, Gantt, cirkel, tankekarta och tidslinje, och valet laddar dess kod i redigeraren.
- Redigera Mermaid-koden i den vänstra panelen; förhandsvisningen till höger ritas om ungefär en tredjedels sekund efter att du slutat skriva. När ett syntaxfel syns i den röda panelen finns det senaste giltiga diagrammet kvar medan du fixar koden.
- Zooma mellan 50 % och 200 % med plus- och minusknapparna, tryck på «Anpassa» för att skala diagrammet till förhandsvisningsrutan eller «100%» för att återgå till verklig storlek.
- Kryssa för «Transparent bakgrund» om du vill ha PNG:n utan vit botten och tryck sedan på «Ladda ner SVG» eller «Ladda ner PNG» — PNG:n exporteras i dubbel upplösning och förblir skarp vid inbäddning.
- Tryck på «Kopiera kod» för att lägga Mermaid-källkoden i urklipp och klistra in den i dokumentation, wikis eller versionshantering.
När ett diagram vägrar rendera, kommentera bort raderna du ändrade nyligen för att isolera felet — felmeddelandet pekar ut den aktuella raden, och förhandsvisningen behåller din senaste fungerande version tills syntaxen är korrekt igen.
Relaterade verktyg
- Kod till Bild Konvertera kodavsnitt till delbara bilder med syntaxmarkering, anpassade teman och fönsterdekorationer. 100% integritet, allt i din webbläsare.
- Markdown Förhandsvisning Gratis online Markdown-redigerare med live förhandsvisning. Skriv, rendera och exportera Markdown med fullt GFM-stöd.
- SVG-visare och Redigerare Förhandsgranska, redigera och optimera SVG-filer online. Realtidsförhandsgranskning, kodredigering och optimeringsverktyg.
- JSON-trädvisare Visualisera JSON-data som ett interaktivt fällbart träd. Sök nycklar och värden, spåra JSONPath vid hover och hantera stora filer med lazy loading. Stöder dra och släpp av .json-filer.
- Hash-kontroll Beräkna och verifiera MD5, SHA-1, SHA-256, SHA-512 filhashar lokalt
- Chmod-kalkylator Gratis online chmod-kalkylator för att visualisera och beräkna Linux-filrättigheter med kryssrutor. Konvertera omedelbart mellan numerisk (755, 644) och symbolisk notation (rwxr-xr-x). Stöder speciella rättigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-teckenkodningsreferens med decimala, hexadecimala, oktala, binära koder, HTML-entiteter och teckenbeskrivningar. Omedelbar sökning och filtrering.
- Hex-visare Visa filinnehåll i hex-dump-format med sökning, offset-navigering och virtuell scrollning