Diagram Improvements in Book (#3124)

* Bump mermaid to 11.3.0
* Mermaid theme changes based on mdbook theme
* Replace old use cases diagram with mermaid one
* Change out ASCII git art with mermaid git graph
* Remove old theme.css file from book

book/book.toml

@@ -9,7 +9,6 @@ title = "Kanidm Administration"
 edit-url-template = "https://github.com/kanidm/kanidm/edit/master/book/{path}"
 git-repository-url = "https://github.com/kanidm/kanidm"
 git-repository-icon = "fa-github"
-additional-css = ["theme.css"]
 additional-js = ["mermaid.min.js", "mermaid-init.js"]
 
 # Github-flavoured markdown alerts, install mdbook-alerts

book/mermaid-init.js

@@ -1 +1,12 @@
-mermaid.initialize({startOnLoad:true});
+//* Changes mermaid theme based on selected mdbook theme
+const rootElement = document.documentElement;
+const darkThemes = ["coal", "navy", "ayu"];
+// Get the intersection of the HTML element class list & mdbook's dark themes
+const selectedDarkTheme = [...rootElement.classList].filter((c) => darkThemes.includes(c));
+
+if (selectedDarkTheme.length > 0) {
+	mermaid.initialize({ startOnLoad: true, theme: "dark" });
+} else {
+	mermaid.initialize({ startOnLoad: true, theme: "default" });
+}
+

book/src/introduction_to_kanidm.md

@@ -26,8 +26,29 @@ Kanidm solves this problem by acting as a central authority of accounts in your
 allows each account to associate many devices and strong credentials with different privileges. An
 example of how this looks:
 
-<img src="images/KanidmUseCases-Light.png" alt="Kanidm Use Case Diagram" class="light-mode-only" />
+```mermaid
-<img src="images/KanidmUseCases-Dark.png" alt="Kanidm Use Case Diagram" class="dark-mode-only" />
+graph LR;
+	device@{ shape: circle, label: "Your Device" };
+
+	ssh@{ shape: processes, label: "SSH Servers" };
+	website@{ shape: processes, label: "Websites" };
+	wifi@{ shape: processes, label: "Wifi / VPN" };
+	radius@{ shape: div-rect, label: "RADIUS Server" };
+
+	kanidm@{ shape: lin-cyl, label: "Kanidm" };
+
+	device-- Trusts OAuth -->website;
+	website-- Reads User Data -->kanidm;
+	device-- OAuth -->kanidm;
+
+	device-- SSH -->ssh;
+	ssh-- Retrieve SSH Keys -->kanidm;
+
+	device-- Login to -->wifi;
+	wifi-- RADIUS Credentials -->radius;
+	radius-- Verifies Credentials -->kanidm;
+
+```
 
 A key design goal is that you authenticate with your device in some manner, and then your device
 will continue to authenticate you in the future. Each of these different types of credentials, from

book/src/support.md

@@ -30,17 +30,49 @@ Versions follow semver using `major.minor.patch` with an optional `-tag`.
 Release branches will be created and tagged 7 days prior to a release. The version will be set to
 the pre-release version.
 
-```
+```mermaid
-  /- tag 1.2.0-dev
+%%{init: { "gitGraph": { "mainBranchName": "master", "parallelCommits": true, "showCommitLabel": false }}}%%
-  |          tag 1.3.0-dev
+gitGraph
-  v          v
+  commit tag: "1.2.0-dev"
---o ... --o--o--o--o ...  <- branch master
+  commit
-           \
+
-            \-o--o--o--o--o--o--o  <- branch 1.2.0
+  branch 1.2.0
-              ^        ^  ^
+  commit tag: "1.2.0-pre"
-              |        |   tag v1.2.1
+  commit
-              |        \- tag v1.2.0
+  commit tag: "1.2.0"
-              \- tag v1.2.0-pre
+  commit
+  commit tag: "1.2.1"
+  commit
+  commit tag: "1.2.2"
+  commit
+  commit tag: "1.2.3"
+  commit
+  commit type: HIGHLIGHT tag: "Final 1.2.x Release"
+
+  checkout master
+  commit tag: "1.3.0-dev"
+  commit
+  commit
+  commit
+  commit
+
+  branch 1.3.0
+  commit tag: "1.3.0-pre"
+  commit
+  commit tag: "1.3.0"
+  commit
+  commit tag: "1.3.1"
+  commit
+  commit tag: "1.3.2"
+
+  checkout master
+  commit tag: "1.4.0-dev"
+  commit
+  commit
+  commit
+  commit
+  commit
+  commit
 ```
 
 The first stable release is version 1.2.0. All releases prior are release candidate, beta or alpha

book/theme.css

@@ -1,11 +0,0 @@
-@media (prefers-color-scheme: dark) {
-	.light-mode-only {
-		display: none;
-	}
-}
-
-@media (prefers-color-scheme: light) {
-	.dark-mode-only {
-		display: none;
-	}
-}