Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Mermaid Diagrams</title> | |
| <script type="module"> | |
| import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; | |
| mermaid.initialize({ startOnLoad: true }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Mermaid Diagrams</h1> | |
| <div class="mermaid"> | |
| graph TD; | |
| A-->B; | |
| A-->C; | |
| B-->D; | |
| C-->D; | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| A[Start] --> B[Step 1]; | |
| B --> C{Decision}; | |
| C -->|Yes| D[Step 2]; | |
| C -->|No| E[End]; | |
| </div> | |
| <div class="mermaid"> | |
| graph LR; | |
| A --> B; | |
| B --> C; | |
| C --> D; | |
| D --> E; | |
| E --> A; | |
| </div> | |
| <div class="mermaid"> | |
| classDiagram | |
| class Animal { | |
| +String species | |
| +void eat() | |
| +void sleep() | |
| } | |
| class Mammal { | |
| +boolean hasFur | |
| +void feedYoung() | |
| } | |
| Animal <|-- Mammal | |
| </div> | |
| <div class="mermaid"> | |
| sequenceDiagram | |
| participant Alice | |
| participant Bob | |
| Alice->>Bob: Hi Bob | |
| Bob->>Alice: Hi Alice | |
| </div> | |
| <div class="mermaid"> | |
| gantt | |
| dateFormat YYYY-MM-DD | |
| section Section | |
| Task A :a1, 2023-01-01, 30d | |
| Task B :after a1, 20d | |
| </div> | |
| <div class="mermaid"> | |
| erDiagram | |
| CUSTOMER ||--o{ ORDER : places | |
| ORDER ||--|{ LINE-ITEM : contains | |
| </div> | |
| <div class="mermaid"> | |
| pie | |
| title Key Data Points | |
| "Data 1": 45 | |
| "Data 2": 25 | |
| "Data 3": 30 | |
| </div> | |
| <div class="mermaid"> | |
| journey | |
| title My Travel Journey | |
| section Day 1 | |
| Wake Up: 5: Me | |
| Eat Breakfast: 4: Me | |
| </div> | |
| <div class="mermaid"> | |
| stateDiagram | |
| [*] --> S1 | |
| S1 --> S2 | |
| S2 --> [*] | |
| </div> | |
| <div class="mermaid"> | |
| gitGraph | |
| commit | |
| branch develop | |
| commit | |
| checkout master | |
| commit | |
| merge develop | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| A-->B; | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| A-->B; | |
| B-->C; | |
| C-->A; | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| A[Square Rect] --> B((Circle)); | |
| B --> C((Circle)); | |
| C --> D[Square Rect]; | |
| </div> | |
| <div class="mermaid"> | |
| graph LR; | |
| A --> B; | |
| B --> C; | |
| B --> D; | |
| style C fill:#f9f,stroke:#333,stroke-width:2px; | |
| style D fill:#bbf,stroke:#1132a4,stroke-width:4px; | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| subgraph one | |
| a1-->a2; | |
| end; | |
| subgraph two | |
| b1-->b2; | |
| end; | |
| one --> two; | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| subgraph cluster_A | |
| A1 --> A2 | |
| end | |
| subgraph cluster_B | |
| B1 --> B2 | |
| end | |
| A1 --> B1 | |
| </div> | |
| <div class="mermaid"> | |
| graph LR; | |
| Start --> Stop; | |
| </div> | |
| <div class="mermaid"> | |
| stateDiagram | |
| [*] --> Still | |
| Still --> Moving | |
| Moving --> Running | |
| Running --> [*] | |
| </div> | |
| <div class="mermaid"> | |
| graph TD; | |
| A(Should you do it?) -->|Yes| B[Do it] | |
| A -->|No| C[Do not do it] | |
| </div> | |
| </body> | |
| </html> |