DataViz-Mermaid / index.html
sanjayw's picture
classDiagram added
f498a9b
raw
history blame
2.32 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My static Space</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</head>
<body>
<div class="mermaid">
journey
title Create AI
section Training
Format DataSet Inputs Files, Data Splits: 5: Teacher
Model Build w/ SKLearn, TF, Pytorch: 3: Student
Determine Model Performance: 1: Teacher, Student
section Deploy
Web Deploy Local and Cloud: 5: Teacher
Architecture Spaces Gradio Streamlit Heroku AWS Azure and GCCP: 5: Teacher
section Testing
Test Model with Input Datasets: 5: Teacher
Examples. Inputs that Work, Inputs That Break Model: 5: Teacher
Governance - Analyze, Publish Fairness, Equity, Bias for Datasets and Outputs: 5: Teacher
</div>
<div class="mermaid">
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>
<div class="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<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</div>
<div class="mermaid">
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
</div>
<div class="card">
<h1>Welcome to the Mermaid Modeler Tip Sheet</h1>
<p>
You can use Mermaid inside HTML5 by including the script and a div with the class or mermaid.
</p>
<p>
Documentation is located here:
<a href="https://mermaid.js.org/syntax/flowchart.html" target="_blank"
>Mermaid documentation</a
>.
</p>
</div>
</body>
</html>