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,79 @@
+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 {
+  clear as commonClear,
+  getAccDescription,
+  getAccTitle,
+  getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
+} from '../common/commonDb.js';
+import { cleanAndMerge } from '../../utils.js';
+import { ImperativeState } from '../../utils/imperativeState.js';
+
+interface TreeViewState {
+  cnt: number;
+  stack: Node[];
+}
+
+const state = new ImperativeState<TreeViewState>(() => ({
+  cnt: 1,
+  stack: [
+    {
+      id: 0,
+      level: -1,
+      name: '/',
+      children: [],
+    },
+  ],
+}));
+
+const clear = () => {
+  state.reset();
+  commonClear();
+};
+
+const getRoot = () => {
+  return state.records.stack[0];
+};
+
+const getCount = () => state.records.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 <= state.records.stack[state.records.stack.length - 1].level) {
+    state.records.stack.pop();
+  }
+  const node = {
+    id: state.records.cnt++,
+    level,
+    name,
+    children: [],
+  };
+  state.records.stack[state.records.stack.length - 1].children.push(node);
+  state.records.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-beta/.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,12 @@
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import { parser } from './parser.js';
+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.ts

@@ -0,0 +1,18 @@
+import type { ParserDefinition } from '../../diagram-api/types.js';
+import { log } from '../../logger.js';
+import { populateCommonDb } from '../common/populateCommonDb.js';
+import db from './db.js';
+import { parse, type TreeView } from '@mermaid-js/parser';
+
+const populate = (ast: TreeView) => {
+  populateCommonDb(ast, db);
+  ast.nodes.map((node) => db.addNode(node.indent.length, node.name));
+};
+
+export const parser: ParserDefinition = {
+  parse: async (input: string): Promise<void> => {
+    const ast = await parse('treeView', input);
+    log.debug(ast);
+    populate(ast);
+  },
+};