hediet / vscode-drawio Goto Github PK

View Code? Open in Web Editor NEW

9.0K 64.0 401.0 10.81 MB

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

Home Page: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

License: GNU General Public License v3.0

TypeScript 91.42% HTML 8.41% JavaScript 0.12% CSS 0.04%

hacktoberfest vscode-extension drawio diagram

vscode-drawio's Introduction

Draw.io VS Code Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Mentioned in the official diagrams.net blog.

Features

Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor.
- To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it.
- .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
- .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better!
- To convert between different formats, use the Draw.io: Convert To... command.
Uses an offline version of Draw.io by default.
Multiple Draw.io themes are available.
Use Liveshare to collaboratively edit a diagram with others.
Nodes/edges can be linked with code spans.

Demo

Like it so far? You might also like my open source Chrome extension that enhances the Github markdown editor!

Editing .drawio.svg/.drawio.png Files

You can directly edit and save .drawio.svg and .drawio.png files. These files are perfectly valid svg/png-images that contain an embedded Draw.io diagram. Whenever you edit such a file, the svg/png part of that file is kept up to date.

The logo of this extension is such a .drawio.png file that has been created with the extension itself!

If diffs are important for you, you should prefer .drawio and avoid .drawio.png diagrams.

Collaboratively Edit Or Present Diagrams

With version 1.0 of this extension, extensive support for VS Code Liveshare has been added. You can now edit or present your Draw.io diagrams remotely, while seeing each participant's cursor and selection! This can be used for discussing, reviewing or brainstorming diagrams. With Draw.io's freehand drawing tool and integrated LaTeX support, this extension becomes an advanced whiteboard solution that can be used for remote code interviews!

Internally, this extension synchronizes Draw.io diagrams with text documents. These text documents are shared by Liveshare. As Liveshare has no understanding of the text, modification conflicts might occur on simultaneous modifications.

Code Link Feature

In the status bar, you can enable or disable the code link feature. If it is enabled and you double click on a node whose label starts with #, you will perform a workspace search for a symbol matching the rest of the label.

If you have a node labeled #MyClass and a class of name MyClass, you will jump to its source if you double click the node!

Please note that you have to open at least one file of the project that contains the symbol. Otherwise, VS Code will not consider this project when searching for symbols. This file itself does not have to contain the symbol though.

Thanks to my latest github sponsors, this feature is open source and freely available now.

TIP: If you open the draw.io editor to the right side (i.e. the second editor column) and navigate to a symbol, the diagram will stay visible.

Themes

Available Draw.io Themes

Theme "atlas"
Theme "Kennedy"
Theme "min"
Theme "dark"

Associate `.svg` Files With The Draw.io Editor

By default, this extension only handles *.drawio.svg files. Add this to your VS Code settings.json file if you want to associate it with .svg files:

"workbench.editorAssociations": {
    "*.svg": "hediet.vscode-drawio-text",
}

You won't be able to edit arbitrary SVG files though - only those that have been created with Draw.io or this extension!

Editing the Diagram and its XML Side by Side

You can open the same *.drawio file with the Draw.io editor and as xml file. They are synchronized, so you can switch between them as you like it. This is super practical if you want to use find/replace to rename text or other features of VS Code to speed up your diagram creation/edit process. Use the View: Reopen Editor With... command to toggle between the text or the Draw.io editor. You can open multiple editors for the same file. This does not make much sense for SVG files though, as the draw.io diagram is stored in its metadata.

Contributors

Henning Dieterichs, hediet on Github (Main Contributor / Author)
Vincent Rouillé, Speedy37 on Github

Other Cool Extensions

If you like this extension, you might like my other extensions too:

Debug Visualizer: An extension for visualizing data structures while debugging.
Real-Time Debugging: This extension visualizes how your code is being executed.

vscode-drawio's People

Contributors

Stargazers

Watchers

Forkers

