feat: flowchart

Author: MC-XiaoHei

docs/.vitepress/config.mts

@@ -8,6 +8,7 @@ import {tabsPlugin} from "./theme/tabs/markdownPlugin";
 import fs from "fs";
 import {exampleAutoAnchorPreprocessor} from "./theme/anchor/exampleAutoAnchorPreprocessor";
 import {mathjaxContainerPreprocessor} from "./theme/mathjax/mathjaxContainerPreprocessor";
+import {withMermaid} from "vitepress-plugin-mermaid";
 
 const defaultLocale: string = 'en';
 const supportLocales: string[] = [
@@ -153,4 +154,4 @@ function getBase(): string {
     }
 }
 
-export default defineConfig(withSidebar(withI18n(vitepressOptions, vitePressI18nOptions), vitepressSidebarOptions))
+export default withMermaid(withSidebar(withI18n(vitepressOptions, vitePressI18nOptions), vitepressSidebarOptions))

docs/.vitepress/theme/style/global.css

@@ -22,4 +22,8 @@
 
 .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
     border: none;
+}
+
+.mermaid {
+    display:flex; justify-content:center;align-items:center
 }

docs/en/create-commands/arguments/types/command-arguments.md

@@ -104,18 +104,17 @@ To demonstrate restricting commands, let's create a command argument that allows
 
 Let's also add a restriction that the player can only use diamonds or dirt for the `/give` command, and they can only specify an amount if they selected dirt. Overall, our command argument should allow players to follow this path:
 
-$$\begin{gather}
-\texttt{(start)}\\\\
-\swarrow\hspace{1.2cm}\searrow\\\\
-\texttt{tp}\hspace{2cm}\texttt{give}\\\\
-\swarrow\hspace{3cm}\searrow\\\\
-\texttt{player}\hspace{3.25cm}\texttt{player}\\\\
-\hspace{0.25cm}\swarrow\hspace{3.75cm}\swarrow\hspace{1cm}\searrow\\\\
-\hspace{0.25cm}\texttt{target}\hspace{3cm}\texttt{diamond}\hspace{1.75cm}\texttt{dirt}\\\\
-\hspace{4.9cm}\texttt{minecraft:diamond}\hspace{1.75cm}\texttt{minecraft:dirt}\\\\
-\hspace{10cm}\downarrow\\\\
-\hspace{10cm}\texttt{(amount)}\\\\
-\end{gather}$$
+```mermaid
+graph TD
+    A((Start)) --> B(tp)
+    B --> C(player)
+    C --> D(target)
+    A --> E(give)
+    E --> F(player)
+    F --> G(diamond<br/>or<br/>minecraft:diamond)
+    F --> I(dirt<br/>or<br/>minecraft:dirt)
+    I --> J(amount)
+```
 
 In our diagram above, we have two main branches: `/tp` and `/give`. The `/tp` branch has `player` followed by `target`, and the `/give` branch has `player` and then that branches off into two new sections.
 

package.json

@@ -19,7 +19,9 @@
     "markdown-it-container": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
     "medium-zoom": "^1.1.0",
+    "mermaid": "^11.4.1",
     "vitepress": "^1.5.0",
+    "vitepress-plugin-mermaid": "^2.0.17",
     "vitepress-sidebar": "^1.29.0"
   },
   "scripts": {