Visio

JointJS+ provides a Visio plugin that enables the ability to import a Microsoft Visio 2013 VSDX file, convert Visio Shapes to JointJS Cells, and export a JointJS Paper as a VSDX archive.

Installation

The Visio plugin is an independent module distributed as part of the JointJS+ archive:

1. Unzip the archive and navigate to the build/package-visio folder inside.
2. Copy the joint-visio.tgz file and paste it into the root of your package.

Then, install the Visio package (@joint/format-visio) using your package manager:

npm

npm add joint-visio.tgz

pnpm

pnpm add ./joint-visio.tgz

yarn

yarn add @joint/format-visio@file:joint-visio.tgz

Now, you can import functionality from @joint/format-visio into your application as necessary:

• JointJS
• JointJS+

import { dia, shapes } from '@joint/core';
import { VisioArchive } from '@joint/format-visio';

The following example imports a VSDX project using the default converter:

VisioArchive.fromURL('network.vsdx').then((archive) => {
    const page = archive.document.getPages()[0];
    const graph = new dia.Graph({}, { cellNamespace: shapes });
    const paper = new dia.Paper({
        el: document.getElementById('paper'),
        model: graph,
        cellViewNamespace: shapes,
        interactive: false,
        width: page.width,
        height: page.height,
        async: true,
        frozen: true
    });

    page.getContent().then((content) => {
        const cells = content.toGraphCells();
        graph.resetCells(cells);
        paper.unfreeze();
    });
});

There is also a UMD version available

Place the UMD distribution of the plugin into the root of your package:

1. Navigate to the build/package-visio/dist folder inside the unzipped JointJS+ archive.
2. Copy the joint-visio.js file and paste it into the root of your package.

Place the source code of the two required dependencies - formula-parser.js and jszip.js - into the root of your package.

One way to do that is via NPM

1. Navigate to the build/package-visio folder inside the unzipped JointJS+ archive (parent folder of the folder we started with).

2. Install the package using NPM:

   npm install

3. Navigate to the newly created node_modules folder.

4. Copy the hot_formula_parser/dist/formula-parser.js file and paste it into the root of your package.

5. Copy the jszip/dist/jszip.js file and paste it into the root of your package.

Include joint-visio.js plus its dependencies formula-parser.js and jszip.js in your HTML:

• JointJS
• JointJS+

index.html

<script src="joint.js"></script>
<script src="jszip.js"></script>
<script src="formula-parser.js"></script>
<script src="joint-visio.js"></script>

Access Visio through the joint.format namespace:

index.js

joint.format.Visio.VisioArchive.fromURL('network.vsdx').then((archive) => {
    const page = archive.document.getPages()[0];
    const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
    const paper = new joint.dia.Paper({
        el: document.getElementById('paper'),
        model: graph,
        cellViewNamespace: joint.shapes,
        interactive: false,
        width: page.width,
        height: page.height,
        async: true,
        frozen: true
    });

    page.getContent().then((content) => {
        const cells = content.toGraphCells();
        graph.resetCells(cells);
        paper.unfreeze();
    });
});

Usage

• To import a VSDX file, use VisioArchive and a chosen method that is suited for the source type:
  • fromURL - using a local or remote vsdx file
  • fromBase64 - using a vsdx file in a form of a Base64 string
  • fromArrayBuffer - using a vsdx file in a form of an ArrayBuffer
• To export a JointJS paper as a VSDX archive, use the VisioPage.fromPaper method to update the archive, and then export it using VisioArchive.toVSDX.

Visio import

This basic example of how to import a Visio project, and use it in a JointJS application, uses the default import process.

As the default converter translates Visio Shapes as-is, the result might differ in JointJS in comparison to Visio.

 // load a vsdx file and pick a page to work with
const { document: vsdDocument } = await VisioArchive.fromURL('./project.vsdx');
const [page0] = vsdDocument.getPages();

// load objects present on the VisioPage
const pageContent = await page0.getContent();

// use default converter to create JointJS Cells from Visio Shapes
const cells = pageContent.toGraphCells();

graph.resetCells(cells);
paper.setDimensions(page0.width, page0.height);

For an example with mapping, which gives more control over how Visio Shapes are imported, see the Visio BPMN Import application.

Visio export

A basic export example that uses the default converter to translate the JointJS Paper as-is.

Do keep in mind that results might differ between JointJS applications and Visio (i.e. unmapped icons might not display properly).

// load Visio archive that will be used for export
const archive = await VisioArchive.fromURL('./project.vsdx');
const { document: vsdDocument } = archive;

// pick a page that will be the target for the export
const [page0] = vsdDocument.getPages();

// update page in the archive with JointJS Paper data using the default converter
await page0.fromPaper(paper);

// download archive using chosen method
const blob = await archive.toVSDX({ type: 'blob' });
util.downloadBlob(blob, 'project.vsdx');

See the Visio BPMN Export application.