faberpro casana edurguti dolkensp-bookmarks alexanderjohnston jack23912 jamieastley repoarchiver danielchudc mualora chinabjhzc windzero ankitsoni jordanch mm86133 hoangpq fritexvz jlutz777 edwardkads robinrainwalker monad-one rayleyva speedy37 chavesb visopsys 1leverage neuroradiology srikwit designtips ganolmc raythomas darcy0511 gpsbird dut3062796s china-liweihong tchigher aplgsd pingf ezhangle tailin lingnet takanorifukuyama lorenhsu1128 will1314 zhuomingliang yaunqiying 271th-order hhchi13 kubeself carywei brokentooth1989 jiekkk yulongsun hileix naturtle ltqy 99bomber5 maxiko unixer-asuo hypergenius weizhang418 mulxcode winmer leesfeng changsongyang namequin miloxy wangpanqiao jack4518 zphcxj jiajiabei997 chenchencc lichengtao1989 ouyangpeng jiayinpeng tanyaguru 2581222024 nicholasleo mcilhargey zhuoguanjun mofeng1123 inier aivazovskiiroman jackiezheng xfpda xx-hacbox-xx changgeee shadowkun mafan88 yongma16 shalevy1 jzhyng kangcaijun hengle mdlglobal-atlassian-net viveknidhi hmy626 java-jw yichaoyan devkiss

vscode-drawio's Issues

Add file icon for drawio files

Presently, drawio file doesn't have it's icon associated to it.

Add a new file icon mapping for drawio files

Hide Export Options

#18

[feature request] Open new editor from command menu

Could you please add possibility to open drawio editor directly from command palette.

Support PNG Export

It would be useful if Draw.io diagrams could be exported to PNG files.

Document How to Integrate Draw.io

[feature request] Support change language

I'm curious why your extension can't load these two areas.

Unable to Switch Tab

I switch tabs using Ctrl+Tab (workbench.action.nextEditor) and Ctrl+Shift+Tab (workbench.action.previousEditor) but it stops working once the drawio tab is focused.

How to change the default theme from dark to normal?

Configure whether to store drawio config in global or workspace settings

Also, if the extension reads localStorage from workspace settings, the extension should not simply write localStorage back to the global config. It should either delete the workspace setting or write back to the workspace setting.

Copy & Paste issue in vscode on mac

Hi there,

We've tested this on 2 different MacBooks with vscode Version:
Version: 1.45.0 Commit: d69a79b73808559a91206d73d7717ff5f798f23c Date: 2020-05-07T15:57:33.467Z Electron: 7.2.4 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Darwin x64 19.4.0

Using copy & paste from the context menu works fine, but there I can't see a shortcut for paste and cmd+v doesn't works:

Also cmd+c to copy a shape also doesn't work. If I select a shape press cmd+c right click -> paste here, it pastes the shape that was copied with right click -> copy.

View reset on save

If I make changes to a diagram and then save it, the zoom level and view position are reset to their default.

Unable to install because it is not compatible with the current version of VS Code (version 1.43.2).

Unable to install 'eighthundreds.vscode-drawio' extension because it is not compatible with the current version of VS Code (version 1.43.2).

Automatically open custom libraries on extension start

Would it be possible to add an extension setting which would allow to configure a path to a location in current folder where libraries are stored?

Hediet > Vscode-drawio: Library-path
# Path to my awesome libraries
"my-drawio-libraries"

This would allow to separately publish self-created libraries, then to download them into my-drawio-libraries and then afterwards to open a *.drawio or *.drawio.png file for editing, where Vscode-drawio extension would automatically load all libraries from the given folder.

(With the current extension, it is also possible to load libraries but only file per file. And whenever another file.drawio is opened, the extension is restarted and the libraries need to be loaded again.)

Support for Remote Development

Installed the extension on Visual Studio Code Insiders (1.46), using Remote-SSH.

When opening a .dio or .drawio file the editor is not displayed.

Ship drawio with the extension

Right now, the extension loads the editor from draw.io. This makes things simple to implement, but requires an internet connection. That's not so cool.

unable to install in vscode 1.43.2

Unable to install 'hediet.vscode-drawio' extension because it is not compatible with the current version of VS Code (version 1.43.2).

Undo stack is reset upon save

After saving a digram, the undo history of the file is reset.

To replicate

Open a drawio diagram
Draw some items
Note that you can undo / redo
Save the document
Note that you can no longer undo / redo

[feature request] Support *.svg

{
        action: "export",
        xml: data.xml,
        format: "xmlsvg",
}

"data:image/svg+xml;base64,"

Get rid of the iframe that hosts drawio

Problem

Currently, an iframe is used to host drawio.

This prevents VS Code shortcuts from working (like ctrl+tab). Since some shortcuts might collide with drawio, this is actually a good thing with the current architecture.

However, copy and paste does not seem to work on mac due to this (#28).

Solution

Host drawio without the top IFrame.
This can be done by using webview.asWebUri(...) or, maybe even better, by loading an html page that redirects to http://localhost:${port}/index.html?....
In both cases, window.parent.postMessage must be patched to use the vscode api or something else like websockets (I'm not so sure whether the VSCode Webview API exists anymore after an redirect).

This would break the online version though.

Also, all shortcuts in drawio may have to be disabled. For every action, a proper VS Code command should be added with a default shortcut that the action in drawio had.
I think you can use ui.actions... to invoke actions inside plugins.

Add Export Option

Adding support to export png/jpg would be great.

Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing

Uh oh, tiny issue... Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing. I confirmed that the svg's were present in the drawio source folder; but the logos are refusing to show up. Any idea?

It's not just these, the Docker image is also missing (which is part of a MS Azure pack according to the source code). Is the drawio master just broken, or is there something I can do?

Originally posted by @MagicLegend in #51 (comment)

File>Save As SVG doesn't work as expected

Maybe I'm interpreting this wrongly, but suppose I create a file.drawio file. I draw my diagram. Then I do (through VSCode) a File>Save As: file.drawio.svg

The svg file created isn't the one that can be directly embedded in Github. I had to go to Embed > SVG > Options (Fit), and then save that into the SVG file.

The svg file created through File>Save as looks like this:

<mxfile host="localhost" modified="2020-05-18T13:42:57.122Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.45.0 Chrome/78.0.3904.130 Electron/7.2.4 Safari/537.36" etag="w0Ix3sGhsgqnVdeELjn6" version="13.0.9">
    <diagram id="6hGFLwfOUW9BJ-s0fimq" name="Page-1">
        <mxGraphModel dx="675" dy="404" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
......

Which is the encoding that drawio uses, not the svg encoding. Am I missing something?

OS: Windows 10
VSCode version: 1.45.1
App extension: 0.4.0

EDIT: I had originally typed it as file.draw.io.svg

Draw.io is now called diagrams.net

Not sure if you want to eventually change the name of this VS Code extension, but the draw.io app now redirects to diagrams.net, and it's been renamed.

Export single/multiple from file explorer or command palette

Using vscode I can easily manage documentation with multiple diagrams versioned in git. This is an amazing improvement for me. I'm missing some quality of life features though.

Currently you have to do Export->Download->Pick target folder for each diagram.

I'm proposing some quicker options:

An export option when rightclicking a .drawio file.
Export all diagrams in current folder.

These exports would use the last specified export settings to avoid any dialogs.

Error: Cannot find module 'setprototypeof'

I'm trying to load this extension into VS Code on Windows, but I cannot get it to load correctly. Some module seems to be missing.

Here is the relevant log information:

[2020-05-11 14:39:37.165] [exthost] [error] Activating extension hediet.vscode-drawio failed due to an error:
[2020-05-11 14:39:37.166] [exthost] [error] Error: Cannot find module 'setprototypeof'
Require stack:
- c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\node_modules\http-errors\index.js
- c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\node_modules\send\index.js
- c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\node_modules\serve-static\index.js
- c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\out\DrawioAppServer\SelfHostedDrawioAppServer.js
- c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\out\DrawioAppServer\index.js
- c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\out\extension.js
- c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
	at Function.Module._resolveFilename (internal/modules/cjs/loader.js:717:15)
	at Module._load (internal/modules/cjs/loader.js:622:27)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at n (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:524)
	at Object.<anonymous> (c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\node_modules\http-errors\index.js:16:22)
	at Module.o._compile (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:749)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
	at Module.load (internal/modules/cjs/loader.js:735:32)
	at Module._load (internal/modules/cjs/loader.js:648:12)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at n (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:524)
	at Object.<anonymous> (c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\node_modules\send\index.js:15:19)
	at Module.o._compile (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:749)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
	at Module.load (internal/modules/cjs/loader.js:735:32)
	at Module._load (internal/modules/cjs/loader.js:648:12)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at n (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:524)
	at Object.<anonymous> (c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\node_modules\serve-static\index.js:20:12)
	at Module.o._compile (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:749)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
	at Module.load (internal/modules/cjs/loader.js:735:32)
	at Module._load (internal/modules/cjs/loader.js:648:12)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at n (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:524)
	at Object.<anonymous> (c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\out\DrawioAppServer\SelfHostedDrawioAppServer.js:15:21)
	at Module.o._compile (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:749)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
	at Module.load (internal/modules/cjs/loader.js:735:32)
	at Module._load (internal/modules/cjs/loader.js:648:12)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at n (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:524)
	at Object.<anonymous> (c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\out\DrawioAppServer\index.js:7:10)
	at Module.o._compile (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:749)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
	at Module.load (internal/modules/cjs/loader.js:735:32)
	at Module._load (internal/modules/cjs/loader.js:648:12)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at n (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:524)
	at Object.<anonymous> (c:\Users\<user>\.vscode\extensions\hediet.vscode-drawio-0.2.0\out\extension.js:8:27)
	at Module.o._compile (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:749)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
	at Module.load (internal/modules/cjs/loader.js:735:32)
	at Module._load (internal/modules/cjs/loader.js:648:12)
	at Module._load (electron/js2c/asar.js:717:26)
	at Function.Module._load (electron/js2c/asar.js:717:26)
	at Function.t._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:955:769)
	at Function.n._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:925:106)
	at Function.i._load (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:921:391)
	at Module.require (internal/modules/cjs/loader.js:775:19)
	at require (internal/modules/cjs/helpers.js:68:18)
	at Function.s [as __$__nodeRequire] (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:33:115)
	at h._loadCommonJSModule (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:926:266)
	at h._doActivateExtension (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:822:856)
	at h._activateExtension (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:821:937)
	at Object.actualActivateExtension (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:819:883)
	at e._activateExtension (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:598:859)
	at c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:598:537
	at Array.map (<anonymous>)
	at e._activateExtensions (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:598:525)
	at e.activateByEvent (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:596:14)
	at h._activateByEvent (c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:820:618)
	at c:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:829:401
	at processTicksAndRejections (internal/process/task_queues.js:85:5)

Unable to change the color theme due to write error.

Description:

Unable to change the color theme with the following error:

Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.

Steps to Reproduce:

Go to Preference/Settings
Scroll down to extensions/Draw.io integration
Change Theme to any one of theme
The error above is shown, and color does not change.

Environment:

OS: Mac Catalina (10.15.4)
VS Code: Version: 1.45.1

Workaround:

Right click the gear icon on upper left.

Select Setting as JSON Copy Setting as JSON
You should get something like this:

"hediet.vscode-drawio.theme": "automatic"

Click Edit in setting.json

Insert the line from step 2 (with extra , at the end in case you will add more stuff later)

    "hediet.vscode-drawio.theme": "min",

Save the file, and make sure theme has been updated

Allow to set custom Draw.io configuration from vscode (for custom fonts)

Draw.io desktop allows to set a configuration via Extras -> Configuration...
I use it to set custom fonts that I use regularly, e.g. CMU Serif to match figures with LaTeX documents:

{
  "compressXml": false,
  "customFonts": [
    "CMU Serif",
    "CMU Typewriter Text"
  ]
}

I see that you set the compressXml option in https://github.com/hediet/vscode-drawio/blob/master/src/DrawioInstance.ts#L86.
Maybe an option can be added to the vscode extension to also set customFonts to a user-defined list.

