mermaid-js · Vikrantpalle · Jul 25, 2024 · Jul 25, 2024 · Jul 26, 2024 · Jul 26, 2024
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -25,6 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
+  'treeView',
 ] as const;
 
 /**

diff --git a/cypress/integration/rendering/treeView.spec.ts b/cypress/integration/rendering/treeView.spec.ts
@@ -0,0 +1,45 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('TreeView Diagram', () => {
+  it('should render a simple treeView diagram', () => {
+    imgSnapshotTest(
+      `treeView-beta
+            file1.ts`
+    );
+  });
+
+  it('should render a complex treeView diagram', () => {
+    imgSnapshotTest(
+      `treeView-beta
+            root
+                folder1
+                    file1.js
+                    file2.ts
+                folder2
+                    file3.spec.ts
+                    folder3
+                        file4.ts
+                        file5.ts
+                        folder4
+                            file6.ts
+                file7.ts`
+    );
+  });
+
+  it('should render a complex treeView diagram with multiple roots', () => {
+    imgSnapshotTest(
+      `treeView-beta
+            folder1
+                file1.js
+                file2.ts
+            folder2
+                file3.spec.ts
+                folder3
+                    file4.ts
+                    file5.ts
+                    folder4
+                        file6.ts
+            file7.ts`
+    );
+  });
+});
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/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -111,7 +111,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
 
 ---
 
@@ -155,7 +155,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)
+[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
 
 ---
 
@@ -246,7 +246,7 @@ This option decides the amount of logging to be used by mermaid.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
+[packages/mermaid/src/config.type.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L167)
 
 ---
 
@@ -401,7 +401,7 @@ This is useful when you want to control how to handle syntax errors in your appl
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
+[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
 
 ---
 
@@ -448,13 +448,23 @@ You may also use `themeCSS` to override this value.
 
 ---
 
+### treeView
+
+• `Optional` **treeView**: `TreeViewDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+
+---
+
 ### wrap
 
 • `Optional` **wrap**: `boolean`
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
+[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)
 
 ---
 

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
+[packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279)
 
 ---
 

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/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -160,6 +160,7 @@ export interface MermaidConfig {
   sankey?: SankeyDiagramConfig;
   packet?: PacketDiagramConfig;
   block?: BlockDiagramConfig;
+  treeView?: TreeViewDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
@@ -1460,6 +1461,30 @@ export interface PacketDiagramConfig extends BaseDiagramConfig {
 export interface BlockDiagramConfig extends BaseDiagramConfig {
   padding?: number;
 }
+/**
+ * The object containing configurations specific for treeView diagrams.
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "TreeViewDiagramConfig".
+ */
+export interface TreeViewDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Horizontal distance between rows differing by one level
+   */
+  rowIndent?: number;
+  /**
+   * Horizontal padding of label
+   */
+  paddingX?: number;
+  /**
+   * Vertical padding of label
+   */
+  paddingY?: number;
+  /**
+   * Thickness of the line
+   */
+  lineThickness?: number;
+}
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "FontConfig".

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -260,6 +260,10 @@ const config: RequiredDeep<MermaidConfig> = {
   packet: {
     ...defaultConfigJson.packet,
   },
+  treeView: {
+    ...defaultConfigJson.treeView,
+    useWidth: undefined,
+  },
 };
 
 const keyify = (obj: any, prefix = ''): string[] =>

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -22,6 +22,7 @@ import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { packet } from '../diagrams/packet/detector.js';
 import block from '../diagrams/block/blockDetector.js';
+import treeView from '../diagrams/treeView/detector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -90,6 +91,7 @@ export const addDiagrams = () => {
     sankey,
     packet,
     xychart,
-    block
+    block,
+    treeView
   );
 };
-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>