Med Mermaid blir några rader text ett diagram. Markdown Preview Editor fungerar som en Mermaid-editor med förhandsvisning i realtid: skriv diagramkoden i ett Markdown-dokument, så ritar förhandsvisningen den medan du skriver. Till skillnad från ett fristående diagramverktyg ligger diagrammet tillsammans med texten runt omkring, så att ett designdokument, en README eller en lektionsplanering hålls i en och samma fil.
Vad är ett Mermaid-diagram?
Ett Mermaid-diagram är ett diagram som beskrivs med vanlig text. Du drar inte rutor och pilar – du skriver rader som A --> B, och Mermaid lägger ut bilden åt dig. Det finns stöd för flödesscheman, sekvensdiagram, Gantt-scheman, tillstånds- och klassdiagram, cirkeldiagram, tankekartor med mera.
Eftersom diagrammet är text är det lätt att ändra, kan versionshanteras och syns i diffar. GitHub, GitLab, Obsidian och många dokumentationsverktyg renderar Mermaid, så samma kod fungerar i alla.
Så ritar du ett diagram
- Öppna redigeraren. Gå till onlineredigeraren.
- Lägg till ett Mermaid-block. Skriv tre backticks följda av
mermaid, eller använd knappen Mermaid-diagram i den avancerade verktygsraden för att infoga en mall. - Skriv diagrammet. Förhandsvisningen till höger ritar om det medan du skriver, så en saknad pil eller parentes syns direkt.
- Spara eller dela. Spara dokumentet som
.md, exportera det till HTML eller skriv ut det till PDF – diagrammen följer med.
Här är ett första flödesschema:
markdown```mermaid
flowchart LR
A[Idé] --> B{Värt det?}
B -- ja --> C[Bygg det]
B -- nej --> D[Lägg det på is]
```
Diagramtyper du kan använda
| Typ | Börjar med | Passar för |
|---|---|---|
| Flödesschema | flowchart TD / flowchart LR |
Processer, beslut, algoritmer |
| Sekvensdiagram | sequenceDiagram |
API:er, inloggningar, användarflöden |
| Gantt-schema | gantt |
Projektplaner och tidslinjer |
| Tillståndsdiagram | stateDiagram-v2 |
Status för en order eller ett dokument |
| Klassdiagram | classDiagram |
Datamodeller och kodstruktur |
| Cirkeldiagram | pie |
Andelar av en helhet |
Den fullständiga syntaxen för varje typ, med exempel att kopiera, finns i vår guide om Mermaid-diagram i Markdown.
Därför passar den
- Förhandsvisning i realtid. Diagrammet uppdateras medan du skriver, och syntaxfel syns på en gång.
- Text och diagram tillsammans. Skriv förklaringen, formlerna och flödesschemat i en och samma Markdown-fil.
- Privat. Diagrammen ritas i din webbläsare. Din kod skickas inte till någon server.
- Gratis och öppen källkod. Inget konto och ingen gräns för antalet diagram.
Begränsningar
- Det går inte att ladda ner ett enskilt diagram som PNG eller SVG. Diagrammen exporteras som en del av dokumentet – i HTML-exporten och i PDF. Behöver du en fristående bild kan Mermaids officiella verktyg exportera en.
- Egna teman och stil per nod är begränsade: diagrammen har ett rent standardutseende som följer det ljusa eller mörka temat.
- Diagrammen skrivs som kod; det finns ingen visuell redigering med dra och släpp.
Vill du läsa en befintlig Markdown-fil med diagram? Använd Markdown viewer, eller gå tillbaka till startsidan för Markdown-editorn.
Vanliga frågor
Är den här Mermaid-editorn gratis?
Ja. Den är gratis och har öppen källkod, utan registrering och utan begränsningar.
Vilka typer av Mermaid-diagram stöds?
Flödesscheman, sekvensdiagram, Gantt-scheman, tillstånds-, klass- och ER-diagram, cirkeldiagram, tankekartor, tidslinjer och de övriga typer som Mermaid stöder.
Kan jag exportera ett Mermaid-diagram?
Diagrammen följer med när du exporterar dokumentet till HTML eller skriver ut det till PDF. Det går inte att ladda ner ett enskilt diagram som PNG eller SVG.
Varför renderas inte mitt Mermaid-diagram?
Oftast beror det på ett syntaxfel: en saknad pil, en parentes som inte stängts eller specialtecken i en etikett utan citattecken. Första raden måste ange diagramtypen, till exempel flowchart TD.
Skickar redigeraren min diagramkod någonstans?
Nej. Diagrammet ritas i din webbläsare, och dokumentet stannar på din enhet.