Skip to content

Instantly share code, notes, and snippets.

@JAKimball

JAKimball/index.html

Last active September 12, 2022 05:04
Show Gist options
  • Save JAKimball/ad4e878901003b9c63773df4756afef8 to your computer and use it in GitHub Desktop.
Save JAKimball/ad4e878901003b9c63773df4756afef8 to your computer and use it in GitHub Desktop.
Download ZIP
Just playing with mermaid.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Class 01 Demo</title>
<!-- <link rel="stylesheet"
href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"> -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: rgb(226, 240, 233);
}
header h1 {
color: rgb(22, 90, 39);
background-color: rgb(233, 187, 134);
}
main p {
padding: 1em;
border-radius: .5em;
}
</style>
</head>
<body>
<header>
<h1>Testing... Testing... Is this thing on?</h1>
</header>
<main>
<div class="mermaid">
flowchart TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?)
</div>
<div class="mermaid">
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#88cc88', 'edgeLabelBackground':'#ffffee',
'tertiaryColor': '#fff0f0'}}}%%
sequenceDiagram
autonumber
Alice ->> Webapp : Click on external auth
note over Alice: Initialisation
Webapp ->> DjangoAPI : Authentication Request (TOKEN)
note over Webapp, DjangoUI: Browser opened with <b>UIurlsktkn=TOKEN</b>
Webapp ->> DjangoUI : Browser window
DjangoUI ->> ExtProvider : Auth request
Alice ->> ExtProvider : Enter credentials
ExtProvider ->> DjangoUI : Auth response
DjangoUI ->> DjangoAPI : Auth response
Alice ->> Webapp : Click on auth. done
note right of Webapp: or continuous polling
Webapp ->> DjangoAPI : Ask for token
DjangoAPI ->> Webapp : Retrieve token
</div>
<div class="mermaid">
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee',
'tertiaryColor': '#fff0f0'}}}%%
flowchart TD
O(fa:fa-spinner)-->Chicken-.->Cow
subgraph Cow
L-->M
M-->L
end
subgraph Goat
L --> A
A((fa:fa-bug)) --> B((fa:fa-car))
B-.->C[fa:fa-ban forbidden]
B --> D{fa:fa-spinner Eggs or Ham?}
A ==>|Most Cats Go This Way|E[(Tuna Can DB)]
E --> F
end
F --> Ca((Cats))
F --> Do((Dogs))
D -->|Ham| Do
C-.->F([fa:fa-home Meet Here])
D-->|Eggs|E
subgraph Blimp
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> one
two --> c2
c2-->A
end
</div>
<div class="mermaid">
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
</div>
<div class="mermaid">
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#88cc88', 'edgeLabelBackground':'#ffffee',
'tertiaryColor': '#fff0f0'}}}%%
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });
</script>
</main>
<footer>
<p>&copy; 2022</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment