Mermaid Diagramvoorbeeld
Voer Mermaid-code in en bekijk diagrammen zoals flowchart en sequenceDiagram als live SVG-voorbeeld.
Diagramdocumentatie
Bekijk Mermaid-code direct als SVG-diagram
Mermaid Diagramvoorbeeld rendert Mermaid-syntaxis in de browser zodat je diagrammen kunt voorbereiden voor README's, wiki's en ontwerpdocumenten.
Voer Mermaid-syntaxis in die vaak in documentatie wordt gebruikt, zoals flowchart, sequenceDiagram, classDiagram en stateDiagram, en bekijk het SVG-resultaat rechts.
Als de syntaxis ongeldig is, toont het voorbeeldgebied een foutstatus met de originele code zodat je snel ziet wat moet worden aangepast.
Kopieer het gerenderde SVG of de oorspronkelijke Mermaid-code en gebruik die verder in README's, issues en technische documentatie.
Wanneer gebruik je dit?
Gebruik het om serviceflows, API-sequenties, statusovergangen of eenvoudige architectuurstructuren snel te controleren voordat je ze in documentatie opneemt.
Kan ik direct voorbeelden invoegen?
Kies boven de editor een voorbeeld voor flowchart, sequenceDiagram, classDiagram of stateDiagram om de invoer meteen te vullen.
Hoe worden fouten getoond?
Wanneer Mermaid-rendering mislukt, toont de tool de foutmelding samen met het broncodeblok zodat de syntaxis makkelijker te corrigeren is.
Wat kan ik kopiëren?
SVG kopiëren kopieert het gerenderde resultaat; Bron kopiëren kopieert de ingevoerde Mermaid-code.
De Mermaid renderer wordt geladen vanaf een externe CDN en je invoer wordt alleen in je browser verwerkt.
Mermaid Diagramvoorbeeld Werkruimte voor Mermaid diagramvoorbeeld
Gebruik
- 1 Schrijf of plak Mermaid-syntaxis in het invoervak links.
- 2 Kies indien nodig boven de invoer een voorbeeld voor flowchart, sequenceDiagram, classDiagram of stateDiagram.
- 3 Controleer het SVG-diagram of de foutmelding in het voorbeeld rechts.
- 4 Als het resultaat klopt, kopieer je de benodigde inhoud met SVG kopiëren of Bron kopiëren.
Veelvoorkomende toepassingen
- Een flowchart voor README vooraf bekijken
- Een sequenceDiagram voor een API-callflow controleren
- Een concept voor statusovergangen of class-relaties beoordelen
Veelgestelde vragen
Welke Mermaid-diagrammen kan ik bekijken?
De tool rendert algemene Mermaid-syntaxis die door Mermaid renderer wordt ondersteund, waaronder flowchart, sequenceDiagram, classDiagram en stateDiagram, als SVG.
Wat gebeurt er bij een syntaxfout?
Als rendering mislukt, toont het voorbeeldgebied een foutstatus en de oorspronkelijke broncode als codeblok.
Wordt mijn diagramcode naar de server verzonden?
Nee. Dit is een client-only tool en de Mermaid-code wordt in de browser verwerkt.