如何将ReactFlow节点与边导出为VSDX（Visio 2013）格式文件

VSDX是Microsoft Visio的原生文件格式，本质是封装了XML结构的ZIP压缩包。要实现ReactFlow数据到VSDX的转换，核心是理解VSDX的XML结构，并将ReactFlow的nodes/edges映射为对应Visio元素，再重新打包为ZIP文件。

核心思路 #

1. 准备一个基础VSDX模板（空的Visio流程图），确保XML结构完整
2. 解析模板中的核心XML文件（visio/content.xml），替换其中的形状和连接线数据
3. 将修改后的XML文件重新打包为ZIP，生成目标VSDX文件

VSDX关键结构说明 #

解压VSDX文件后，核心目录和文件：

• visio/content.xml：存储页面的形状（对应ReactFlow nodes）、连接线（对应ReactFlow edges）数据
• visio/styles.xml：定义形状的填充、线条、文本样式
• _rels/.rels：维护文件间的依赖关系

具体实现步骤（Node.js环境） #

1. 安装依赖 #

使用adm-zip处理ZIP压缩，xml2js解析和生成XML：

npm install adm-zip xml2js

2. 准备基础模板 #

打开Microsoft Visio，创建一个空白流程图，保存为template.vsdx。这个模板会提供完整的VSDX结构，避免手动构建XML的复杂度。

3. 转换代码实现 #

const AdmZip = require('adm-zip');
const xml2js = require('xml2js');
const fs = require('fs');

// 你的ReactFlow节点与边数据
const nodes = [
    { id: '1', type: 'input', position: { x: 100, y: 100 }, data: { label: 'Node 1' } },
    { id: '2', type: 'default', position: { x: 300, y: 200 }, data: { label: 'Node 2' } },
];
const edges = [
    { id: 'e1-2', source: '1', target: '2', label: 'Edge from Node 1 to Node 2' },
];

// 加载基础VSDX模板
const zip = new AdmZip('template.vsdx');

// 解析content.xml文件
const contentXml = zip.readAsText('visio/content.xml');
xml2js.parseString(contentXml, (err, xmlData) => {
    if (err) throw err;

    // 获取页面节点（默认取第一个页面）
    const page = xmlData.VisioDocument.Pages[0].Page[0];
    // 清空模板中的默认形状和连接线
    page.Shapes[0].Shape = [];
    page.Connects[0].Connect = [];

    // 坐标转换：ReactFlow原点在左上角，Visio原点在左下角，需根据画布高度调整
    const canvasHeight = 600; // 对应ReactFlow画布的高度，可自定义

    // 转换ReactFlow节点为Visio形状
    nodes.forEach(node => {
        // 映射Visio内置形状ID：1=矩形，2=圆角矩形，可根据需求调整
        const masterShapeId = node.type === 'input' ? '1' : '2';
        
        page.Shapes[0].Shape.push({
            $: {
                ID: node.id,
                Type: 'Shape',
                Master: masterShapeId,
                PinX: node.position.x, // Visio水平坐标
                PinY: canvasHeight - node.position.y, // 转换垂直坐标
                Width: 120, // 节点宽度
                Height: 60 // 节点高度
            },
            Text: [{ _: node.data.label }] // 节点文本
        });
    });

    // 转换ReactFlow边为Visio连接线
    edges.forEach(edge => {
        page.Connects[0].Connect.push({
            $: {
                ID: edge.id,
                FromSheet: edge.source, // 起始节点ID
                ToSheet: edge.target // 目标节点ID
            },
            Text: [{ _: edge.label }] // 连接线文本
        });
    });

    // 生成修改后的XML内容
    const xmlBuilder = new xml2js.Builder();
    const updatedContentXml = xmlBuilder.buildObject(xmlData);

    // 更新ZIP中的content.xml
    zip.deleteFile('visio/content.xml');
    zip.addFile('visio/content.xml', Buffer.from(updatedContentXml, 'utf8'));

    // 保存最终VSDX文件
    zip.writeZip('output.vsdx');
    console.log('VSDX文件生成完成');
});

注意事项 #

• 坐标适配：需根据ReactFlow实际画布高度调整canvasHeight参数，确保节点位置正确
• 形状扩展：如果需要自定义节点样式，可修改visio/styles.xml，或在Shape元素中添加Fill、Line等属性
• 模板兼容性：建议使用与目标Visio版本一致的模板，避免版本兼容问题

内容的提问来源于stack exchange，提问作者jenish963