How to use html, including css, js to draw a mind map? What methods are available?

First, create a new HTML file, you can use any text editor. Add the necessary tags and structure to the file to define the content and layout of the web page.

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

Create a CSS file named in the same directory styles.cssto define the style of the mind map. You can customize the style according to your needs.

#mindMap {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
}

If you want to add more styles to the mind map, you can styles.cssdefine them in the file. You can customize styles according to your needs, such as node color, font size, etc.

  .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%;
    }

Create a JavaScript file named in the same directory script.jsto implement the drawing logic of the mind map.

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

Put the HTML file, CSS file and JavaScript file in the same directory, and then open the HTML file in the browser to see the drawn mind map.

The above code is just a very simple example, and the final effect is not beautiful, it is only used to demonstrate the drawing process of the mind map. You can modify and expand it according to your own needs and design styles to make it match your actual application scenarios.

How to use html, including css, js to draw a mind map? What methods are available?

Guess you like