Thanks for this great extension! 👍

Drawings and confidentiality

What about drawings and confidentiality?
Is the drawing is transmited to Draw.io server or there's no data sent to Draw.io, ... stays on local?

Opening files can take up to several minutes.

Attached are two files.

coordinate_system.drawio - usually loads in about 10 seconds.
anisotropy.drawio - timed with a stopwatch. Takes 3 minutes 15 seconds to load.

The main difference between these files is the second one has a couple of embedded images. However, it's only ~80kb in size so this loading time seems very high.

CPU use remains at 25% and memory around 170mb, for the ExtensionHost in VSCode process explorer.

Both files load instantly on web and desktop draw.io clients.

drawio_test.zip

Unable to install the current version of VS Code (version 1.42.1).

Some reason my team can not update VSCode version. Our VScode version is 1.42.1.
But it is not compatible now.
Is thear a way that we could use your great extension in VSCode version 1.42.1?

Not opening file in vscode.

I installed the plugin and tried to open a .drawio file and vscode doesnt open the file.

VS Code : 1.45.0

Add Release Branch / Create Git Tag On Publish

Currently, a release is triggered on each tag that starts with v.
It would be better if there is a dedicated release branch. Commits that are pushed to this branch are released and a version tag is created automatically.

Additional file ending "*.dio"

Hi,
it would be great if you could add "*.dio" as an additional file ending (if possible) for draw.io files as this ending is used in the Jupyterlab extension jupyterlab-drawio.
Thanks!
Daniel

files with the drawio extension no longer opens with vscode version 1.45

I recently found your plugin and was very impressed. Great job... This week when after the latest vscode update it no longer seems to open the files correctly. I am on a macbook running vscode version 1.45. Just checking to see if others are seeing this? I tried to uninstall and reinstall the extension as well.

Viewing diffs

Currently viewing diff's doesn't seem to work
two "drawio widgets" show but, only the final image renders

There is also a lot of UI that renders, and there is not much space on the screen

Maybe just the image without the UI,
Or even just the xml?

Thanks for your work, It's awesome!

Use Current User Language from VS Code in Draw.io

Currently, the Draw.io interface is always English.

Not able to export as pdf

when i try to export as pdf or any other type of document, option is not working in vscode

Unable to change UI-scale (hard to read on high resolution laptop)

The text is really small and seems hard to read. I was looking for a setting to set the UI-scale, but was unable to find it.

Feature request: match theme colors

Great extension. It just works :)

As you can see below, the colors of the extension don't match the theme colors. It would be awesome if it did!

Ask Insider Users Whether The Build is Usable

This feedback should be collected online, so that I now whether an insider build has been tested thoroughly enough to be released to production.

Colors + Dark Theme

I have a color issue when using the dark mode of draw.io.

The current default behavior is great, for example:
A line looks white in VS Code, when I export in png for example the line is black on white background.

But if you happen to change the line color to white or black manually, I couldn't go back to that behavior.

Either the the line is black and not visible in VS Code, but exports fine
or
The line is white and visible in VS Code, but exports white on white background.

So I guess my question is: Is there a way to get back to the default behavior, once you mess with the colors.

side by side xml

Hoping I just need to save my document in a specific way, but when I hit reopen as and choose text editor, I get an xml document with a single element <diagram>. It seems to me that the string in the <diagram> is some sort of base64 encoded element. Any ideas what I'm doing wrong?

No export option

i dont see any option with export

Remote Development: drawio files not opening

HI,
I use remote devlopment to ssh connect to linux box. install the extension and it installed on remote machine. when i create a .drawio file i have the open with option to use drawio. however the drawio editor does not open.

if i use a normal workspace and install drawio extension it works as expected.

is this a known issue or what can i do to debug .

