In dit artikel
Waarom Mermaid het diagramgereedschap van de ontwikkelaar is
Technische documentatie vertrouwt vaak op diagrammen om systeemarchitectuur, workflows en gegevensstromen uit te leggen. Traditionele diagramtools vereisen het slepen van vormen op een canvas en het exporteren van afbeeldingen die moeilijk te versiebeheren zijn. Mermaid kiest een andere aanpak — u beschrijft uw diagram in een eenvoudige tekstsyntax en de renderer produceert een schone SVG die naast uw code kan bestaan in Markdown-bestanden, wiki’s en pull requests.
Omdat Mermaid-diagrammen platte tekst zijn, zijn ze gemakkelijk te beoordelen in diffs, op te slaan in Git en automatisch te regenereren. Dit maakt ze ideaal voor documentatie die mee moet evolueren met de codebase. Een live preview-tool laat u in real time de diagramsyntax herhalen, waarbij u de gerenderde uitvoer ziet terwijl u typt in plaats van te wachten op een buildstap of een aparte applicatie.
Hoe de Mermaid-preview-tool gebruiken
De Mermaid-preview van CheckTown rendert uw diagramcode direct, zodat u diagrammen kunt ontwerpen en debuggen zonder de browser te verlaten.
- Typ of plak uw Mermaid-syntax in de editor — de preview wordt in real time bijgewerkt terwijl u de code aanpast
- Het hulpmiddel ondersteunt stroomdiagrammen, sequentiediagrammen, klassediagrammen, toestandsdiagrammen, entiteit-relatiediagrammen, Gantt-diagrammen, taartdiagrammen en meer
- Syntaxfouten worden gemarkeerd met duidelijke berichten zodat u problemen direct kunt lokaliseren en oplossen in plaats van te raden wat er mis ging
- Exporteer het gerenderde diagram als SVG of PNG voor gebruik in presentaties, documentatie of issue trackers
Probeer gratis — geen aanmelding vereist
Open de Mermaid-preview →Best practices voor Mermaid-diagrammen
Een paar conventies houden uw Mermaid-diagrammen leesbaar en onderhoudbaar naarmate ze complexer worden.
- Geef knooppunten beschrijvende ID’s en labels — gebruik betekenisvolle namen zoals userService en authDB in plaats van generieke A en B zodat de broncode leest als documentatie
- Houd diagrammen gericht op één concept — splits een complex systeem op in meerdere kleinere diagrammen in plaats van alles in één onleesbaar schema te proppen
- Gebruik subgrafieken om gerelateerde knooppunten te groeperen — dit voegt visuele structuur toe en maakt grote diagrammen in één oogopslag gemakkelijker te navigeren
Veelgestelde vragen
Welke Mermaid-diagramtypen worden ondersteund?
De preview ondersteunt alle belangrijke Mermaid-diagramtypen, waaronder stroomdiagrammen, sequentiediagrammen, klassediagrammen, toestandsdiagrammen, entiteit-relatiediagrammen, Gantt-diagrammen, taartdiagrammen, journey maps en vereistendiagrammen. De renderer blijft up-to-date met de nieuwste Mermaid.js-releases.
Kan ik het gegenereerde diagram inbedden in GitHub of GitLab?
Ja. GitHub en GitLab renderen beide Mermaid-codeblokken native in Markdown-bestanden. U kunt de syntax uit de editor rechtstreeks kopiëren naar een omsloten codeblok in uw README of wikipagina. De preview-tool is nuttig voor het itereren op de syntax voordat u deze naar uw repository commit.
Is er een groottelimiet voor diagrammen?
Er is geen harde tekenlimiet. Extreem grote diagrammen met honderden knooppunten kunnen echter traag renderen in de browser. Als uw diagram onhandelbaar wordt, overweeg dan om het op te splitsen in kleinere gerichte diagrammen die elk één deel van het systeem beschrijven.