前端流程图框架11个：开发组态图、思维导图、拓扑图必备

在现代前端开发中，流程图的使用愈加广泛。无论是开发组态图、思维导图还是拓扑图，良好的可视化工具都能帮助我们更好地理解项目、组织思路并简化沟通。本文将介绍11个必备的前端流程图框架，并给出一些代码示例。

1. Mermaid

Mermaid 是一个基于文本的图表生成工具，支持各种图表的创建，包括流程图、序列图、甘特图等。你可以在 Markdown 文档中直接嵌入 Mermaid 语法。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.js';
  mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
  graph TD;
    A[开始] --> B{是否继续};
    B -- 是 --> C[继续];
    B -- 否 --> D[结束];
</div>

2. Drawflow

Drawflow 是一个轻量级的流程图框架，适用于创建动态工作流和可视化 UI。它支持节点可视化和连线功能。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.js"></script>

<div id="drawflow" style="width: 800px; height: 600px;"></div>
<script>
  const container = document.getElementById('drawflow');
  const drawflow = new Drawflow(container);
  drawflow.start();
  drawflow.addNode('起始','start','node-start',150,100);
</script>

3. JointJS

JointJS 是一个功能强大的 JavaScript 库，适用于构建交互式图表和流程图。它支持丰富的图形元素和事件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/joint/3.3.1/joint.min.js"></script>

<div id="paper" style="width: 600px; height: 400px;"></div>
<script>
  var graph = new joint.dia.Graph();
  var paper = new joint.ui.Paper({
    el: document.getElementById('paper'),
    model: graph,
    width: 600,
    height: 400,
    gridSize: 1
  });

  var rect = new joint.shapes.standard.Rectangle();
  rect.position(100, 30);
  rect.resize(100, 40);
  rect.attr({ body: { fill: 'blue' }, label: { text: '开始', fill: 'white' } });
  rect.addTo(graph);
</script>

4. D3.js

D3.js 是一个非常强大的数据可视化库，能够生成高度定制化的图表。虽然需要一些配置，但灵活性极大。

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="600" height="400"></svg>
<script>
  const svg = d3.select("svg");
  const data = [{x: 10, y: 20}, {x: 80, y: 90}];

  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", 5)
    .attr("fill", "red");
</script>

5. GoJS

GoJS 是一个强大的 JavaScript 图形库，专注于图表和流程图的创建。它适用于复杂的交互和大量数据。

<script src="https://unpkg.com/gojs/release/go.js"></script>
<div id="myDiagram" style="width: 600px; height: 400px;"></div>
<script>
  const $ = go.GraphObject.make;
  const diagram = $(go.Diagram, "myDiagram");

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { fill: "lightblue" }),
      $(go.TextBlock, { margin: 10 }, new go.Binding("text"))
    );

  diagram.model = new go.GraphLinksModel([{ key: 1, text: "开始" }, { key: 2, text: "结束" }]);
</script>

6. Vis.js

Vis.js 是一个数据可视化库，支持网络图、时间线等多种图表。它易于使用，并且具有良好的交互性。

<script src="https://unpkg.com/vis-network/standalone/vis-network.min.js"></script>
<div id="mynetwork" style="width: 600px; height: 400px;"></div>
<script>
  const nodes = new vis.DataSet([
    { id: 1, label: '开始' },
    { id: 2, label: '结束' }
  ]);
  const edges = new vis.DataSet([{ from: 1, to: 2 }]);

  const container = document.getElementById('mynetwork');
  const data = { nodes, edges };
  const options = {};
  const network = new vis.Network(container, data, options);
</script>

7. jsPlumb

jsPlumb 是一个专为创建流程图、工作流图和连线布局而设计的库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsplumb/2.15.6/jsplumb.min.js"></script>
<div id="container" style="width:600px; height:400px;"></div>
<div id="item1" class="item" style="width:100px; height:100px;">开始</div>
<div id="item2" class="item" style="width:100px; height:100px;">结束</div>
<script>
  jsPlumb.ready(function() {
    const instance = jsPlumb.createInstance({ Container: "container" });
    instance.addEndpoint("item1", { anchors: ["Bottom"], isSource: true }, { uuid: "item1toitem2" });
    instance.addEndpoint("item2", { anchors: ["Top"], isTarget: true });
    instance.connect({ source: "item1", target: "item2", overlays: [["Arrow", { width: 10, length: 10, location: 1 }]] });
  });
</script>

8. ECharts

ECharts 是一个开源的图表库，支持丰富的图表类型，包括流程图，强大的交互和定制能力。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<div id="main" style="width: 600px; height: 400px;"></div>
<script>
 var myChart = echarts.init(document.getElementById('main'));
 var option = {
   series: [{
     type: 'graph',
     layout: 'none',
     data: [{ name: '开始' }, { name: '结束' }],
     links: [{ source: '开始', target: '结束' }]
   }]
 };
 myChart.setOption(option);
</script>

9. Cytoscape.js

Cytoscape.js 是面向图形和图表的 JavaScript 库，支持复杂的网络和图形显示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.6/cytoscape.min.js"></script>
<div id="cy" style="width: 600px; height: 400px;"></div>
<script>
  var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
      { data: { id: 'a', label: '开始' } },
      { data: { id: 'b', label: '结束' } },
      { data: { id: 'ab', source: 'a', target: 'b' } }
    ],
    style: [{ selector: 'node', style: { 'background-color': '#666' } }],
    layout: { name: 'grid' }
  });
</script>

10. Diagram.js

Diagram.js 是一个轻便的库，专注于创建简单的流程图和语义图。

<script src="https://unpkg.com/draw-js/dist/draw.js"></script>
<div id="diagram" style="width: 600px; height: 400px;"></div>
<script>
  const diagram = new Drawjs.Diagram({ container: document.getElementById('diagram') });
  diagram.addNode('开始', { x: 50, y: 50 });
  diagram.addNode('结束', { x: 150, y: 150 });
  diagram.addLink('开始', '结束');
</script>

11. Rough.js

Rough.js 是一个用于创建草图风格图形的库，非常适合那些需要手绘风格的流程图。

<script src="https://unpkg.com/roughjs/bundled/rough.esm.js"></script>
<div id="canvas" style="width: 600px; height: 400px;"></div>
<script>
  const rc = rough.canvas(document.getElementById('canvas'));
  rc.rectangle(50, 50, 100, 50);
  rc.line(100, 50, 100, 150);
  rc.rectangle(50, 150, 100, 50);
</script>

结语

以上11个前端流程图框架，各具特性，可广泛应用于开发组态图、思维导图及拓扑图的制作。根据项目需求的不同，可以选择适合的工具来提高工作效率，实现良好的可视化效果。