使用svg+div来画一个流程图模板

可以使用以下 HTML、CSS 和 SVG 代码来画一个简单的流程图模板：

<div style="position: relative; width: 400px; height: 200px;">
  <!-- 第一个矩形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 20px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#f00" />
    <text x="50" y="60" font-size="16" text-anchor="middle" fill="#fff">步骤1</text>
  </svg>
  <!-- 第二个矩形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 150px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#0f0" />
    <text x="50" y="60" font-size="16" text-anchor="middle" fill="#fff">步骤2</text>
  </svg>
  <!-- 第三个矩形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 280px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#00f" />
    <text x="50" y="60" font-size="16" text-anchor="middle" fill="#fff">步骤3</text>
  </svg>
  <!-- 箭头线1 -->
  <svg viewBox="0 0 400 200" style="position: absolute; left: 0; top: 0;">
    <line x1="70" y1="70" x2="150" y2="70" stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,10 L8,5 z" fill="#000" />
      </marker>
    </defs>
  </svg>
  <!-- 箭头线2 -->
  <svg viewBox="0 0 400 200" style="position: absolute; left: 0; top: 0;">
    <line x1="200" y1="70" x2="280" y2="70" stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,10 L8,5 z" fill="#000" />
      </marker>
    </defs>
  </svg>
</div>

其中，`div` 元素用来创建包裹 SVG 元素的容器，`position: relative;` 属性用来指定容器的定位方式，`width` 和 `height` 属性用来指定容器的大小。每个 SVG 元素用来创建矩形或箭头线，`viewBox` 属性用来指定 SVG 的视口大小和位置，`style` 属性用来指定 SVG 元素的定位方式和位置。矩形内部使用了 `rect` 元素和 `text` 元素，`x` 和 `y` 属性用来指定文本的位置，`font-size` 属性用来指定文本的大小，`text-anchor` 属性用来指定文本的对齐方式。箭头线用 `line` 元素来创建，`x1` 和 `y1` 属性指定了线条的起点坐标，`x2` 和 `y2` 属性指定了线条的终点坐标，`stroke` 属性指定了线条的颜色，`stroke-width` 属性指定了线条的宽度，`marker-end` 属性指定了箭头的位置和方向。箭头的形状定义方式与前面的示例相同。