Mermaid-diagramtestdokument

Documentation Testing

Detta dokument är en testfil som specifikt är avsedd att validera renderingsfunktionen för Mermaid-diagram i CZON-plattformen. Dokumentet visar exempel på flera diagramtyper som flödesschema, sekvensdiagram, Gantt-diagram, klassdiagram, tillståndsdiagram och cirkeldiagram, samt innehåller ett test med felaktig syntax för att verifiera felhanteringsmekanismen. Genom dessa exempel syftar dokumentet till att säkerställa att CZON-plattformen korrekt kan tolka och visa Mermaid-diagram, och därmed stödja användare att skapa och dela komplexa visuella innehåll. Dokumentet förklarar också kortfattat testets syfte och de inkluderade diagramtyperna för att hjälpa läsaren att förstå dess kärnvärde.
📅 2024-01-01
  • Mermaid
  • Diagramtest
  • CZON
  • Flödesschema
  • Sekvensdiagram
  • Gantt-diagram
  • Klassdiagram
  • Tillståndsdiagram

Mermaid-diagramtest

Detta är en testfil för att validera Mermaid-diagramrendering i CZON.

Exempel på flödesschema

graph TD
    A[Start] --> B{Fortsätt?}
    B -->|Ja| C[Utför åtgärd]
    B -->|Nej| D[Avsluta]
    C --> E[Kontrollera resultat]
    E --> F{Lyckades?}
    F -->|Ja| G[Klart]
    F -->|Nej| H[Försök igen]
    H --> C
    G --> D

Exempel på sekvensdiagram

sequenceDiagram
    participant Användare
    participant System
    participant Databas

    Användare->>System: Skicka förfrågan
    System->>Databas: Sök data
    Databas-->>System: Returnera resultat
    System-->>Användare: Visa resultat

Exempel på Gantt-diagram

gantt
    title Projektplan
    dateFormat  YYYY-MM-DD
    section Design
    Kravanalys     :klar,    des1, 2024-01-01, 7d
    Prototypdesign :aktiv,   des2, 2024-01-08, 5d
    Detaljdesign   :         des3, after des2, 5d
    section Utveckling
    Frontend-utveckling :    dev1, after des3, 10d
    Backend-utveckling  :    dev2, after des3, 15d
    section Test
    Enhetstest     :         test1, after dev1, 5d
    Integrationstest :       test2, after dev2, 5d

Exempel på klassdiagram

classDiagram
    class Animal {
        +String namn
        +int ålder
        +void ät()
        +void sov()
    }
    class Dog {
        +void skäll()
    }
    class Cat {
        +void jama()
    }

    Animal <|-- Dog
    Animal <|-- Cat

Exempel på tillståndsdiagram

stateDiagram-v2
    [*] --> Viloläge
    Viloläge --> Bearbetning : Starta bearbetning
    Bearbetning --> Framgång : Bearbetning lyckades
    Bearbetning --> Fel : Bearbetning misslyckades
    Framgång --> [*]
    Fel --> [*]

Exempel på cirkeldiagram

pie title Webbläsaranvändning
    "Chrome" : 65.2
    "Firefox" : 15.3
    "Safari" : 12.5
    "Edge" : 5.2
    "Övrigt" : 1.8

Test av felaktig syntax (borde visa felmeddelande)

graph TD
    A --> B
    // Här saknas pildefinition
    C --> D

Denna testfil innehåller flera Mermaid-diagramtyper för att verifiera att CZON:s Mermaid-integration fungerar korrekt.

See Also