Diagram als code met Mermaid in Lucidchart

Open het menu 'Diagram als code'

Volg deze stappen om toegang te krijgen tot het menu met diagram als code in Lucidchart:

1. Selecteer het pictogram Diagram als code in de primaire werkbalk helemaal links in de werkruimte.

Een diagram genereren

Maak je vertrouwd met het diagram als code proces door een van onze verstrekte voorbeelden voor elk ondersteund diagramtype te gebruiken. Wanneer je er klaar voor bent, genereer een diagram door je eigen Mermaid-code te schrijven.

Gebruik een gegeven voorbeeld

Om een diagram te maken met de gegeven voorbeelden, volg je deze stappen vanuit het menu Diagram als code:

1. Selecteer +New Mermaid diagram.
2. Klik onderaan in de meegeleverde editor op een van de voorbeeldopties.
3. Code wordt automatisch toegevoegd aan de editor voor het geselecteerde voorbeeldtype.
4. Bewerk de voorbeeldcode als dat nodig is.
5. Klik op Genereren.

Het diagram zal op het canvas worden gegenereerd.

Maak vanaf nul met Mermaid

Om een nieuw diagram helemaal opnieuw te maken met behulp van Mermaid-code, volg je deze stappen vanuit het menu Diagram als code:

1. Selecteer +New Mermaid diagram.
2. Typ je code in de daarvoor bestemde editor.
3. Klik op Genereren.

Het diagram zal op het canvas worden gegenereerd.

Een diagram bewerken

Een diagram dat uit code is gegenereerd, wordt als een afbeelding op het canvas weergegeven en moet worden bijgewerkt door de code te openen en te bewerken. Dit doe je als volgt:

1. Open de bijbehorende code-editor op een van de volgende manieren:
   • Klik op het diagram op het canvas.
   • Navigeer naar het menu 'diagram als code', blader erdoorheen en selecteer het diagram dat je wilt bewerken.
2. Klik in de editor en breng je wijzigingen aan.
   • Zoals je bewerken, wordt de diagram op de canvas in realtime bijgewerkt.

Het diagram zal op het canvas worden bijgewerkt.

Ondersteunde diagramtypen

De volgende diagramtypen worden ondersteund met Mermaid-code:

• Klasse: Beschrijf de structuur van een systeem door de klassen, attributen, bewerkingen en relaties tussen objecten te modelleren.
• C4: maak gebruik van de vier niveaus van modellen (context, containers, componenten en code) afhankelijk van je publiek.
• entiteit-relatie: visualiseer een database om de relaties tussen velden te tonen.
• Stroomdiagram: bouw eenvoudig te volgen stroomdiagrammen die complexe systemen en processen omvatten.
• Gantt: Geef visueel de planning en voortgang weer bij het beheren van een project.
• Ishikawa: Bouw een visgraatdiagram om de oorzaak-gevolgrelatie visueel in kaart te brengen tijdens de oorzaakanalyse.
• Geneste Boomkaart: Visualiseer hiërarchische datastructuur met geneste rechthoeken.
• Radarkaart: Maak een grafiek om meerdere kwantitatieve variabelen op een radiaal raster te vergelijken.
• Sequentie: geeft de processen en objecten weer die gelijktijdig bestaan, en de berichten die tussen hen worden uitgewisseld om een functie uit te voeren, voordat de levenslijn eindigt.
• Staat: bouw een gedragsdiagram om overgangen tussen verschillende objecten te laten zien.
• XY-grafiek: Maak uitgebreide lijnen-, bar- of spreidingsdiagrammen om de relatie tussen datapunten te visualiseren.

Veelgestelde vragen

Welke versie van Mermaid wordt ondersteund in Lucidchart? 
Lucidchart is geoptimaliseerd om versie 11.14 van Mermaid te ondersteunen. 

Hoe kan ik een diagram dat ik met Mermaid-code heb gegenereerd, vormgeven en formatteren?
Wanneer je in Lucid een diagram maakt met Mermaid-code, wordt het als een afbeelding op het canvas weergegeven. Om de stijl en opmaak van je diagram te bewerken, voeg je de Mermaid-stylingsyntax direct toe aan de code.

Feedback geven over dit artikel