Mermaid-redigerer
Lag flytdiagrammer, sekvensdiagrammer, Gantt-diagrammer og mer fra tekst med Mermaid-redigereren. Render, zoom og eksporter SVG eller PNG i nettleseren.
Hva er Mermaid?
Mermaid er et åpen kildekode-diagramspråk som lar deg lage diagrammer fra ren tekst, likt Markdown. Du beskriver noder og koblinger i enkel syntaks, og rendereren tegner diagrammet automatisk.
Hvilke diagramtyper støttes?
Redigereren har ferdige eksempler for flytdiagrammer, sekvens-, klasse-, tilstands- og ER-diagrammer, Gantt-diagrammer, sektordiagrammer, tankekart og tidslinjer. Mermaid 11 støtter mange flere varianter du kan skrive manuelt.
Hvordan lager jeg et diagram?
Velg et eksempel fra rullegardinmenyen eller skriv koden din i editoren til venstre. Forhåndsvisningen renderes på nytt ca. 350 ms etter at du slutter å skrive; ved syntaksfeil viser et rødt panel den nøyaktige feilen mens det gamle diagrammet beholdes.
Blir koden min sendt et sted?
Nei. Alt rendres lokalt i nettleseren din med JavaScript. Koden din forlater aldri enheten din.
Hvordan eksporterer jeg diagrammet?
Bruk Last ned SVG for en skalerbar vektorfil eller Last ned PNG for et bilde med dobbel oppløsning, valgfritt med gjennomsiktig bakgrunn. Kopier kode legger Mermaid-kilden på utklippstavlen.
Hvorfor mislykkes PNG-eksport noen ganger?
Noen Mermaid-funksjoner renderes via foreignObject, som nettleseren kan nekte å rasterisere. Da viser PNG-eksporten en feil, men SVG-nedlastingen fungerer alltid siden den ikke krever rasterisering.
Hvordan fungerer zoomen?
Forhåndsvisningen støtter 0,5x til 2x. Knappene + og - stegjer 10 %, Tilpass skalerer diagrammet til forhåndsvisningsområdet og 100 % gjenoppretter original størrelse.
Kan jeg bruke Mermaid i min egen dokumentasjon?
Ja. GitHub, GitLab og mange dokumentasjonsverktøy renderer Mermaid-blokker nativt: pakk koden din inn i en mermaid-kodeblokk, så tegnes den automatisk på siden.
Støtter editoren mørk modus?
Ja. Diagrammet følger plattformtemaet: når grensesnittet bytter til mørk modus, renderes det på nytt automatisk med Mermaids mørke tema.
Tips for lesbare diagrammer?
Hold nodeetiketter korte, velg en retning som passer innholdet (TD loddrett eller LR vannrett), del svært store grafer i delgrafer og bruk de innebygde eksemplene som mal for hver type.
Slik bruker du Mermaid-redigerer
Mermaid gjør vanlig tekst om til flytdiagrammer, sekvensdiagrammer, Gantt-diagrammer og mer. Denne live-redigereren tegner koden din på nytt mens du skriver, helt i nettleseren — ingenting forlater enheten din.
- Velg et utgangspunkt i nedtrekksmenyen «Eksempel» — ni ferdige diagrammer dekker flytdiagram, sekvens, klasser, tilstander, ER, Gantt, sektor, tankekart og tidslinje, og valget laster koden inn i redigereren.
- Rediger Mermaid-koden i venstre panel; forhåndsvisningen til høyre tegnes på nytt omtrent en tredjedels sekund etter at du slutter å skrive. Når en syntaksfeil vises i det røde panelet, forblir det siste gyldige diagrammet synlig mens du retter opp.
- Zoom mellom 50 % og 200 % med pluss- og minusknappene, trykk på «Tilpass» for å skalere diagrammet til forhåndsvisningsboksen, eller «100%» for å gå tilbake til virkelig størrelse.
- Huk av for «Gjennomsiktig bakgrunn» hvis du vil ha PNG-en uten hvit bunn, og trykk deretter «Last ned SVG» eller «Last ned PNG» — PNG-en eksporteres i dobbelt oppløsning og holder seg skarp ved innbygging.
- Trykk på «Kopier kode» for å legge Mermaid-kildekoden på utklippstavlen og lime den inn i dokumentasjon, wikier eller kodelager.
Når et diagram nekter å tegnes, kommenter ut linjene du endret nylig for å isolere feilen — feilmeldingen peker på den aktuelle linjen, og forhåndsvisningen beholder den siste fungerende versjonen til syntaksen er korrekt igjen.
Relaterte verktøy
- Kode til Bilde Konverter kodebiter til delbare bilder med syntaksutheving, tilpassede temaer og vindusdekorasjoner. 100% personvern, alt i nettleseren din.
- Markdown Forhåndsvisning Gratis online Markdown-redigerer med live forhåndsvisning. Skriv, render og eksporter Markdown med full GFM-støtte.
- SVG-viser og Redigerer Forhåndsvis, rediger og optimaliser SVG-filer på nett. Sanntidsforhåndsvisning, koderedigering og optimaliseringsverktøy.
- JSON-treviser Visualiser JSON-data som et interaktivt sammenleggbart tre. Søk nøkler og verdier, spor JSONPath ved hover og håndter store filer med lat lasting. Støtter dra og slipp av .json-filer.
- Hash-sjekk Beregn og verifiser MD5, SHA-1, SHA-256, SHA-512 filhasher lokalt
- Chmod-kalkulator Gratis online chmod-kalkulator for å visualisere og beregne Linux-filrettigheter med avmerkingsbokser. Konverter umiddelbart mellom numerisk (755, 644) og symbolsk notasjon (rwxr-xr-x). Støtter spesielle rettigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-tegnkodingsreferanse med desimale, heksadesimale, oktale, binære koder, HTML-enheter og tegnbeskrivelser. Umiddelbar søk og filtrering.
- Hex-viser Vis filinnhold i hex-dump-format med søk, offset-navigering og virtuell rulling