求助，如何高效实现代码绘图？

Question

求助，现有一需求是绘制一个固定流程的流程图，样例图如下：

而实际图中的输入、线条更多、更复杂，请问各位大佬除了用canvas画图之外，还有什么方法能够完成图的绘制？

我使用过canvas+html写法，直线采用canvas，拐线采用div、border:none、border-radius等绘制，但代码体量非常大，寻求更高效的解决方法！

（ps:矩形图在实际中使用的是图片）

Answer 1

要绘制复杂的流程图，除了使用Canvas和HTML的手动绘制方法外，还有一些更高效的工具和库可以帮助你完成这一任务。以下是推荐的方法：

D3.js 是一个功能强大的JavaScript库，可以帮助你以数据驱动的方式生成动态和交互式图表，包括流程图。

// 引入D3.js库
<script src="https://d3js.org/d3.v6.min.js"></script>

// 绘制流程图示例
<script>
  const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

  const data = [
    {name: "开始", x: 50, y: 50},
    {name: "步骤1", x: 150, y: 150},
    {name: "步骤2", x: 250, y: 250},
    // ... 继续添加节点
  ];

  const links = [
    {source: 0, target: 1},
    {source: 1, target: 2},
    // ... 继续添加链接
  ];

  const nodes = svg.selectAll("circle")
      .data(data)
      .enter().append("circle")
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 20);

  const edges = svg.selectAll("line")
      .data(links)
      .enter().append("line")
      .attr("x1", d => data[d.source].x)
      .attr("y1", d => data[d.source].y)
      .attr("x2", d => data[d.target].x)
      .attr("y2", d => data[d.target].y)
      .attr("stroke", "black");
</script>