Mermaid-editor
Lav flowdiagrammer, sekvensdiagrammer, Gantt-diagrammer og mere fra tekst med Mermaid-editoren. Render, zoom og eksportér SVG eller PNG i browseren.
Hvad er Mermaid?
Mermaid er et open source-diagramsprog, der lader dig lave diagrammer ud fra ren tekst, ligesom Markdown. Du beskriver knuder og forbindelser i en simpel syntaks, og rendereren tegner diagrammet automatisk.
Hvilke diagramtyper understøttes?
Editoren indeholder eksempler på flowdiagrammer, sekvens-, klasse-, tilstands- og ER-diagrammer, Gantt-diagrammer, cirkeldiagrammer, tankekort og tidslinjer. Mermaid 11 understøtter mange flere varianter, som kan tastes manuelt.
Hvordan opretter jeg et diagram?
Vælg et eksempel i rullemenuen eller skriv din kode i editoren til venstre. Forhåndsvisningen gengives ca. 350 ms efter, du er holdt op med at skrive; ved syntaksfejl viser et rødt panel den præcise fejl, mens det gamle diagram bevares.
Bliver min kode sendt et sted hen?
Nej. Alt gengives lokalt i din browser med JavaScript. Din kode forlader aldrig din enhed.
Hvordan eksporterer jeg mit diagram?
Brug Download SVG til en skalerbar vektorfil eller Download PNG til et billede med dobbelt opløsning, evt. med gennemsigtig baggrund. Kopiér kode lægger Mermaid-kilden på udklipsholderen.
Hvorfor mislykkes PNG-eksport nogle gange?
Nogle Mermaid-funktioner gengives via foreignObject, som browseren kan nægte at rasterisere. I så fald viser PNG-eksporten en fejl, men SVG-download fungerer altid, da der ikke kræves rasterisering.
Hvordan fungerer zoom?
Forhåndsvisningen understøtter 0,5x til 2x. Knapperne + og - trin 10 %, Tilpas skalerer diagrammet til forhåndsvisningsområdet, og 100 % gendanner original størrelse.
Kan jeg bruge Mermaid i min egen dokumentation?
Ja. GitHub, GitLab og mange dokumentationsværktøjer renderer Mermaid-blokke nativt: omslut din kode med en mermaid-kodeblok, så tegnes den automatisk på siden.
Understøtter editoren mørk tilstand?
Ja. Diagrammet følger platformens tema: når grænsefladen skifter til mørk tilstand, gengives det automatisk med Mermaids mørke tema.
Tips til læselige diagrammer?
Hold knudelabels korte, vælg en retning, der passer til indholdet (TD lodret eller LR vandret), del meget store grafer i delgrafer, og brug de indbyggede eksempler som skabelon for hver type.
Sådan bruges Mermaid-editor
Mermaid omdanner almindelig tekst til flowdiagrammer, sekvensdiagrammer, Gantt-diagrammer med mere. Denne live-editor genoptegner din kode, mens du skriver, helt i browseren — intet forlader din enhed.
- Vælg et udgangspunkt i rullemenuen «Eksempel» — ni færdige diagrammer dækker flow, sekvens, klasser, tilstande, ER, Gantt, cirkel, tankekort og tidslinje, og valget indlæser koden i editoren.
- Rediger Mermaid-koden i venstre panel; forhåndsvisningen til højre gentegnes ca. en tredjedel sekund efter, du holder op med at skrive. Når en syntaksfejl vises i det røde panel, forbliver det seneste gyldige diagram synligt, mens du retter det.
- Zoom mellem 50 % og 200 % med plus- og minusknapperne, tryk på «Tilpas» for at skalere diagrammet til forhåndsvisningsboksen, eller «100%» for at vende tilbage til faktisk størrelse.
- Sæt kryds i «Gennemsigtig baggrund», hvis du vil have PNG'en uden hvid bund, og tryk derefter på «Download SVG» eller «Download PNG» — PNG'en eksporteres i dobbelt opløsning og forbliver skarp, når den indlejres.
- Tryk på «Kopiér kode» for at lægge Mermaid-kildekoden på udklipsholderen og indsætte den i dokumentation, wikier eller versionsstyring.
Når et diagram nægter at tegnes, så udkommentér de linjer, du ændrede for nylig, for at isolere fejlen — fejlmeddelelsen nævner den problematiske linje, og forhåndsvisningen bevarer din seneste fungerende version, til syntaksen er korrekt igen.
Relaterede værktøjer
- Kode til Billede Konverter kodestykker til delbare billeder med syntaksfremhævning, tilpassede temaer og vinduesdekorationer. 100% privatliv, alt i din browser.
- Markdown Forhåndsvisning Gratis online Markdown-editor med live forhåndsvisning. Skriv, render og eksporter Markdown med fuld GFM-understøttelse.
- SVG-fremviser og Editor Forhåndsvis, rediger og optimer SVG-filer online. Realtidsforhåndsvisning, koderedigering og optimeringsværktøjer.
- JSON-træviser Visualiser JSON-data som et interaktivt sammenfoldbart træ. Søg nøgler og værdier, spor JSONPath ved hover og håndter store filer med doven indlæsning. Understøtter drag & drop af .json-filer.
- Hash-tjek Beregn og verificer MD5, SHA-1, SHA-256, SHA-512 filhasher lokalt
- Chmod-beregner Gratis online chmod-beregner til at visualisere og beregne Linux-filrettigheder med afkrydsningsfelter. Konverter straks mellem numerisk (755, 644) og symbolsk notation (rwxr-xr-x). Understøtter specielle rettigheder som setuid, setgid, sticky bit.
- ASCII-tabel Komplet ASCII-tegnkodningsreference med decimal-, hex-, oktal-, binærkoder, HTML-entiteter og tegnbeskrivelser. Øjeblikkelig søgning og filtrering.
- Hex-fremviser Vis filindhold i hex-dump-format med søgning, offset-navigation og virtuel rulning