Thx
derek

Stuck Loading on v0.4

Not able to open file becuase it is stuck loading since version 0.4.
When I downgrade to 0.3 it works fine.

Vscode version: 1.45.1 on windows.

Slected Shape Categories Not Saved

I have disabled the BPMN shapes and enabled SysML shapes in my diagram but when I close the drawing or restart vscode, BPMN is back and SysML is gone. It seems any changes to the currently selected shape categories is not being saved.

Support Scratchpad

The embedded mode shows no scratchpad:

Viewer does not support full SVG 1.1

Hi,

When I create a new fresh .svg file (I have the extra option to edit .svg files directly in my vscode config); it adds this warning Viewer does not support full SVG 1.1; which also happens to get rendered into my LaTeX document. Why is this happening?

Diagram:

Generated XML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="61px" viewBox="-0.5 -0.5 121 61" content="&lt;mxfile host=&quot;localhost&quot; modified=&quot;2020-05-20T14:15:43.802Z&quot; agent=&quot;5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.45.0 Chrome/78.0.3904.130 Electron/7.2.4 Safari/537.36&quot; etag=&quot;2dj9NAsXAYmHP5eUvH9k&quot; version=&quot;13.0.9&quot;&gt;&lt;diagram id=&quot;6hGFLwfOUW9BJ-s0fimq&quot; name=&quot;Page-1&quot;&gt;jZI9b8QgDIZ/DXsSpFy7Nr32lk4ZbkbBBSQSR5zTJP31JQXy0dNJXZD92Ab7xYxX7fTuRK8/UIJlRSYnxl9ZUZQ88+cC5gCeTnkAyhkZ0A7U5hsijHVqMBJuh0RCtGT6I2yw66ChAxPO4XhM+0R7fLUXCu5A3Qh7T69Gko5TFKeNX8AonV7Oy+cQaUVKjpPctJA47hA/M145RApWO1VgF+2SLqHu7UF0bcxBR/8pKELBl7BDnO3q2wmt0ZzmdTh0EpaSjPGXURuCuhfNEh39B3umqbXey70ZbwRHMD3sKl9n9TsC2AK52afEAp4WZP7jj5vaeZJQ75QuIxPxg9V69aaBN6IMyd3k/o3tdpaffwA=&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="0" y="0" width="120" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Wow
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Wow
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Viewer does not support full SVG 1.1
            </text>
        </a>
    </switch>
</svg>

LaTeX:

\usepackage{svg}
(...)
\includesvg{./figures/network.svg}

(Inkscape is installed via apt, v0.92.3 (2405546, 2018-03-11))

PDF output:

Of course I can manually remove the warning; but that should not be the solution :-) Info:

Version: 1.45.0
Commit: d69a79b73808559a91206d73d7717ff5f798f23c
Date: 2020-05-07T16:10:24.511Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.3.0-51-generic

(Yes, I am a minor version of VSCode behind)

Support PDF Export / Direct Edit

It would be useful if Draw.io diagrams could be exported or converted to PDF files.

can‘t export file

export file to PDF , can't exported ,It's gone in a flash.

VSCode Version:1.45.1
VSCode-drawio Version:1.0.2

hediet / vscode-drawio Goto Github PK

vscode-drawio's Introduction

Draw.io VS Code Integration

Features

Demo

Like it so far? You might also like my open source Chrome extension that enhances the Github markdown editor!

Editing .drawio.svg/.drawio.png Files

Collaboratively Edit Or Present Diagrams

Code Link Feature

Themes

Associate .svg Files With The Draw.io Editor

Editing the Diagram and its XML Side by Side

Contributors

See Also / Similar Extensions

Other Cool Extensions

vscode-drawio's People

Contributors

Stargazers

Watchers

Forkers

vscode-drawio's Issues

To replicate

Problem

Solution

Description:

Steps to Reproduce:

Environment:

Workaround:

Recommend Projects

Recommend Topics

Recommend Org

Associate `.svg` Files With The Draw.io Editor