Förhandsgranskare för Mermaid-diagram

Q: Renderar GitHub alla diagramtyper?

GitHub stöder de flesta typerna: flödesschema, sekvensdiagram, klassdiagram, tillståndsdiagram, ER-diagram, Gantt-schema och cirkeldiagram. Några nyare tillskott (journey, mindmap) kan dröja innan de stöds. Testa i ett utkast till issue innan du committar diagrammet till din README.

Q: Hur formger jag ett diagram?

Använd satserna `classDef` och `class` för att tilldela noderna CSS-klasser. Mermaid stöder även temaanpassning via ett direktivblock högst upp: `%%{init: {"theme": "dark"}}%%`.

Q: Kan jag exportera till PNG?

Ja. Förhandsvisningen renderas som SVG, så du kan ladda ner SVG:n direkt (den skalar hur mycket som helst utan kvalitetsförlust) eller exportera en PNG i 1x, 2x eller 3x upplösning.

Q: Varför får jag ett parsningsfel i mitt diagram?

Oftast beror det på ett reserverat tecken i en nodetikett. Omslut etiketter som innehåller parenteser, hakparenteser eller citattecken med dubbla citattecken: `A["Node name (v2)"]`. Felmeddelandet pekar ut raden som orsakar problemet.

Q: Skickas källkoden till mitt diagram någonstans?

Nej. Mermaid-biblioteket körs helt och hållet i din webbläsare och renderar diagrammet lokalt. Ingenting skickas till någon server.

Mermaid är ett textbaserat diagramspråk: du beskriver i vanlig text hur diagrammet ska se ut, och det renderas som SVG. Flödesscheman, sekvensdiagram, klassdiagram, tillståndsmaskiner, ER-diagram, Gantt-scheman, cirkeldiagram, tankekartor och grenvyer för Git stöds alla. Den här förhandsgranskaren kör den officiella Mermaid-parsern direkt i webbläsaren och uppdaterar SVG:n medan du skriver, så att du kan finslipa diagrammet utan att committa en halvtrasig version till din README.

Så förhandsgranskar du ett Mermaid-diagram

1

Välj diagramtyp

Flödesschema, sekvens, klass, tillstånd, ER, Gantt, cirkeldiagram, Git-graf eller tankekarta.
2

Skriv Mermaid-syntax

I den vänstra panelen. Parsern uppdaterar förhandsvisningen vid varje tangenttryckning.
3

Följ SVG-renderingen

I den högra panelen. Fel visas direkt tillsammans med raden som orsakade dem.
4

Exportera

Kopiera SVG:n, ladda ner en PNG eller kopiera Mermaid-källkoden och klistra in den i GitHub eller MkDocs.

De nio diagramtyperna i korthet

Typ	Inledande nyckelord	Används för
Flödesschema	`flowchart TD`	Beslutsträd, processflöden
Sekvensdiagram	`sequenceDiagram`	API-anrop, systeminteraktioner över tid
Klassdiagram	`classDiagram`	Objektorienterad arkitektur, domänmodeller
Tillståndsdiagram	`stateDiagram-v2`	Ändliga tillståndsmaskiner
ER-diagram	`erDiagram`	Databasscheman
Gantt-schema	`gantt`	Projektens tidslinjer
Cirkeldiagram	`pie`	Andelar av en helhet i procent
Git-graf	`gitGraph`	Visualisering av grentopologi
Tankekarta	`mindmap`	Hierarkisk brainstorming

Snabbstart: flödesschema

flowchart LR
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great]
    B -- No --> D[Debug]
    D --> B

Nyckelord för riktning: TD uppifrån och ner, LR från vänster till höger, RL från höger till vänster, BT nerifrån och upp.

Nodformer: [rect] rektangel, (rounded) rundade hörn, {diamond} romb, ((circle)) cirkel, >flag] flagga, [[subroutine]] subrutin.

Snabbstart: sekvensdiagram

sequenceDiagram
    participant U as User
    participant API
    participant DB
    U->>API: POST /login
    API->>DB: SELECT user
    DB-->>API: record
    API-->>U: 200 + token

->> är en heldragen pil (begäran) och -->> är en streckad pil (svar). participant X as Label kopplar ett kort namn till den etikett som visas i diagrammet.

Vanliga misstag

Ingen radbrytning efter det inledande nyckelordet. Första raden måste bestå av enbart flowchart TD eller motsvarande nyckelord.
Reserverade tecken i nodetiketter. Parenteser, hakparenteser och citattecken inuti en etikett måste escapas eller omslutas av dubbla citattecken: A["Node (v2)"].
Notation i klassdiagram. Prefixen +public, -private, #protected, ~package; stereotypen <<interface>>; arv <|--, komposition *--, aggregering o--.
Datumformat i Gantt. Standard är YYYY-MM-DD; använder du ett annat format lägger du till raden dateFormat YYYY-MM-DD högst upp.

Var Mermaid faktiskt renderas

GitHub renderar kodblock märkta med mermaid i issues, pull requests och README.md.
GitLab gör detsamma, med inbyggt stöd sedan 2022.
MkDocs tillsammans med insticksmodulen pymdown-extensions.
Docusaurus och Hugo via insticksmoduler.
Obsidian med inbyggd renderare.
VS Code med tillägget för Mermaid-förhandsgranskning.

Vanliga frågor

GitHub stöder de flesta typerna: flödesschema, sekvensdiagram, klassdiagram, tillståndsdiagram, ER-diagram, Gantt-schema och cirkeldiagram. Några nyare tillskott (journey, mindmap) kan dröja innan de stöds. Testa i ett utkast till issue innan du committar diagrammet till din README.

Använd satserna classDef och class för att tilldela noderna CSS-klasser. Mermaid stöder även temaanpassning via ett direktivblock högst upp: %%{init: {"theme": "dark"}}%%.

Ja. Förhandsvisningen renderas som SVG, så du kan ladda ner SVG:n direkt (den skalar hur mycket som helst utan kvalitetsförlust) eller exportera en PNG i 1x, 2x eller 3x upplösning.

Oftast beror det på ett reserverat tecken i en nodetikett. Omslut etiketter som innehåller parenteser, hakparenteser eller citattecken med dubbla citattecken: A["Node name (v2)"]. Felmeddelandet pekar ut raden som orsakar problemet.

Nej. Mermaid-biblioteket körs helt och hållet i din webbläsare och renderar diagrammet lokalt. Ingenting skickas till någon server.

Förhandsgranskare för Mermaid-diagram