AntV X6流程图绘制程序（官方示例纯javascript+html+css）

已于 2024-02-22 15:22:15 修改
阅读量5.6k 收藏 13
点赞数 5
分类专栏： 流程图 前端 文章标签： css html javascript
于 2022-08-09 17:58:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yao136/article/details/126252898
版权

使用LogicFlow 编写的流程设计 logicflow: logicflow流程图

直接拷贝可用，需要引入官方的x6.js（AntV X6）  antvx6-flow: antv x6实现流程画图 (gitee.com)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/x6.js"></script>

    <style type="text/css">
        #container {
            width: 100%;
            height: 600px;
        display: flex;
        border: 1px solid #dfe3e8;
        }
        #stencil {
        width: 180px;
        height: 100%;
        position: relative;
        border-right: 1px solid #dfe3e8;
        }
        #graph-container {
        width: calc(100% - 180px);
        height: 100%;
        }
        .x6-widget-stencil  {
        background-color: #fff;
        }
        .x6-widget-stencil-title {
        background-color: #fff;
        }
        .x6-widget-stencil-group-title {
        background-color: #fff !important;
        }
        .x6-widget-transform {
        margin: -1px 0 0 -1px;
        padding: 0px;
        border: 1px solid #239edd;
        }
        .x6-widget-transform > div {
        border: 1px solid #239edd;
        }
        .x6-widget-transform > div:hover {
        background-color: #3dafe4;
        }
        .x6-widget-transform-active-handle {
        background-color: #3dafe4;
        }
        .x6-widget-transform-resize {
        border-radius: 0;
        }
        .x6-widget-selection-inner {
        border: 1px solid #239edd;
        }
        .x6-widget-selection-box {
        opacity: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <button onclick="getJson()">点击</button>
    </div>
    <div id="container">
        <div id="stencil"></div>
        <div id="graph-container"></div>
    </div>
    
    <script>
        // #region 初始化画布
        const graph = new X6.Graph({
        container: document.getElementById('graph-container'),
        grid: true,
        mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
            modifiers: 'ctrl',
            minScale: 0.5,
            maxScale: 3,
        },
        connecting: {
            router: {
            name: 'manhattan',
            args: {
                padding: 1,
            },
            },
            connector: {
            name: 'rounded',
            args: {
                radius: 8,
            },
            },
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
            radius: 20,
            },
            createEdge() {
            return new X6.Shape.Edge({
                attrs: {
                line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {
                    name: 'block',
                    width: 12,
                    height: 8,
                    },
                },
                },
                zIndex: 0,
            })
            },
            validateConnection({ targetMagnet }) {
            return !!targetMagnet
            },
        },
        highlighting: {
            magnetAdsorbed: {
            name: 'stroke',
            args: {
                attrs: {
                fill: '#5F95FF',
                stroke: '#5F95FF',
                },
            },
            },
        },
        resizing: true,
        rotating: true,
        selecting: {
            enabled: true,
            rubberband: true,
            showNodeSelectionBox: true,
        },
        snapline: true,
        keyboard: true,
        clipboard: true,
        })
        // #endregion

        // #region 初始化 stencil
        const stencil = new X6.Addon.Stencil({
        title: '流程图',
        target: graph,
        stencilGraphWidth: 200,
        stencilGraphHeight: 180,
        collapsable: true,
        groups: [
            {
            title: '基础流程图',
            name: 'group1',
            },
            {
            title: '系统设计图',
            name: 'group2',
            graphHeight: 250,
            layoutOptions: {
                rowHeight: 70,
            },
            },
        ],
        layoutOptions: {
            columns: 2,
            columnWidth: 80,
            rowHeight: 55,
        },
        })
        document.getElementById('stencil').appendChild(stencil.container)
        // #endregion

        // #region 快捷键与事件
        // copy cut paste
        graph.bindKey(['meta+c', 'ctrl+c'], () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
            graph.copy(cells)
        }
        return false
        })
        graph.bindKey(['meta+x', 'ctrl+x'], () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
            graph.cut(cells)
        }
        return false
        })
        graph.bindKey(['meta+v', 'ctrl+v'], () => {
        if (!graph.isClipboardEmpty()) {
            const cells = graph.paste({ offset: 32 })
            graph.cleanSelection()
            graph.select(cells)
        }
        return false
        })

        //undo redo
        graph.bindKey(['meta+z', 'ctrl+z'], () => {
        if (graph.history.canUndo()) {
            graph.history.undo()
        }
        return false
        })
        graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
        if (graph.history.canRedo()) {
            graph.history.redo()
        }
        return false
        })

        // select all
        graph.bindKey(['meta+a', 'ctrl+a'], () => {
        const nodes = graph.getNodes()
        if (nodes) {
            graph.select(nodes)
        }
        })

        //delete
        graph.bindKey('backspace', () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
            graph.removeCells(cells)
        }
        })

        // zoom
        graph.bindKey(['ctrl+1', 'meta+1'], () => {
        const zoom = graph.zoom()
        if (zoom < 1.5) {
            graph.zoom(0.1)
        }
        })
        graph.bindKey(['ctrl+2', 'meta+2'], () => {
        const zoom = graph.zoom()
        if (zoom > 0.5) {
            graph.zoom(-0.1)
        }
        })

        
        // 控制连接桩显示/隐藏
        const showPorts = (ports, show) => {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
            ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
        }
        graph.on('node:mouseenter', () => {
        const container = document.getElementById('graph-container')
        const ports = container.querySelectorAll(
            '.x6-port-body',
        )
        showPorts(ports, true)
        })
        graph.on('node:mouseleave', () => {
        const container = document.getElementById('graph-container')
        const ports = container.querySelectorAll(
            '.x6-port-body',
        )
        showPorts(ports, false)
        })
        
        // #endregion

        // #region 初始化图形
        const ports = {
        groups: {
            top: {
            position: 'top',
            attrs: {
                circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                    visibility: 'hidden',
                },
                },
            },
            },
            right: {
            position: 'right',
            attrs: {
                circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                    visibility: 'hidden',
                },
                },
            },
            },
            bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                    visibility: 'hidden',
                },
                },
            },
            },
            left: {
            position: 'left',
            attrs: {
                circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                    visibility: 'hidden',
                },
                },
            },
            },
        },
        items: [
            {
            group: 'top',
            },
            {
            group: 'right',
            },
            {
            group: 'bottom',
            },
            {
            group: 'left',
            },
        ],
        }

        X6.Graph.registerNode(
        'custom-rect',
        {
            inherit: 'rect',
            width: 66,
            height: 36,
            attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
            },
            ports: { ...ports },
        },
        true,
        )

        X6.Graph.registerNode(
        'custom-polygon',
        {
            inherit: 'polygon',
            width: 66,
            height: 36,
            attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
            },
            ports: {
            ...ports,
            items: [
                {
                group: 'top',
                },
                {
                group: 'bottom',
                },
            ],
            },
        },
        true,
        )

        X6.Graph.registerNode(
        'custom-circle',
        {
            inherit: 'circle',
            width: 45,
            height: 45,
            attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
            },
            ports: { ...ports },
        },
        true,
        )

        X6.Graph.registerNode(
        'custom-image',
        {
            inherit: 'rect',
            width: 52,
            height: 52,
            markup: [
            {
                tagName: 'rect',
                selector: 'body',
            },
            {
                tagName: 'image',
            },
            {
                tagName: 'text',
                selector: 'label',
            },
            ],
            attrs: {
            body: {
                stroke: '#5F95FF',
                fill: '#5F95FF',
            },
            image: {
                width: 26,
                height: 26,
                refX: 13,
                refY: 16,
            },
            label: {
                refX: 3,
                refY: 2,
                textAnchor: 'left',
                textVerticalAnchor: 'top',
                fontSize: 12,
                fill: '#fff',
            },
            },
            ports: { ...ports },
        },
        true,
        )

        const r1 = graph.createNode({
        shape: 'custom-rect',
        label: '开始',
        attrs: {
            body: {
            rx: 20,
            ry: 26,
            },
        },
        })
        const r2 = graph.createNode({
        shape: 'custom-rect',
        label: '过程',
        })
        const r3 = graph.createNode({
        shape: 'custom-rect',
        attrs: {
            body: {
            rx: 6,
            ry: 6,
            },
        },
        label: '可选过程',
        })
        const r4 = graph.createNode({
        shape: 'custom-polygon',
        attrs: {
            body: {
            refPoints: '0,10 10,0 20,10 10,20',
            },
        },
        label: '决策',
        })
        const r5 = graph.createNode({
        shape: 'custom-polygon',
        attrs: {
            body: {
            refPoints: '10,0 40,0 30,20 0,20',
            },
        },
        label: '数据',
        })
        const r6 = graph.createNode({
        shape: 'custom-circle',
        label: '连接',
        })
        stencil.load([r1, r2, r3, r4, r5, r6], 'group1')

        const imageShapes = [
        {
            label: 'Client',
            image:
            'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
        },
        {
            label: 'Http',
            image:
            'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
        },
        {
            label: 'Api',
            image:
            'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',
        },
        {
            label: 'Sql',
            image:
            'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',
        },
        {
            label: 'Clound',
            image:
            'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',
        },
        {
            label: 'Mq',
            image:
            'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
        },
        ]
        const imageNodes = imageShapes.map((item) =>
        graph.createNode({
            shape: 'custom-image',
            label: item.label,
            attrs: {
            image: {
                'xlink:href': item.image,
            },
            },
        }),
        )
        stencil.load(imageNodes, 'group2')

        function getJson()
        {
            var json = graph.toJSON();
            console.log(json);
        }
      </script>
