M365CallFlowVisualizer/HtmlTemplate.html at main · realgarit/M365CallFlowVisualizer · GitHub

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
<!DOCTYPE html>
<!-- Version 2.0.0 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VoiceAppNamePlaceHolder</title>

<style>
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #24292e;
	background-color: #ffffff;
	margin: 0;
	padding: 24px 32px;
}

@media (prefers-color-scheme: dark) {
	body {
		color: #c9d1d9;
		background-color: #0d1117;
	}
	a { color: #58a6ff; }
	h1 { border-bottom-color: #30363d; }
	.footer { color: #8b949e; border-top-color: #30363d; }
}

h1 {
	font-size: 1.8em;
	font-weight: 600;
	padding-bottom: 0.3em;
	border-bottom: 1px solid #e1e4e8;
	margin-top: 0;
}

a {
	color: #0366d6;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.diagram-container {
	overflow-x: auto;
	padding: 16px 0;
}

.footer {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid #e1e4e8;
	font-size: 12px;
	color: #6a737d;
}
</style>

<script type="module">
	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';

	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

	mermaid.initialize({
		startOnLoad: true,
		theme: prefersDark ? 'dark' : 'default',
		flowchart: {
			useMaxWidth: true,
			htmlLabels: true,
			curve: 'basis'
		},
		securityLevel: 'loose',
		maxTextSize: 99999999,
		maxEdges: 99999999
	});
</script>

</head>
<body>

<h1 id="VoiceAppNameHtmlIdPlaceHolder">VoiceAppNamePlaceHolder</h1>

<div class="diagram-container">
<pre class="mermaid">ThemePlaceHolder

MermaidPlaceHolder

</pre>
</div>

<div class="footer">
	Created with <a href="https://github.com/mozziemozz/M365CallFlowVisualizer" target="_blank" rel="noopener">M365 Call Flow Visualizer</a>
</div>

</body>
</html>