add docs

mermaid-js · Jul 26, 2024 · 353a208 · 353a208
1 parent 7bae205
commit 353a208
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 0 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -88,6 +88,9 @@ <h2><a href="./packet.html">Packet</a></h2>
       <li>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
+      <li>
+        <h2><a href="./treeView.html">TreeView</a></h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/demos/treeView.html b/demos/treeView.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>TreeView Diagram Demo</h1>
+
+    <div class="diagrams">
+      <pre class="mermaid">
+        treeView-beta
+            packages
+                mermaid
+                    src
+                parser
+    </pre
+      >
+
+      <pre class="mermaid">
+        ---
+        config:
+            treeView:
+                rowIndent: 40
+                lineThickness: 2
+            themeVariables:
+                treeView:
+                    fontSize: '30px'
+        ---
+        treeView-beta
+            packages
+                mermaid
+                    src
+                parser
+
+    </pre
+      >
+    </div>
+    <script type="module">
+      import mermaid from '/mermaid.esm.mjs';
+      mermaid.initialize({
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+
+    <style>
+      .diagrams {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      pre {
+        width: 45vw;
+        padding: 2em;
+      }
+    </style>
+  </body>
+</html>
diff --git a/docs/syntax/treeView.md b/docs/syntax/treeView.md
@@ -0,0 +1,90 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).
+
+# TreeView Diagram (v\<MERMAID_RELEASE_VERSION>+)
+
+## Introduction
+
+A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.
+
+## Syntax
+
+The structure of the tree depends only on indentation.
+
+```
+treeView-beta
+    <folder name>
+        <file name>
+        <folder name>
+            <file name>
+    <file-name>
+```
+
+## Examples
+
+```mermaid-example
+treeView-beta
+    packages
+        mermaid
+            src
+        parser
+```
+
+```mermaid
+treeView-beta
+    packages
+        mermaid
+            src
+        parser
+```
+
+```mermaid-example
+---
+config:
+    treeView:
+        rowIndent: 5
+    themeVariables:
+        treeView:
+            fontSize: '20px'
+---
+treeView-beta
+    packages
+        mermaid
+            src
+        parser
+```
+
+```mermaid
+---
+config:
+    treeView:
+        rowIndent: 5
+    themeVariables:
+        treeView:
+            fontSize: '20px'
+---
+treeView-beta
+    packages
+        mermaid
+            src
+        parser
+```
+
+## Config Variables
+
+| Property      | Description               | Default Value |
+| ------------- | ------------------------- | ------------- |
+| rowIndent     | Indentation for each row  | 10            |
+| paddingX      | Horizontal padding of row | 5             |
+| paddingY      | Vertical padding of row   | 5             |
+| lineThickness | Thickness of the line     | 1             |
+
+### Theme Variables
+
+| Property  | Description            | Default Value |
+| --------- | ---------------------- | ------------- |
+| fontSize  | Font size of the label | '16px'        |
+| lineColor | Color of the line      | 'black'       |
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -157,6 +157,7 @@ function sidebarSyntax() {
         { text: 'XY Chart 🔥', link: '/syntax/xyChart' },
         { text: 'Block Diagram 🔥', link: '/syntax/block' },
         { text: 'Packet 🔥', link: '/syntax/packet' },
+        { text: 'TreeView 🔥', link: '/syntax/treeView' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },

diff --git a/packages/mermaid/src/docs/syntax/treeView.md b/packages/mermaid/src/docs/syntax/treeView.md
@@ -0,0 +1,60 @@
+# TreeView Diagram (v<MERMAID_RELEASE_VERSION>+)
+
+## Introduction
+
+A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.
+
+## Syntax
+
+The structure of the tree depends only on indentation.
+
+```
+treeView-beta
+    <folder name>
+        <file name>
+        <folder name>
+            <file name>
+    <file-name>
+```
+
+## Examples
+
+```mermaid-example
+treeView-beta
+    packages
+        mermaid
+            src
+        parser
+```
+
+```mermaid-example
+---
+config:
+    treeView:
+        rowIndent: 5
+    themeVariables:
+        treeView:
+            fontSize: '20px'
+---
+treeView-beta
+    packages
+        mermaid
+            src
+        parser
+```
+
+## Config Variables
+
+| Property      | Description               | Default Value |
+| ------------- | ------------------------- | ------------- |
+| rowIndent     | Indentation for each row  | 10            |
+| paddingX      | Horizontal padding of row | 5             |
+| paddingY      | Vertical padding of row   | 5             |
+| lineThickness | Thickness of the line     | 1             |
+
+### Theme Variables
+
+| Property  | Description            | Default Value |
+| --------- | ---------------------- | ------------- |
+| fontSize  | Font size of the label | '16px'        |
+| lineColor | Color of the line      | 'black'       |
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,9 @@ <h2><a href="./packet.html">Packet</a></h2> @@
           <li>
             <h2><a href="./block.html">Layered Blocks</a></h2>
           </li>
+          <li>
+            <h2><a href="./treeView.html">TreeView</a></h2>
+          </li>
         </ul>
       </body>
     </html>