Mermaid-diagrammentestdocument

Documentation Testing

Dit document is een testbestand, speciaal ontworpen om de weergavefunctionaliteit van Mermaid-diagrammen in het CZON-platform te valideren. Het document toont voorbeelden van verschillende diagramtypen zoals stroomdiagrammen, sequentiediagrammen, Gantt-diagrammen, klassendiagrammen, toestandsdiagrammen en taartdiagrammen, en bevat een test met foutieve syntaxis om de foutafhandelingsmechanismen te verifiëren. Door middel van deze voorbeelden beoogt het document ervoor te zorgen dat het CZON-platform Mermaid-diagrammen correct kan parseren en weergeven, zodat gebruikers complexe visuele inhoud kunnen creëren en delen. Het document licht ook kort het doel van de test en de opgenomen diagramtypen toe, om lezers te helpen de kernwaarde ervan te begrijpen.
📅 2024-01-01
  • Mermaid
  • Diagrammentest
  • CZON
  • Stroomdiagram
  • Sequentiediagram
  • Gantt-diagram
  • Klassendiagram
  • Toestandsdiagram

Mermaid-diagrammentest

Dit is een testbestand om de weergavefunctionaliteit van Mermaid-diagrammen in CZON te valideren.

Voorbeeld stroomdiagram

graph TD
    A[Start] --> B{Doorgaan?}
    B -->|Ja| C[Voer actie uit]
    B -->|Nee| D[Einde]
    C --> E[Controleer resultaat]
    E --> F{Succesvol?}
    F -->|Ja| G[Voltooid]
    F -->|Nee| H[Opnieuw proberen]
    H --> C
    G --> D

Voorbeeld sequentiediagram

sequenceDiagram
    participant Gebruiker
    participant Systeem
    participant Database

    Gebruiker->>Systeem: Verzoek indienen
    Systeem->>Database: Gegevens opvragen
    Database-->>Systeem: Resultaat teruggeven
    Systeem-->>Gebruiker: Resultaat tonen

Voorbeeld Gantt-diagram

gantt
    title Projecttijdlijn
    dateFormat  YYYY-MM-DD
    section Ontwerp
    Behoefteanalyse     :done,    des1, 2024-01-01, 7d
    Prototypeontwerp    :active,  des2, 2024-01-08, 5d
    Gedetailleerd ontwerp :         des3, after des2, 5d
    section Ontwikkeling
    Front-end ontwikkeling :         dev1, after des3, 10d
    Back-end ontwikkeling  :         dev2, after des3, 15d
    section Testen
    Unittesten         :         test1, after dev1, 5d
    Integratietesten   :         test2, after dev2, 5d

Voorbeeld klassendiagram

classDiagram
    class Dier {
        +String naam
        +int leeftijd
        +void eet()
        +void slaap()
    }
    class Hond {
        +void blaf()
    }
    class Kat {
        +void miauw()
    }

    Dier <|-- Hond
    Dier <|-- Kat

Voorbeeld toestandsdiagram

stateDiagram-v2
    [*] --> Inactief
    Inactief --> Verwerken : Start verwerking
    Verwerken --> Succes : Verwerking geslaagd
    Verwerken --> Fout : Verwerking mislukt
    Succes --> [*]
    Fout --> [*]

Voorbeeld taartdiagram

pie title Browsergebruik
    "Chrome" : 65.2
    "Firefox" : 15.3
    "Safari" : 12.5
    "Edge" : 5.2
    "Overig" : 1.8

Foutieve syntaxis test (moet een foutmelding tonen)

graph TD
    A --> B
    // Hier ontbreekt een pijldefinitie
    C --> D

Dit testbestand bevat meerdere Mermaid-diagramtypen om te verifiëren of de Mermaid-integratie in CZON correct werkt.

See Also