前端使用dagre-d3生成流程图的那些事儿

最新推荐文章于 2025-11-25 08:51:10 发布

原创

最新推荐文章于 2025-11-25 08:51:10 发布 · 1.1w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#js #流程图 #dagre-d3 #前端 #d3

这两天遇到这样一个需求，在前端页面展示流程图，我之前没有做过类似的需求，就来找万能的度娘了。流程图根据需求不同，展示的形式有所不同，但是本质还是一致的。经过百度搜索，我找到了几种方案，简单给大家介绍一下：

1.做能拖拽和编辑的流程图

推荐使用https://jsplumbtoolkit.com/demos.html,这个网站专门用于生成流程图，基本能满足你的所有需求

2.展示流程图，不对流程图做任何操作

（1）在html页面中使用dagre-d3，生成展示型流程图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        g.type-current>rect {
            fill: #1E9FFF;
        }

        g.type-success>rect {
            fill: green;
        }

        g.type-fail>rect {
            fill: red;
        }

        text {
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
            font-size: 14px;
        }

        .node rect {
            stroke: #999;
            fill: #fff;
            stroke-width: 1.5px;
        }

        .edgePath path {
            stroke: #333;
            stroke-width: 1.5px;
        }
    </style>