首先，创建一个新的HTML文件，可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Mind Map</title><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><div id="mindMap"></div><script src="script.js"></script>
</body>
</html>在同一目录下创建一个名为 styles.css 的CSS文件，用于定义思维导图的样式。你可以根据自己的需求进行自定义样式。
#mindMap {width: 800px;height: 600px;border: 1px solid #ccc;
}如果想为思维导图添加更多的样式，可以在 styles.css 文件中进行定义。你可以根据需要自定义样式，比如节点的颜色、字体大小等。
.node {background-color: #f2f2f2;border: 1px solid #ccc;padding: 10px;font-size: 16px;text-align: center;}.node-container {display:inline-block;margin-top: 20px;margin-left: 50px;}.line {width: 0;border-left: 1px solid #ccc;position: absolute;top: 50%;left: 0;height: 100%;}在同一目录下创建一个名为 script.js 的JavaScript文件，用于实现思维导图的绘制逻辑。
document.addEventListener("DOMContentLoaded", function() {// 获取要插入思维导图的元素var mindMapContainer = document.getElementById("mindMap");// 创建思维导图的数据结构var mindMapData = {id: 1,topic: "Main Topic",children: [{id: 2,topic: "Subtopic 1",children: [{id: 4,topic: "Subtopic 1.1",children: []},{id: 5,topic: "Subtopic 1.2",children: []}]},{id: 3,topic: "Subtopic 2",children: []}]};// 调用绘制思维导图的函数drawMindMap(mindMapContainer, mindMapData);
});function drawMindMap(container, data) {// 创建主题元素var topicElement = document.createElement("div");topicElement.classList.add("node");topicElement.textContent = data.topic;// 添加主题元素到容器中container.appendChild(topicElement);// 递归处理子主题data.children.forEach(function(childData) {var childContainer = document.createElement("div");childContainer.classList.add("node-container");container.appendChild(childContainer);// 创建连线元素var lineElement = document.createElement("div");lineElement.classList.add("line");container.appendChild(lineElement);// 递归绘制子主题drawMindMap(childContainer, childData);});
}
将HTML文件、CSS文件和JavaScript文件放在同一目录下，然后在浏览器中打开HTML文件，即可看到绘制出的思维导图。
上面的代码只是一个非常简单的示例，最终效果并不美观，只是用于演示思维导图的绘制过程。你可以根据自己的需求和设计风格进行修改和扩展，使其符合你的实际应用场景。
)