</body>
</html>
妖136
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码 版本号： "@antv/x6": "^1.33.1",
10-11
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码
基于Vue3+ts+AntV X6实现的流程图编辑器
10-17
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用pinia统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以回显
Vue3 + antv/x6 实现流程图
FenceRain的博客
03-11 1000
流程图
AntV 开发 —— x6 图编辑引擎 v2
qq_16670995的博客
05-12 2592
前文再续 前序： v1笔记 碎碎念： 此文个人笔记，官网文档搬运 x6 版本：2.9.7 x6-vue-shape 版本：2.0.11 x6-plugin-selection 版本：2.1.7 vue 版本：2.6.11 vue-template-compiler 版本：2.6.11 Element-UI 版本：2.15.13 示例只展示单个节点的，多节点请下载demo自行查看源码 demo...
vue使用antv-x6 绘制流程图DAG图（二）
贵林之恋的博客
01-30 1090
【代码】vue使用antv-x6 绘制流程图DAG图（二）
antv-流程图，一个简易的基于antv x6实现的流程图绘制
12-15
antv-流程图，一个简易的基于antv x6实现的流程图绘制
VUE+antv/x6实现拖拽自定义流程图
wang_zhiwei0728的博客
10-26 1万+
最近公司需要做一个流程图， 看了看antv/X6感觉挺合适，就研究了半个月。 网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。 一：实现流程图最重要得就是画布了，官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。 首先最重要得就是下载依赖了， x6在vue中下载得话需要下载两个依赖； npm install @antv/x6 --save npm install @antv/x6-vue-shape 把这两个依赖下载好就可以在vue中使用X6了
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
初识antvX6
qq_52965813的博客
12-08 969
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
了解AntV/x6
weixin_73416102的博客
03-26 1万+
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
antv 官方文档参考 ywy（基础）
ywyanimate的博客
05-04 4611
antv X6 官方文档学习记录，关于vue，主要是为了记录重点参考学习，官网太慢了
基于Vue2+element-ui+AntV X6 实现的流程图编辑器
07-25
基于Vue2+element-ui+AntV X6 流程图编辑器，框架核心功能已搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以回显
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-20
同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图...
HTML/CSS1
m0_71299382的博客
05-05 709
然后我们html文件中的路径分隔符都是以/表示 不管针对的是什么操作系统 都是如此(要和Windows操作系统中的路径分隔符\以示区别)相对路径：不完整的图片路径表现形式(其中 .表示当前文件所在的路径 可以省略 而…当然我也可以获取当前路径下的images文件夹下的image图片 同样可以有两种方式表达图片的获取路径。其中alt是当图片加载失败时显示的文字 而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同的。而像素是图片显示的最小单位(图片是由一个个小正方块组合而成的 这些小正方块就是像素)
这是一个简单的照明材料网站，后续还会更新
m0_64180190的博客
04-29 2453
产品中心|联系方式|新闻动态网页首页|产品中心|联系方式|新闻动态
CSS 选择器知识点总结
weixin_40348267的博客
05-05 788
但是记得不可滥用!选择器是 CSS 中的关键部分，允许你精确地定位和样式化特定的元素或元素组。这篇文章的内容是 CSS 的选择器，这是写页面样式的第一步，知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。：没有特定性或源代码顺序的概念，但需要注意的是某些样式属性具有继承性，例如字体属性，它们可以从父元素继承到子元素。这些是 CSS 的常用选择器，将这些选择器组合起来使用，或者是嵌套使用可以改变选择器的权重。a：内联样式（在元素的 style 属性中定义的样式）的数量（权重值最高，值为1000）。
CSS探索之旅:定位
最新发布
2302_79590880的博客
05-05 479
css中定位相关知识的汇总
vue2项目,使用antv x6绘制树形流程图示例
11-03
Vue是一种流行的JavaScript框架，Vue 2是其第二个版本。AntV X6是一个基于Vue 2的图表绘制库，可以用于绘制各种类型的图表，包括树形流程图。 要在Vue 2项目中使用AntV X6绘制树形流程图，首先需要安装和引入AntV X6库。可以通过npm或yarn进行安装： npm install @antv/x6 或者 yarn add @antv/x6 然后，可以在Vue的组件中使用AntV X6。首先，引入`Graph`和`Node`组件： import { Graph, Node } from '@antv/x6-vue' 接下来，在Vue的模板中添加一个`Graph`组件，并设置一些必要的属性： ``` <template> <div> <Graph :initConfig="graphConfig"> <Node :shape="nodeShape" :x="nodeX" :y="nodeY" :width="nodeWidth" :height="nodeHeight" /> </Graph> </div> </template> <script> export default { data() { return { graphConfig: { width: 800, height: 600, gridSize: 10, background: { color: '#f8f8f8' }, scroller: { enabled: true, pannable: true } }, nodeShape: 'rect', nodeX: 100, nodeY: 100, nodeWidth: 80, nodeHeight: 40 } } } </script> ``` 在上面的代码中，创建了一个Graph组件和一个Node组件。Graph组件定义了整个绘图区域的配置，例如大小、网格和背景颜色等。Node组件定义了一个矩形节点的形状、位置和尺寸。 通过设置Node组件的属性，可以绘制更多的节点，并使用适当的形状、位置和尺寸。 以上是一个简单的示例，展示了如何在Vue 2项目中使用AntV X6绘制树形流程图。通过修改组件属性，可以创建更复杂的图表，并通过AntV X6的其他功能来增强图表的交互性和可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值