diff --git a/package.json b/package.json
index fd09f7e75f..959f2f7a82 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
 		"format:uncommitted": "nx format --fix --parallel --uncommitted",
 		"lint": "nx run-many --all --target=lint",
 		"prepublishOnly": "npm run build",
+		"mindmap": "cd packages/meta/src/mindmap/v2 && php -S 127.0.0.1:5269",
 		"preview": "nx preview playground-website",
 		"recompile:php:web": "nx recompile-php:light:all php-wasm-web && nx recompile-php:kitchen-sink:all php-wasm-web ",
 		"recompile:php:web:light": "nx recompile-php:light:all php-wasm-web ",
diff --git a/packages/meta/src/mindmap/v1/fetch-mindmap-data.js b/packages/meta/src/mindmap/v1/fetch-mindmap-data.js
new file mode 100644
index 0000000000..910b22b32a
--- /dev/null
+++ b/packages/meta/src/mindmap/v1/fetch-mindmap-data.js
@@ -0,0 +1,229 @@
+const shouldRebuild =
+	new URLSearchParams(window.location.search).get('rebuild') === 'true';
+
+let __moduleGithubToken = localStorage.getItem('GITHUB_TOKEN');
+const repos = [
+	'wordpress/wordpress-playground',
+	'wordpress/playground-tools',
+	'wordpress/blueprints',
+	'wordpress/blueprints-library',
+	'adamziel/playground-docs-workflow',
+	'adamziel/site-transfer-protocol',
+];
+
+const comparableKey = (str) => str.toLowerCase();
+
+const graphqlQuery = async (query, variables) => {
+	const headers = {
+		'Content-Type': 'application/json',
+	};
+	if (__moduleGithubToken) {
+		headers['Authorization'] = `Bearer ${__moduleGithubToken}`;
+	}
+	const response = await fetch('https://api.github.com/graphql', {
+		method: 'POST',
+		headers,
+		body: JSON.stringify({ query, variables }),
+	});
+	return response.json();
+};
+
+async function* iterateIssuesPRs(repo, labels = []) {
+	const query = `
+        query GetProjects($cursor: String!, $query: String!) {
+            search(query: $query, first: 100, type: ISSUE, after: $cursor) {
+                pageInfo {
+                    hasNextPage
+                    endCursor
+                }
+                edges {
+                    node {
+                        ... on Issue {
+                            number
+                            title
+                            url
+                            body
+                            state
+                            repository {
+                                nameWithOwner
+                            }
+                            labels(first: 10) {
+                                nodes {
+                                    name
+                                }
+                            }
+                        }
+                        ... on PullRequest {
+                            number
+                            title
+                            url
+                            body
+                            state
+                            repository {
+                                nameWithOwner
+                            }
+                            labels(first: 10) {
+                                nodes {
+                                    name
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    `;
+
+	let cursor = '';
+	do {
+		const labelQuery = labels.map((label) => `"${label}"`).join(',');
+		const variables = {
+			cursor,
+			query:
+				`repo:${repo}` + (labels.length ? ` label:${labelQuery}` : ''),
+		};
+
+		const response = await graphqlQuery(query, variables);
+		const edges = response.data.search.edges;
+		for (const edge of edges) {
+			if (edge.node) {
+				const item = edge.node;
+				const key = comparableKey(
+					`${item.repository.nameWithOwner}#${item.number}`
+				);
+				item.key = key;
+				item.title = item.title.trim().replace(/^Tracking: /, '');
+				yield edge.node;
+			}
+		}
+		if (!response.data.search.pageInfo.hasNextPage) {
+			break;
+		}
+		cursor = response.data.search.pageInfo.endCursor;
+	} while (true);
+}
+
+const nodesCacheKey = 'nodes_cache';
+
+const fetchData = async () => {
+	let allNodes = {};
+	const allNodesArray = [];
+	for (const repo of repos) {
+		for await (const item of iterateIssuesPRs(repo)) {
+			allNodes[item.key] = item;
+		}
+		for await (const item of iterateIssuesPRs(repo, [
+			'[Type] Mindmap Node',
+			'[Type] Mindmap Tree',
+		])) {
+			allNodes[item.key] = item;
+		}
+	}
+	return allNodes;
+};
+
+const getConnectedNodes = (issue) => {
+	const currentRepo = issue.repository.nameWithOwner;
+	let connections = [];
+
+	const regex1 =
+		/\bhttps:\/\/github.com\/([^\/]+)\/([^\/]+)\/(?:issues|pull)\/(\d+)\b/g;
+	const regex2 = /\b#(\d+)\b/g;
+	let match;
+
+	while ((match = regex1.exec(issue.body)) !== null) {
+		connections.push(`${match[1]}/${match[2]}#${match[3]}`);
+	}
+
+	while ((match = regex2.exec(issue.body)) !== null) {
+		connections.push(`${currentRepo}#${match[1]}`);
+	}
+
+	return connections.map(comparableKey);
+};
+
+const buildEdges = ({ allNodes, rootKey, isEdge }) => {
+	const seen = {};
+	const allEdges = {};
+
+	const preorderTraversal = (currentNode) => {
+		const relatedIssueKeys = getConnectedNodes(currentNode).filter(
+			(edgeKey) => isEdge(currentNode.key, edgeKey)
+		);
+
+		for (const relatedKey of relatedIssueKeys) {
+			if (!allNodes[relatedKey]) continue;
+			if (seen[relatedKey]) continue;
+			seen[relatedKey] = true;
+
+			if (!allEdges[currentNode.key]) {
+				allEdges[currentNode.key] = [];
+			}
+
+			allEdges[currentNode.key].push(relatedKey);
+			preorderTraversal(allNodes[relatedKey]);
+		}
+	};
+
+	preorderTraversal(allNodes[rootKey]);
+	return allEdges;
+};
+
+const buildTree = (allNodes, allEdges, rootKey) => {
+	const node = { ...allNodes[rootKey] };
+	const childrenKeys = allEdges[rootKey] || [];
+	node.children = childrenKeys.map((childKey) =>
+		buildTree(allNodes, allEdges, childKey)
+	);
+	return node;
+};
+
+export const fetchMindmapData = async ({ githubToken } = {}) => {
+	if (githubToken) {
+		__moduleGithubToken = githubToken;
+	}
+
+	const allNodes = await fetchData();
+	const isEdge = (fromKey, toKey) => {
+		if (mindmapTrees[fromKey]) {
+			return true;
+		}
+		if (mindmapNodes[fromKey] && mindmapNodes[toKey]) {
+			return true;
+		}
+		return false;
+	};
+
+	const mindmapTrees = {};
+	const mindmapNodes = {};
+	for (const key in allNodes) {
+		if (
+			allNodes[key].labels.nodes.some(
+				(label) => label.name === '[Type] Mindmap Tree'
+			)
+		) {
+			mindmapTrees[key] = allNodes[key];
+			mindmapNodes[key] = allNodes[key];
+		} else if (
+			allNodes[key].labels.nodes.some(
+				(label) => label.name === '[Type] Mindmap Node'
+			)
+		) {
+			mindmapNodes[key] = allNodes[key];
+		}
+	}
+
+	const rootKey = 'wordpress/wordpress-playground#525';
+	const allEdges = buildEdges({
+		allNodes,
+		rootKey,
+		isEdge,
+	});
+	const tree = buildTree(allNodes, allEdges, rootKey);
+	console.log({
+		allNodes,
+		tree,
+	});
+
+	return tree;
+};
diff --git a/packages/meta/src/mindmap/v1/index.html b/packages/meta/src/mindmap/v1/index.html
new file mode 100644
index 0000000000..e2b03cfda3
--- /dev/null
+++ b/packages/meta/src/mindmap/v1/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Mind Map</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<div id="mindmap"></div>
+		<script src="https://d3js.org/d3.v6.min.js"></script>
+		<script src="script.js"></script>
+	</body>
+</html>
diff --git a/packages/meta/src/mindmap/v1/script.js b/packages/meta/src/mindmap/v1/script.js
new file mode 100644
index 0000000000..6f1a2339f1
--- /dev/null
+++ b/packages/meta/src/mindmap/v1/script.js
@@ -0,0 +1,216 @@
+async function boot() {
+	const { fetchMindmapData } = await import('./fetch-mindmap-data.js');
+	const isLocalhost =
+		window.location.hostname === 'localhost' ||
+		window.location.hostname === '127.0.0.1';
+	let mindmapData = null;
+	if (localStorage.getItem('mindmapData')) {
+		mindmapData = JSON.parse(localStorage.getItem('mindmapData'));
+	} else {
+		mindmapData = await fetchMindmapData();
+		localStorage.setItem('mindmapData', JSON.stringify(mindmapData));
+	}
+
+	const width = window.innerWidth;
+	const height = window.innerHeight;
+
+	const svg = d3
+		.select('#mindmap')
+		.append('svg')
+		.attr(
+			'xmlns:mydata',
+			'https://playground.wordpress.net/svg-namespaces/mydata'
+		)
+		.attr('width', width)
+		.attr('height', height)
+		.style('background', 'white');
+
+	const g = svg
+		.append('g')
+		.attr('transform', `translate(${width / 2},${height / 2})`); // Centering the root node
+
+	const zoom = d3
+		.zoom()
+		.scaleExtent([0.1, 4])
+		.on('zoom', function (event) {
+			g.attr('transform', event.transform);
+		});
+
+	svg.call(zoom).call(
+		zoom.transform,
+		d3.zoomIdentity.translate(width / 2, height / 2)
+	);
+
+	const root = d3.hierarchy(mindmapData);
+	const treeLayout = d3
+		.tree()
+		.size([2 * Math.PI, width / 2 - 100])
+		.separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth);
+
+	treeLayout(root);
+
+	const toClassName = (str) => {
+		if (!str) {
+			return '';
+		}
+		return str.toLowerCase().replace(/[^a-zA-Z0-9\-]/g, '-');
+	};
+
+	const link = g
+		.selectAll('.link')
+		.data(root.links())
+		.enter()
+		.append('line')
+		.attr('class', 'link')
+		.attr('x1', (d) => radialPoint(d.source.x, d.source.y)[0])
+		.attr('y1', (d) => radialPoint(d.source.x, d.source.y)[1])
+		.attr('x2', (d) => radialPoint(d.target.x, d.target.y)[0])
+		.attr('y2', (d) => radialPoint(d.target.x, d.target.y)[1]);
+
+	const node = g
+		.selectAll('.node')
+		.data(root.descendants())
+		.enter()
+		.append('g')
+		.attr('class', (d) =>
+			[
+				'node',
+				toClassName(d.data.key),
+				d.data.state === 'OPEN' ? 'open' : 'closed',
+			].join(' ')
+		)
+		.attr(
+			'transform',
+			(d) =>
+				`translate(${radialPoint(d.x, d.y)[0]},${
+					radialPoint(d.x, d.y)[1]
+				})`
+		);
+
+	const maxTitleLength = 30;
+	let asTitle = (title) =>
+		title.substring(0, maxTitleLength) +
+		(title.length > maxTitleLength ? '...' : '');
+	node.append('rect')
+		.attr('width', (d) => asTitle(d.data.title).length * 8 + 20) // Dynamically set width based on text length
+		.attr('height', 30)
+		.attr('x', (d) => -(asTitle(d.data.title).length * 8 + 20) / 2) // Center the rectangle
+		.attr('y', -15)
+		.on('click', handleHighlight);
+
+	node.append('a')
+		.attr('xlink:href', (d) => d.data.url) // Assuming href is based on node name
+		.attr('target', '_blank')
+		.append('text')
+		.attr('dy', 5)
+		.attr('text-anchor', 'middle')
+		.text((d) => asTitle(d.data.title));
+
+	// ==== Details popup ====
+	// const visiblePopups = [];
+	// function handleClick(event, d) {
+	//     const clickedNode = d3.select(this);
+	//     if (clickedNode.select("foreignObject").size() > 0) {
+	//         const child = clickedNode.select("foreignObject");
+	//         child.remove();
+	//         if(visiblePopups.includes(child)) {
+	//             visiblePopups.splice(visiblePopups.indexOf(child), 1);
+	//         }
+	//         return;
+	//     }
+
+	//     while (visiblePopups.length > 0) {
+	//         visiblePopups.pop().remove();
+	//     }
+
+	//     const foreignContent = clickedNode.append("foreignObject")
+	//         .attr("width", d => d.data.name.length * 8 + 20) // Dynamically set width based on text length
+	//         .attr("height", 30)
+	//         .attr("x", d => -(d.data.name.length * 8 + 20) / 2) // Center the rectangle
+	//         .attr("y", 15); // Position below the current rect
+
+	//     foreignContent.append("xhtml:div")
+	//         .style("width", "100%")
+	//         .style("height", "100%")
+	//         .html("<p>Foreign Content</p>");
+	//     visiblePopups.push(foreignContent);
+	// }
+
+	// ==== Highlight part of the mindmap ====
+	function* iterNodes(node) {
+		yield node;
+		if (node.children) {
+			for (const child of node.children) {
+				yield child;
+				yield* iterNodes(child);
+			}
+		}
+	}
+	function handleHighlight(event, node) {
+		if (
+			d3
+				.selectAll(`.node.${toClassName(node.data.key)}`)
+				.classed('highlighted-main')
+		) {
+			clearHighlights();
+			return;
+		}
+		clearHighlights();
+
+		d3.selectAll(`.node.${toClassName(node.data.key)}`).classed(
+			'highlighted-main',
+			true
+		);
+
+		const tree = new Set(iterNodes(mindmapData));
+		const subtree = new Set(iterNodes(node.data));
+		if (subtree.size) {
+			const subTreeClasses = [...subtree].map((d) => toClassName(d.key));
+			const subTreeSelector = subTreeClasses
+				.map((d) => `.node.${d}`)
+				.join(', ');
+			d3.selectAll(subTreeSelector).classed('highlighted', true);
+		}
+
+		const restOfTree = new Set([...tree].filter((x) => !subtree.has(x)));
+		if (restOfTree.size) {
+			const restOfTreeClasses = [...restOfTree].map((d) =>
+				toClassName(d.key)
+			);
+			const restOfTreeSelector = restOfTreeClasses
+				.map((c) => `.node.${c}`)
+				.join(', ');
+			d3.selectAll(restOfTreeSelector).classed('dimmed', true);
+		}
+	}
+
+	function clearHighlights() {
+		d3.selectAll(`.node`)
+			.classed('dimmed', false)
+			.classed('highlighted', false)
+			.classed('highlighted-main', false);
+	}
+
+	let currentTransform = d3.zoomIdentity;
+
+	svg.call(zoom).on('zoom', function (event) {
+		svg.attr('transform', event.transform);
+		currentTransform = event.transform;
+	});
+
+	function radialPoint(x, y) {
+		return [y * Math.cos(x - Math.PI / 2), y * Math.sin(x - Math.PI / 2)];
+	}
+
+	const refreshButton = document.createElement('button');
+	refreshButton.innerText = 'Refresh Data';
+	refreshButton.style.position = 'absolute';
+	refreshButton.style.top = '10px';
+	refreshButton.style.right = '10px';
+	refreshButton.addEventListener('click', () => {
+		localStorage.removeItem('mindmapData');
+		location.reload();
+	});
+	document.body.appendChild(refreshButton);
+}
+boot();
diff --git a/packages/meta/src/mindmap/v1/style.css b/packages/meta/src/mindmap/v1/style.css
new file mode 100644
index 0000000000..215ae4b7b4
--- /dev/null
+++ b/packages/meta/src/mindmap/v1/style.css
@@ -0,0 +1,81 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#mindmap {
+	width: 100vw;
+	height: 100vh;
+	background: white;
+}
+
+.node {
+	cursor: pointer;
+	rect {
+		stroke-width: 2;
+		rx: 5;
+		ry: 5;
+		fill: white;
+		stroke: white;
+	}
+	text {
+		text-overflow: ellipsis;
+	}
+}
+
+.node.open rect {
+	fill: white;
+	stroke: rgb(31, 136, 61);
+}
+
+.node.closed {
+	rect {
+		/* fill: rgb(130, 80, 223); */
+		stroke: rgb(130, 80, 223);
+	}
+	text {
+		fill: rgb(130, 80, 223);
+	}
+}
+
+.node:hover rect {
+	fill: #f0f0f0; /* Lighter color on hover */
+}
+
+.node.highlighted rect {
+	stroke: lightgreen;
+}
+.node.highlighted-main rect {
+	fill: lightgreen;
+}
+.node.highlighted-main text {
+	font-weight: bold;
+}
+
+.node.dimmed rect {
+	fill: #f0f0f0; /* Dimmed color */
+	stroke: #f3f3f3;
+}
+
+.node text {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, sans-serif;
+	font-size: 12px;
+	fill: #333;
+}
+
+.link {
+	stroke: #ccc;
+	stroke-width: 2; /* Thicker edges */
+}
+
+.popup {
+	position: absolute;
+	background: white;
+	border: 1px solid #ccc;
+	padding: 5px;
+	display: none;
+	z-index: 10;
+	pointer-events: none;
+}
diff --git a/packages/meta/src/mindmap/v2/fetch-mindmap-data.js b/packages/meta/src/mindmap/v2/fetch-mindmap-data.js
new file mode 100644
index 0000000000..3b10ec72e9
--- /dev/null
+++ b/packages/meta/src/mindmap/v2/fetch-mindmap-data.js
@@ -0,0 +1,230 @@
+const shouldRebuild =
+	new URLSearchParams(window.location.search).get('rebuild') === 'true';
+
+let __moduleGithubToken = localStorage.getItem('GITHUB_TOKEN');
+if (!__moduleGithubToken) {
+	alert(
+		'Please save your GitHub token in localStorage.GITHUB_TOKEN before running this script.'
+	);
+}
+const repos = [
+	'wordpress/wordpress-playground',
+	'wordpress/playground-tools',
+	'wordpress/blueprints',
+	'wordpress/blueprints-library',
+	'adamziel/playground-docs-workflow',
+	'adamziel/site-transfer-protocol',
+];
+
+const comparableKey = (str) => str.toLowerCase();
+
+const graphqlQuery = async (query, variables) => {
+	const headers = {
+		'Content-Type': 'application/json',
+	};
+	if (__moduleGithubToken) {
+		headers['Authorization'] = `Bearer ${__moduleGithubToken}`;
+	}
+	const response = await fetch('https://api.github.com/graphql', {
+		method: 'POST',
+		headers,
+		body: JSON.stringify({ query, variables }),
+	});
+	return response.json();
+};
+
+async function* iterateIssuesPRs(repo, labels = []) {
+	const query = `
+        query GetProjects($cursor: String!, $query: String!) {
+            search(query: $query, first: 100, type: ISSUE, after: $cursor) {
+                pageInfo {
+                    hasNextPage
+                    endCursor
+                }
+                edges {
+                    node {
+                        ... on Issue {
+                            number
+                            title
+                            url
+                            body
+                            state
+                            repository {
+                                nameWithOwner
+                            }
+                            labels(first: 10) {
+                                nodes {
+                                    name
+                                }
+                            }
+                        }
+                        ... on PullRequest {
+                            number
+                            title
+                            url
+                            body
+                            state
+                            repository {
+                                nameWithOwner
+                            }
+                            labels(first: 10) {
+                                nodes {
+                                    name
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    `;
+
+	let cursor = '';
+	do {
+		const labelQuery = labels.map((label) => `"${label}"`).join(',');
+		const variables = {
+			cursor,
+			query:
+				`repo:${repo}` + (labels.length ? ` label:${labelQuery}` : ''),
+		};
+
+		const response = await graphqlQuery(query, variables);
+		const edges = response.data.search.edges;
+		for (const edge of edges) {
+			if (edge.node) {
+				const item = edge.node;
+				const key = comparableKey(
+					`${item.repository.nameWithOwner}#${item.number}`
+				);
+				item.key = key;
+				item.title = item.title.trim().replace(/^Tracking: /, '');
+				yield edge.node;
+			}
+		}
+		if (!response.data.search.pageInfo.hasNextPage) {
+			break;
+		}
+		cursor = response.data.search.pageInfo.endCursor;
+	} while (true);
+}
+
+const nodesCacheKey = 'nodes_cache';
+
+const fetchData = async () => {
+	let allNodes = {};
+	const allNodesArray = [];
+	for (const repo of repos) {
+		for await (const item of iterateIssuesPRs(repo)) {
+			allNodes[item.key] = item;
+		}
+		for await (const item of iterateIssuesPRs(repo, [
+			'[Type] Mindmap Node',
+			'[Type] Mindmap Tree',
+		])) {
+			allNodes[item.key] = item;
+		}
+	}
+	return allNodes;
+};
+
+const getConnectedNodes = (issue) => {
+	const currentRepo = issue.repository.nameWithOwner;
+	let connections = [];
+
+	const regex1 =
+		/\bhttps:\/\/github.com\/([^\/]+)\/([^\/]+)\/(?:issues|pull)\/(\d+)\b/g;
+	const regex2 = /\b#(\d+)\b/g;
+	let match;
+
+	while ((match = regex1.exec(issue.body)) !== null) {
+		connections.push(`${match[1]}/${match[2]}#${match[3]}`);
+	}
+
+	while ((match = regex2.exec(issue.body)) !== null) {
+		connections.push(`${currentRepo}#${match[1]}`);
+	}
+
+	return connections.map(comparableKey);
+};
+
+const buildEdges = ({ allNodes, rootKey, isEdge }) => {
+	const seen = {};
+	const allEdges = {};
+
+	const preorderTraversal = (currentNode) => {
+		const relatedIssueKeys = getConnectedNodes(currentNode).filter(
+			(edgeKey) => isEdge(currentNode.key, edgeKey)
+		);
+
+		for (const relatedKey of relatedIssueKeys) {
+			if (!allNodes[relatedKey]) continue;
+			if (seen[relatedKey]) continue;
+			seen[relatedKey] = true;
+
+			if (!allEdges[currentNode.key]) {
+				allEdges[currentNode.key] = [];
+			}
+
+			allEdges[currentNode.key].push(relatedKey);
+			preorderTraversal(allNodes[relatedKey]);
+		}
+	};
+
+	preorderTraversal(allNodes[rootKey]);
+	return allEdges;
+};
+
+const buildTree = (allNodes, allEdges, rootKey) => {
+	const node = { ...allNodes[rootKey] };
+	const childrenKeys = allEdges[rootKey] || [];
+	node.children = childrenKeys.map((childKey) =>
+		buildTree(allNodes, allEdges, childKey)
+	);
+	return node;
+};
+
+export const fetchMindmapData = async () => {
+	const allNodes = await fetchData();
+	const isEdge = (fromKey, toKey) => {
+		if (mindmapTrees[fromKey]) {
+			return true;
+		}
+		if (mindmapNodes[fromKey] && mindmapNodes[toKey]) {
+			return true;
+		}
+		return false;
+	};
+
+	const mindmapTrees = {};
+	const mindmapNodes = {};
+	for (const key in allNodes) {
+		if (
+			allNodes[key].labels.nodes.some(
+				(label) => label.name === '[Type] Mindmap Tree'
+			)
+		) {
+			mindmapTrees[key] = allNodes[key];
+			mindmapNodes[key] = allNodes[key];
+		} else if (
+			allNodes[key].labels.nodes.some(
+				(label) => label.name === '[Type] Mindmap Node'
+			)
+		) {
+			mindmapNodes[key] = allNodes[key];
+		}
+	}
+
+	const rootKey = 'wordpress/wordpress-playground#525';
+	const allEdges = buildEdges({
+		allNodes,
+		rootKey,
+		isEdge,
+	});
+	const tree = buildTree(allNodes, allEdges, rootKey);
+	console.log({
+		allNodes,
+		tree,
+	});
+
+	return tree;
+};
diff --git a/packages/meta/src/mindmap/v2/index.html b/packages/meta/src/mindmap/v2/index.html
new file mode 100644
index 0000000000..a9ddbb3c96
--- /dev/null
+++ b/packages/meta/src/mindmap/v2/index.html
@@ -0,0 +1,489 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Mind Map</title>
+
+		<style>
+			.node {
+				/* stroke: black; */
+				cursor: pointer;
+				rect {
+					rx: 4;
+					ry: 4;
+					stroke-width: 2;
+					fill: white;
+					stroke: white;
+				}
+				text {
+					text-overflow: ellipsis;
+				}
+			}
+
+			.node.open rect {
+				fill: white;
+				stroke: rgb(31, 136, 61);
+			}
+
+			.node.closed {
+				rect {
+					/* fill: rgb(130, 80, 223); */
+					stroke: rgb(130, 80, 223);
+				}
+				text {
+					fill: rgb(130, 80, 223);
+				}
+			}
+
+			.node:hover rect {
+				fill: #f0f0f0; /* Lighter color on hover */
+			}
+
+			.node.highlighted rect {
+				stroke: lightgreen;
+			}
+			.node.highlighted-main rect {
+				fill: lightgreen;
+			}
+			.node.highlighted-main text {
+				font-weight: bold;
+			}
+
+			.node.dimmed rect {
+				fill: #f0f0f0; /* Dimmed color */
+				stroke: #f3f3f3;
+			}
+
+			.node text {
+				/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                    'Helvetica Neue', Arial, sans-serif;
+                font-size: 12px; */
+				fill: #333;
+			}
+			.node text {
+				font: 10px sans-serif;
+			}
+
+			/* .link {
+                fill: none;
+                stroke: #ccc;
+                stroke-width: 1.5px;
+            } */
+
+			html,
+			body {
+				margin: 0;
+				padding: 0;
+				border: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<svg width="100%" height="100%"></svg>
+		<script src="https://d3js.org/d3.v6.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.0.0/build/d3-flextree.min.js"></script>
+		<script>
+			const svgElement = document.querySelector('svg');
+			function drawSvg(treeData) {
+				var width = window.innerWidth - 20,
+					height = window.innerHeight - 20;
+
+				// append the svg object to the body of the page
+
+				const initialTranslate = [100, height / 2];
+				const svg = d3.select(svgElement);
+				const g = svg
+					.attr('width', width)
+					.attr('height', height)
+					.append('g')
+					.attr(
+						'transform',
+						`translate(${initialTranslate[0]},${initialTranslate[1]})`
+					);
+
+				// Add zooming and panning functionality
+				const zoom = d3
+					.zoom()
+					.scaleExtent([0.1, 10])
+					.on('zoom', zoomed);
+
+				svg.call(zoom);
+
+				function zoomed(event) {
+					g.attr(
+						'transform',
+						`translate(${initialTranslate[0] + event.transform.x},${
+							initialTranslate[1] + event.transform.y
+						}) scale(${event.transform.k})`
+					);
+				}
+
+				const NodeSizer = {
+					textCache: {},
+
+					rectPadding: {
+						top: 5,
+						right: 10,
+						bottom: 5,
+						left: 10,
+					},
+
+					getNodeSize(text) {
+						const bbox = NodeSizer.getTextSize(text);
+						const size = {
+							width:
+								bbox.width +
+								NodeSizer.rectPadding.left +
+								NodeSizer.rectPadding.right,
+							height:
+								bbox.height +
+								NodeSizer.rectPadding.top +
+								NodeSizer.rectPadding.bottom,
+						};
+						return size;
+					},
+
+					getTextSize(text) {
+						if (text in NodeSizer.textCache) {
+							return NodeSizer.textCache[text];
+						}
+						const g = svg.append('g').attr('class', 'node');
+						const textNode = g
+							.append('text')
+							.attr('x', 0)
+							.attr('y', 0)
+							.text(text);
+						const bbox = textNode.node().getBBox();
+						g.remove();
+						NodeSizer.textCache[text] = bbox;
+						return bbox;
+					},
+				};
+
+				const duration = 750;
+				let i = 0,
+					root = d3.hierarchy(treeData, function (d) {
+						return d.children;
+					});
+
+				// Collapse after second level
+				// root.children.forEach(collapse);
+				root.x0 = 0;
+				root.y0 = 0;
+
+				// Reverse size parameters, in order to maintain order in horizontal layout
+				loopOverHierarchy(treeData, (d) => {
+					const size = NodeSizer.getNodeSize(d.title);
+					d.boxSize = [size.height, size.width];
+					d._size = d.size = [d.boxSize[0] + 10, d.boxSize[1] + 100];
+					// if (Array.isArray(d.size)) {
+					// 	if (!d._size) d._size = d.size.slice();
+					// 	d.size = d._size.slice().reverse();
+					// }
+				});
+
+				const flexLayout = d3.flextree();
+
+				update(root);
+
+				// Collapse the node and all it's children
+				function collapse(d) {
+					if (d.children) {
+						d._children = d.children;
+						d._children.forEach(collapse);
+						d.children = null;
+					}
+				}
+
+				function loopOverHierarchy(d, callback) {
+					callback(d);
+					if (d.children)
+						d.children.forEach((c) =>
+							loopOverHierarchy(c, callback)
+						);
+					if (d._children)
+						d._children.forEach((c) =>
+							loopOverHierarchy(c, callback)
+						);
+				}
+
+				function update(source) {
+					// Assigns the x and y position to the nodes
+					var treeData = flexLayout(root);
+
+					// Switch x and y coordinates for horizontal layout
+					treeData.each((d) => {
+						const x = d.x;
+						d.x = d.y;
+						d.y = x;
+					});
+
+					// Compute the new tree layout.
+					var nodes = treeData.descendants().reverse(),
+						links = treeData.descendants().slice(1);
+
+					// ****************** Nodes section ***************************
+
+					// Update the nodes...
+					var node = g
+						.selectAll('g.node')
+						.data(nodes, (d) => d.id || (d.id = ++i));
+
+					// Enter any new modes at the parent's previous position.
+					var nodeEnter = node
+						.enter()
+						.append('g')
+						.attr('class', (d) =>
+							[
+								'node',
+								d.data.state === 'OPEN' ? 'open' : 'closed',
+							].join(' ')
+						)
+						.attr('transform', function (d) {
+							return (
+								'translate(' + source.x0 + ',' + source.y0 + ')'
+							);
+						});
+					// .on('click', click);
+
+					nodeEnter
+						.append('rect')
+						.attr('class', 'node')
+						.attr('width', 1e-6)
+						.attr('height', 1e-6);
+
+					// Add labels for the nodes
+					nodeEnter
+						.append('a')
+						.attr('xlink:href', (d) => d.data.url) // Assuming href is based on node name
+						.attr('target', '_blank')
+						.append('text')
+						.attr('dy', '0.35em')
+						.attr('y', (d) => (d.data.size[0] - 10) / 2)
+						.attr('x', NodeSizer.rectPadding.left)
+						.text(function (d) {
+							return d.data.title;
+						});
+
+					// UPDATE
+					var nodeUpdate = nodeEnter
+						.merge(node)
+						.attr('fill', '#fff')
+						.style('font', '12px sans-serif');
+
+					// Transition to the proper position for the node
+					nodeUpdate
+						.transition()
+						.duration(duration)
+						.attr('transform', function (event, i, arr) {
+							const d = d3.select(this).datum();
+							return 'translate(' + d.x + ',' + d.y + ')';
+						});
+
+					// Update the node attributes and style
+					nodeUpdate
+						.select('rect.node')
+						.attr('width', (d) => d.data.boxSize[1])
+						.attr('height', (d) => d.data.boxSize[0])
+						.attr('cursor', 'pointer');
+
+					// Remove any exiting nodes
+					var nodeExit = node
+						.exit()
+						.transition()
+						.duration(duration)
+						.attr('transform', function (event, i, arr) {
+							const d = d3.select(this).datum();
+							return (
+								'translate(' + source.x + ',' + source.y + ')'
+							);
+						})
+						.remove();
+
+					// On exit reduce the node circles size to 0
+					// nodeExit.select('rect').attr('width', 1e-6).attr('height', 1e-6);
+
+					// On exit reduce the opacity of text labels
+					nodeExit.select('text').style('fill-opacity', 1e-6);
+
+					// ****************** links section ***************************
+
+					// Update the links...
+					var link = g
+						.selectAll('path.link')
+						.data(links, function (d) {
+							return d.id;
+						});
+
+					// Enter any new links at the parent's previous position.
+					var linkEnter = link
+						.enter()
+						.insert('path', 'g')
+						.attr('class', 'link')
+						.attr('d', function (d) {
+							var o = {
+								x: source.x0,
+								y: source.y0,
+							};
+							return diagonal(o, o);
+						});
+
+					// UPDATE
+					var linkUpdate = linkEnter
+						.merge(link)
+						.attr('fill', 'none')
+						.attr('stroke', '#ccc')
+						.attr('stroke-width', '2px');
+
+					// Transition back to the parent element position
+					linkUpdate
+						.transition()
+						.duration(duration)
+						.attr('d', function (d) {
+							return diagonal(d, d.parent);
+						});
+
+					// Remove any exiting links
+					var linkExit = link
+						.exit()
+						.transition()
+						.duration(duration)
+						.attr('d', function (event, i, arr) {
+							const d = d3.select(this).datum();
+							var o = {
+								x: source.x,
+								y: source.y,
+							};
+							return diagonal(o, o);
+						})
+						.remove();
+
+					// Store the old positions for transition.
+					nodes.forEach(function (d) {
+						d.x0 = d.x;
+						d.y0 = d.y;
+					});
+
+					function diagonal2(source, target) {
+						// Enter or exit transition with a custom data source
+						if (Object.keys(source).length === 2) {
+							return diagonalPath(source, target);
+						}
+
+						const source2 = {
+							y: source.x,
+							x: source.y + source.data.size[0],
+						};
+						const target2 = { y: target.x, x: target.y };
+
+						return diagonalPath(source2, target2);
+					}
+					function diagonalPath(source, target) {
+						return `M${source.y},${source.x}C${
+							(source.y + target.y) / 2
+						},${source.x} ${(source.y + target.y) / 2},${
+							target.x
+						} ${target.y},${target.x}`;
+					}
+					// Creates a curved (diagonal) path from parent to the child nodes
+					function diagonal(s, t) {
+						// Define source and target x,y coordinates
+						const x = s.x;
+						const y =
+							s.y +
+							(s?.data?.boxSize ? s.data.boxSize[0] : 0) / 2 -
+							1;
+						const ex =
+							t.x + (t?.data?.boxSize ? t.data.boxSize[1] : 0);
+						const ey =
+							t.y +
+							(t?.data?.boxSize ? t.data.boxSize[0] : 0) / 2 -
+							1;
+
+						// Values in case of top reversed and left reversed diagonals
+						let xrvs = ex - x < 0 ? -1 : 1;
+						let yrvs = ey - y < 0 ? -1 : 1;
+
+						// Define preferred curve radius
+						let rdef = 35;
+
+						// Reduce curve radius, if source-target x space is smaller
+						let r =
+							Math.abs(ex - x) / 2 < rdef
+								? Math.abs(ex - x) / 2
+								: rdef;
+
+						// Further reduce curve radius, is y space is more small
+						r = Math.abs(ey - y) / 2 < r ? Math.abs(ey - y) / 2 : r;
+
+						// Defin width and height of link, excluding radius
+						let h = Math.abs(ey - y) / 2 - r;
+						let w = Math.abs(ex - x) / 2 - r;
+
+						// Build and return custom arc command
+						return `
+			            M ${x} ${y}
+			            L ${x + w * xrvs} ${y}
+			            C ${x + w * xrvs + r * xrvs} ${y}
+			              ${x + w * xrvs + r * xrvs} ${y}
+			              ${x + w * xrvs + r * xrvs} ${y + r * yrvs}
+			            L ${x + w * xrvs + r * xrvs} ${ey - r * yrvs}
+			            C ${x + w * xrvs + r * xrvs}  ${ey}
+			              ${x + w * xrvs + r * xrvs}  ${ey}
+			              ${ex - w * xrvs}  ${ey}
+			            L ${ex} ${ey}
+			 `;
+					}
+
+					// Toggle children on click.
+					function click(event, d) {
+						if (d.children) {
+							d._children = d.children;
+							d.children = null;
+						} else {
+							d.children = d._children;
+							d._children = null;
+						}
+						update(d);
+					}
+				}
+
+				return svg.node();
+			}
+
+			async function run() {
+				const { fetchMindmapData } = await import(
+					'./fetch-mindmap-data.js'
+				);
+				const isLocalhost =
+					window.location.hostname === 'localhost' ||
+					window.location.hostname === '127.0.0.1';
+				let mindmapData = null;
+				if (localStorage.getItem('mindmapData')) {
+					mindmapData = JSON.parse(
+						localStorage.getItem('mindmapData')
+					);
+				} else {
+					mindmapData = await fetchMindmapData();
+					localStorage.setItem(
+						'mindmapData',
+						JSON.stringify(mindmapData)
+					);
+				}
+				drawSvg(mindmapData);
+			}
+			run();
+
+			const refreshButton = document.createElement('button');
+			refreshButton.innerText = 'Refresh Data';
+			refreshButton.style.position = 'absolute';
+			refreshButton.style.top = '10px';
+			refreshButton.style.right = '10px';
+			refreshButton.addEventListener('click', () => {
+				localStorage.removeItem('mindmapData');
+				location.reload();
+			});
+			document.body.appendChild(refreshButton);
+		</script>
+	</body>
+</html>
diff --git a/packages/meta/src/project_board_automation/GitHubApi.php b/packages/meta/src/project_board_automation/GitHubApi.php
index c7f63b1bf3..eb334e6fcf 100644
--- a/packages/meta/src/project_board_automation/GitHubApi.php
+++ b/packages/meta/src/project_board_automation/GitHubApi.php
@@ -10,7 +10,7 @@ public function __construct( $token ) {
 		$this->token = $token;
 	}
 
-	public function graphqlQuery( $query, $variables = [] ) {
+	public function graphqlQuery( $query, $variables = [], $json_assoc = true ) {
 		$ch = curl_init();
 		curl_setopt( $ch, CURLOPT_URL, "https://api.github.com/graphql" );
 		curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
@@ -23,10 +23,17 @@ public function graphqlQuery( $query, $variables = [] ) {
 		] );
 		$response = curl_exec( $ch );
 		curl_close( $ch );
-		$response_data = json_decode( $response, true );
-		if ( isset( $response_data['errors'] ) || ( isset( $response['status'] ) && $response['status'] !== 200 ) ) {
-			var_dump( $response_data );
-			throw new Exception( 'GraphQL query failed' );
+		$response_data = json_decode( $response, $json_assoc );
+		if ($json_assoc) {
+			if (isset($response_data['errors']) || (isset($response['status']) && $response['status'] !== 200)) {
+				var_dump($response_data);
+				throw new Exception('GraphQL query failed');
+			}
+		} else {
+			if (isset($response_data->errors) || (isset($response->status) && $response->status !== 200)) {
+				var_dump($response_data);
+				throw new Exception('GraphQL query failed');
+			}
 		}
 
 		return $response_data;
@@ -61,15 +68,16 @@ public function getIssueIdForProjectItemId( $projectItemId ) {
 
 	public function getProjectItemForIssueId($projectId, $issueId)
 	{
-		$projectItemSelection = self::PROJECT_ITEM_SELECTION;
-		$items = $this->graphqlQuery(<<<Q
-			query(\$id: ID!) {
-				node(id: \$id) {
+		$items = $this->graphqlQuery(
+			self::FRAGMENT_BASIC_PROJECT_INFO[1] .
+			<<<'Q'
+			query($id: ID!) {
+				node(id: $id) {
 					... on Issue {
 						id
 						projectItems(first:50) {
 							nodes {
-								$projectItemSelection
+								...BasicProjectInfo
 								project {
 									id
 								}
@@ -80,7 +88,7 @@ public function getProjectItemForIssueId($projectId, $issueId)
 						id
 						projectItems(first:50) {
 							nodes {
-								$projectItemSelection
+								...BasicProjectInfo
 								project {
 									id
 								}
@@ -133,26 +141,27 @@ static public function extractProjectItemFieldValueById($projectItem, $fieldId)
 		}
 	}
 
-	public function iterateProjectItems($projectId)
+	public function iterateProjectItems($projectId, $fragment=self::FRAGMENT_BASIC_PROJECT_INFO)
 	{
 		$perPage = 100;
-		$projectItemSelection = self::PROJECT_ITEM_SELECTION;
-		$query = <<<GRAPHQL
-		query(\$projectId: ID!, \$perPage: Int, \$cursor: String) {
-			node(id: \$projectId) {
-				... on ProjectV2 {
-					items(first: \$perPage, after: \$cursor) {
-						edges {
-							cursor
-							node {
-								$projectItemSelection
+		$query = 
+			$fragment[1] .
+			<<<GRAPHQL
+			query(\$projectId: ID!, \$perPage: Int, \$cursor: String) {
+				node(id: \$projectId) {
+					... on ProjectV2 {
+						items(first: \$perPage, after: \$cursor) {
+							edges {
+								cursor
+								node {
+									...{$fragment[0]}
+								}
 							}
 						}
 					}
 				}
 			}
-		}
-		GRAPHQL;
+			GRAPHQL;
 
 		$cursor = '';
 		do {
@@ -730,92 +739,115 @@ public function getFieldIdAndValueByName( $projectId, $field_name, $field_value
 		return [ null, null ];
 	}
 
-	public const PROJECT_ITEM_SELECTION = <<<'GRAPHQL'
-		id
-		fieldValues(first: 10) {
-			nodes {
-				... on ProjectV2ItemFieldSingleSelectValue {
-					field {
-						... on ProjectV2SingleSelectField {
-							id
-							name
-						}
-					}
-					updatedAt
-					name
-					id
+	public const FRAGMENT_EXTENDED_PROJECT_INFO = [
+		'ExtendedProjectInfo',
+		self::FRAGMENT_BASIC_PROJECT_INFO[1] .
+		<<<'GRAPHQL'
+		fragment ExtendedProjectInfo on ProjectV2Item {
+			...BasicProjectInfo
+			content {
+				... on Issue {
+					body
 				}
-				... on ProjectV2ItemFieldLabelValue {
-					field {
-						... on ProjectV2Field {
-							id
-							name
+				... on PullRequest {
+					body
+				}
+			}
+		}
+		GRAPHQL
+	];
+
+	public const FRAGMENT_BASIC_PROJECT_INFO = [
+		'BasicProjectInfo',
+		<<<'GRAPHQL'
+		fragment BasicProjectInfo on ProjectV2Item {
+			id
+			fieldValues(first: 10) {
+				nodes {
+					... on ProjectV2ItemFieldSingleSelectValue {
+						field {
+							... on ProjectV2SingleSelectField {
+								id
+								name
+							}
 						}
+						updatedAt
+						name
+						id
 					}
-					labels(first: 20) {
-						nodes {
-							id
-							name
+					... on ProjectV2ItemFieldLabelValue {
+						field {
+							... on ProjectV2Field {
+								id
+								name
+							}
 						}
-					}
-				}
-				... on ProjectV2ItemFieldTextValue {
-					field {
-						... on ProjectV2Field {
-							id
-							name
+						labels(first: 20) {
+							nodes {
+								id
+								name
+							}
 						}
 					}
-					text
-					id
-					updatedAt
-					creator {
-						url
-					}
-				}
-				... on ProjectV2ItemFieldMilestoneValue {
-					field {
-						... on ProjectV2Field {
-							id
-							name
+					... on ProjectV2ItemFieldTextValue {
+						field {
+							... on ProjectV2Field {
+								id
+								name
+							}
 						}
-					}
-					milestone {
+						text
 						id
+						updatedAt
+						creator {
+							url
+						}
 					}
-				}
-				... on ProjectV2ItemFieldRepositoryValue {
-					field {
-						... on ProjectV2Field {
+					... on ProjectV2ItemFieldMilestoneValue {
+						field {
+							... on ProjectV2Field {
+								id
+								name
+							}
+						}
+						milestone {
 							id
-							name
 						}
 					}
-					repository {
-						id
-						url
+					... on ProjectV2ItemFieldRepositoryValue {
+						field {
+							... on ProjectV2Field {
+								id
+								name
+							}
+						}
+						repository {
+							id
+							url
+						}
 					}
 				}
 			}
-		}
-		content {
-			... on Issue {
-				id
-				number
-				title
-				repository {
-					nameWithOwner
+			content {
+				... on Issue {
+					id
+					number
+					title
+					repository {
+						nameWithOwner
+					}
 				}
-			}
-			... on PullRequest {
-				id
-				number
-				title
-				repository {
-					nameWithOwner
+				... on PullRequest {
+					id
+					number
+					title
+					repository {
+						nameWithOwner
+					}
 				}
 			}
 		}
-	GRAPHQL;
+		GRAPHQL
+	];
 
 }