Spaces:
Running
Running
File size: 3,009 Bytes
9f6f553 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<!DOCTYPE html>
<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> |