Failed to save PNG

[GuyWicks]

Upon clicking on the 'Export to PNG' button, a notification comes up that says 'Failed to save PNG'. I don't seem to be able to find any additional error messages.

Upon clicking on 'Export to SVG', this works and a diagram.svg file is created in the same location as the diagram.seqdiag file.

Version: 1.28.2 Commit: 7f3ce96ff4729c91352ae6def877e59c561f4850 Date: 2018-10-17T00:23:51.859Z Electron: 2.0.9 Chrome: 61.0.3163.100 Node.js: 8.9.3 V8: 6.1.534.41 Architecture: x64

[spartacusX]

same issue here version 0.3.1

[codemedic]

Same issue here; I am on Linux with extension version 0.3.1. Any chance this can be looked into, please.

[mbalsam-refind]

same here. But i still love it!

[mbalsam-refind]

Also, if you change to another file, and then back to the Sequence Diagram file its blank.

[sailinder]

Have the same problem. Is there a fix?

Like the plugin though, works as it should!

[AleksandarDev]

Can you confirm this is still issue with version 0.4.0? @sailinder @mbalsam-refind @codemedic

[thutto]

New to this issue, however I am also seeing this bug. VSCode Sequence Diagrams Version: 0.4.0 About VS Code: Version: 1.38.1 Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0 Date: 2019-09-11T13:31:32.854Z Electron: 4.2.10 Chrome: 69.0.3497.128 Node.js: 10.11.0 V8: 6.9.427.31-electron.0 OS: Darwin x64 18.7.0

Error message presented: "Sequence Diagrams - Failed to save PNG"

[thutto]

Looking a bit deeper I see the following logged to the console. [Extension Host] vscode-sequence-diagrams: Check refresh document rejected.

Hope this helps. Edit Adding Stack trace I see:

Error: spawn /Users/thutto/.vscode/extensions/aleksandardev.vscode-sequence-diagrams-0.4.0/node_modules/phantomjs-prebuilt/lib/phantom\bin\phantomjs.exe ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)

[mhite]

Same for me!

[bcollard]

Same here; I guess I'm using latest version, which is 0.4.0 according to the changelog. Where can we get more detailed logs?

[mhite]

Ok, I think I may have identified a root cause.

Here's the bit of code in the extension where the PNG is saved:

   _receiveMessage(message) {
        return __awaiter(this, void 0, void 0, function* () {
            if (message == null || message.command == null)
                return;
            let extension;
            try {
                let exportFileName;
                switch (message.command) {
                    case 'export-svg':
                        extension = "svg";
                        exportFileName = this._getExportFileName(extension);
                        fs_1.writeFileSync(exportFileName, Buffer.from(message.data, 'base64').toString('binary'));
                        break;
                    case 'export-png':
                        extension = "png";
                        exportFileName = this._getExportFileName(extension);
                        const pngBuffer = yield svg2png(Buffer.from(message.data, 'base64'));
                        fs_1.writeFileSync(exportFileName, pngBuffer);
                        break;
                }
                vscode.window.showInformationMessage("Sequence Diagrams - " + extension.toUpperCase() + " saved to " + exportFileName);
            }
            catch (error) {
                logger_1.default.error(error);
                vscode.window.showErrorMessage("Sequence Diagrams - Failed to save " + extension.toUpperCase());
            }
            this.currentPanel.webview.postMessage({
                command: 'export-done',
            });
        });
    }

We can see svg2png is called to perform the conversion.

The svg2png library has an upstream dependency on phantomjs-prebuilt:

  "dependencies": {
    "file-url": "^2.0.0",
    "phantomjs-prebuilt": "^2.1.14",
    "pn": "^1.0.0",
    "yargs": "^6.5.0"
  },

And unfortunately I can see in the Visual Studio Code developer console that the extension fails trying to launch a Windows binary. I'm on a Mac. See the screenshots below.

ENOENT means file does not exist. This is likely being triggered because of the mismatched use of "/" vs. "\" in the path to access... a prebuilt Windows binary. So even if the path issue wasn't coming up, it would try to launch the prebuilt Windows PhantomJS .exe and fail.

I think the root of the problem is that this extension is shipping with prebuilt platform-specific binaries.

This is what the phantomjs README says:

PhantomJS needs to be compiled separately for each platform. This installer
finds a prebuilt binary for your operating system, and downloads it.

I'm not sure what the real fix is here other than trying to find an alternative way of doing the svg to png conversion that doesn't require shipping binaries.

[mhite]

@AleksandarDev - was the above information useful for diagnosing?

[chrisdesoto]

@mhite You're right on the money with this one. For anyone who wants a quick fix: cd ~/.vscode/extensions/aleksandardev.vscode-sequence-diagrams-0.4.0/ && npm install

NPM should detect the missing phantomjs binary and do the install. The post install script will fail but if you reload vscode, png downloads should work. I'm not familiar enough with the vscode extension api to say what the more permanent solution to this is.

[mhite]

@chrisdesoto - Nice! I'm hoping @AleksandarDev has a permanent fix.

[AleksandarDev]

Should be resolved

[chrisalbright]

Incidentally, I installed this plugin today (v 0.4.7), and experienced this problem. I'm on OSX. I tried the npm install workaround suggested and that did not solve it for me.

[ipfans]

This issue seems not fixed in the latest v0.4.7 on Windows.

[bmordue]

Another possible solution: remove the option to export as PNG.

[hhubik]

This issue seems not fixed in the latest v0.4.7 on Windows.

The extension produces the following error: Sequence Diagrams - Failed to save PNG

[sercanerhan]

npm install couldn't fixed for me as well on macOS .

ProductName:    macOS
ProductVersion: 12.3.1
BuildVersion:   21E258
vscode version: 1.66.2
VSCode Sequence Diagrams version: v0.4.7

[KangoV]

Happening for me also in v0.4.7 :(

[kieranbenton]

Yeah its now more hardcoded to use a .exe even when running on OS X:

2024-01-29 09:40:36.313 [error] [Extension Host] vscode-sequence-diagrams: Error: spawn /Users/kieranbenton/.vscode/extensions/aleksandardev.vscode-sequence-diagrams-0.4.7/dist/phantom\bin\phantomjs.exe ENOENT

I'm tempted to try and grab an osx binary of phantom and rename it to .exe to see if that works.

[kieranbenton]

Nope, because of the mixed slashes I can't make that work.