Hugging Face's logo

Spaces:
awacke1
/
HTML5-Mermaid-Diagrams
Running

App Files Community
awacke1 commited on
Commit
9f6f553
·
verified ·
1 Parent(s): dbf9f7b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +178 -19
index.html CHANGED
@@ -1,19 +1,178 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Mermaid Diagrams</title>
6
+ <script type="module">
7
+ import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
8
+ mermaid.initialize({ startOnLoad: true });
9
+ </script>
10
+ </head>
11
+ <body>
12
+ <h1>Mermaid Diagrams</h1>
13
+
14
+ <div class="mermaid">
15
+ graph TD;
16
+ A-->B;
17
+ A-->C;
18
+ B-->D;
19
+ C-->D;
20
+ </div>
21
+
22
+ <div class="mermaid">
23
+ graph TD;
24
+ A[Start] --> B[Step 1];
25
+ B --> C{Decision};
26
+ C -->|Yes| D[Step 2];
27
+ C -->|No| E[End];
28
+ </div>
29
+
30
+ <div class="mermaid">
31
+ graph LR;
32
+ A --> B;
33
+ B --> C;
34
+ C --> D;
35
+ D --> E;
36
+ E --> A;
37
+ </div>
38
+
39
+ <div class="mermaid">
40
+ classDiagram
41
+ class Animal {
42
+ +String species
43
+ +void eat()
44
+ +void sleep()
45
+ }
46
+ class Mammal {
47
+ +boolean hasFur
48
+ +void feedYoung()
49
+ }
50
+ Animal <|-- Mammal
51
+ </div>
52
+
53
+ <div class="mermaid">
54
+ sequenceDiagram
55
+ participant Alice
56
+ participant Bob
57
+ Alice->>Bob: Hi Bob
58
+ Bob->>Alice: Hi Alice
59
+ </div>
60
+
61
+ <div class="mermaid">
62
+ gantt
63
+ dateFormat YYYY-MM-DD
64
+ section Section
65
+ Task A :a1, 2023-01-01, 30d
66
+ Task B :after a1, 20d
67
+ </div>
68
+
69
+ <div class="mermaid">
70
+ erDiagram
71
+ CUSTOMER ||--o{ ORDER : places
72
+ ORDER ||--|{ LINE-ITEM : contains
73
+ </div>
74
+
75
+ <div class="mermaid">
76
+ pie
77
+ title Key Data Points
78
+ "Data 1": 45
79
+ "Data 2": 25
80
+ "Data 3": 30
81
+ </div>
82
+
83
+ <div class="mermaid">
84
+ journey
85
+ title My Travel Journey
86
+ section Day 1
87
+ Wake Up: 5: Me
88
+ Eat Breakfast: 4: Me
89
+ </div>
90
+
91
+ <div class="mermaid">
92
+ stateDiagram
93
+ [*] --> S1
94
+ S1 --> S2
95
+ S2 --> [*]
96
+ </div>
97
+
98
+ <div class="mermaid">
99
+ gitGraph
100
+ commit
101
+ branch develop
102
+ commit
103
+ checkout master
104
+ commit
105
+ merge develop
106
+ </div>
107
+
108
+ <div class="mermaid">
109
+ graph TD;
110
+ A-->B;
111
+ </div>
112
+
113
+ <div class="mermaid">
114
+ graph TD;
115
+ A-->B;
116
+ B-->C;
117
+ C-->A;
118
+ </div>
119
+
120
+ <div class="mermaid">
121
+ graph TD;
122
+ A[Square Rect] --> B((Circle));
123
+ B --> C((Circle));
124
+ C --> D[Square Rect];
125
+ </div>
126
+
127
+ <div class="mermaid">
128
+ graph LR;
129
+ A --> B;
130
+ B --> C;
131
+ B --> D;
132
+ style C fill:#f9f,stroke:#333,stroke-width:2px;
133
+ style D fill:#bbf,stroke:#1132a4,stroke-width:4px;
134
+ </div>
135
+
136
+ <div class="mermaid">
137
+ graph TD;
138
+ subgraph one
139
+ a1-->a2;
140
+ end;
141
+ subgraph two
142
+ b1-->b2;
143
+ end;
144
+ one --> two;
145
+ </div>
146
+
147
+ <div class="mermaid">
148
+ graph TD;
149
+ subgraph cluster_A
150
+ A1 --> A2
151
+ end
152
+ subgraph cluster_B
153
+ B1 --> B2
154
+ end
155
+ A1 --> B1
156
+ </div>
157
+
158
+ <div class="mermaid">
159
+ graph LR;
160
+ Start --> Stop;
161
+ </div>
162
+
163
+ <div class="mermaid">
164
+ stateDiagram
165
+ [*] --> Still
166
+ Still --> Moving
167
+ Moving --> Running
168
+ Running --> [*]
169
+ </div>
170
+
171
+ <div class="mermaid">
172
+ graph TD;
173
+ A(Should you do it?) -->|Yes| B[Do it]
174
+ A -->|No| C[Do not do it]
175
+ </div>
176
+
177
+ </body>
178
+ </html>