Test diagrams

Quelques exemples de diagrammes avec l'extension Mermaid :

• https://mermaid-js.github.io/mermaid/#/Setup?id=configuration
• https://github.com/SemanticMediaWiki/Mermaid

Mermaid, graph

{{#mermaid:graph LR

  A[Client] --> B[Répartition de charge] 
  B --> C[Serveur 1] 
  B --> D[Serveur 2]
  B --> E[Serveur 3]
  E --> F[Baie]

}}

Mermaid, graph

{{#mermaid:graph TD

   A((VIF)) -- Programme périodique --> B["\\VIF\ascii\FichierArt.txt"]
   A((VIF)) -- Programme périodique --> C["\\VIF\ascii\FichierOF.txt"]    
   B --> D(VisualBasic)
   C --> D(VisualBasic)
   D --> E[MarkImaj]
   E --> F[Imprimante]

}}

Mermaid, sequenceDiagram

{{#mermaid:sequenceDiagram

   VIF->>VBS: \\VIF\ascii\fichier010.txt
   VIF->>VBS: \\VIF\ascii\fichier020.txt
   VBS->>MI: Fusion
   MI->>Imprimante: Masque

}}

Mermaid, flowchart

{{#mermaid:flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End] }}

Mermaid, classDiagram

{{#mermaid:classDiagram

   Animal <|-- Duck
   Animal <|-- Fish
   Animal <|-- Zebra
   Animal : +int age
   Animal : +String gender
   Animal: +isMammal()
   Animal: +mate()
   class Duck{
       +String beakColor
       +swim()
       +quack()
   }
   class Fish{
       -int sizeInFeet
       -canEat()
   }
   class Zebra{
       +bool is_wild
       +run()
   }

}}

Mermaid, sequenceDiagram, 1

{{#mermaid:sequenceDiagram participant Alice participant Bob

 Alice->John: Hello John, how are you?
 loop Healthcheck
      John->John: Fight against hypochondria
 end
 Note right of John: Rational thoughts 
prevail...
   John-->Alice: Great!
   John->Bob: How about you?
   Bob-->John: Jolly good!

}}

Mermaid, sequenceDiagram, 4

{{#mermaid:sequenceDiagram

   par Alice to Bob
       Alice->>Bob: Hello guys!
   and Alice to John
       Alice->>John: Hello guys!
   end
   Bob-->>Alice: Hi Alice!
   John-->>Alice: Hi Alice!
   }}