Add TreeView Diagram

.build/jsonSchema.ts

@@ -25,6 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
+  'treeView',
 ] as const;
 
 /**

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)
 
 ---
 

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)
 
 ---
 

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".

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[] =>

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
   );
 };

packages/mermaid/src/diagrams/treeView/db.ts

@@ -0,0 +1,72 @@
+import type { TreeViewDiagramConfig } from '../../config.type.js';
+import type { TreeViewDb, Node } from './types.js';
+import { getConfig as getCommonConfig } from '../../config.js';
+import DEFAULT_CONFIG from '../../defaultConfig.js';
+import {
+  getAccDescription,
+  getAccTitle,
+  getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
+} from '../common/commonDb.js';
+import { cleanAndMerge } from '../../utils.js';
+let cnt = 0;
+
+const auxRoot: Node = {
+  id: cnt++,
+  level: -1,
+  name: '/',
+  children: [],
+};
+
+let stack = [auxRoot];
+
+const clear = () => {
+  cnt = 0;
+  stack = [auxRoot];
+  auxRoot.children = [];
+  auxRoot.id = cnt++;
+};
+
+const getRoot = () => {
+  return auxRoot;
+};
+
+const getCount = () => cnt;
+
+const defaultConfig: Required<TreeViewDiagramConfig> = DEFAULT_CONFIG.treeView;
+
+const getConfig = (): Required<TreeViewDiagramConfig> => {
+  return cleanAndMerge(defaultConfig, getCommonConfig().treeView);
+};
+
+const addNode = (level: number, name: string) => {
+  while (level <= stack[stack.length - 1].level) {
+    stack.pop();
+  }
+  const node = {
+    id: cnt++,
+    level,
+    name,
+    children: [],
+  };
+  stack[stack.length - 1].children.push(node);
+  stack.push(node);
+};
+
+const db: TreeViewDb = {
+  clear,
+  addNode,
+  getRoot,
+  getCount,
+  getConfig,
+  getAccTitle,
+  getAccDescription,
+  getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
+};
+
+export default db;

packages/mermaid/src/diagrams/treeView/detector.ts

@@ -0,0 +1,21 @@
+import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
+
+const id = 'treeView';
+
+const detector: DiagramDetector = (txt) => {
+  return /^\s*treeView/.test(txt);
+};
+
+const loader: DiagramLoader = async () => {
+  const { diagram } = await import('./diagram.js');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;

packages/mermaid/src/diagrams/treeView/diagram.ts

@@ -0,0 +1,13 @@
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+// @ts-ignore: JISON doesn't support types
+import parser from './parser/parser.jison';
+import db from './db.js';
+import renderer from './renderer.js';
+import styles from './styles.js';
+
+export const diagram: DiagramDefinition = {
+  db,
+  renderer,
+  parser,
+  styles,
+};

packages/mermaid/src/diagrams/treeView/parser/parser.jison

@@ -0,0 +1,39 @@
+
+%lex
+
+%options case-insensitive
+
+%%
+
+// \%\%[^\n]*\n                             /* skip comments */
+"treeView"    return "TREE_VIEW";
+[\S]+       return "TEXT";
+[\s]+       return "SPACELIST";
+[\n]+    return "NL";
+<<EOF>>     return "EOF";
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+    : TREE_VIEW body
+    ;
+
+body
+    : body TEXT            { yy.addNode(0, $2); }
+    | body SPACELIST TEXT  { yy.addNode($2.length, $3); }
+    | body eol
+    | 
+    ;
+
+eol
+    : SPACELIST eol
+    | NL
+    | EOF
+    ;
+
+%%
+