Use with vscode - StateSmith/StateSmith-drawio-plugin GitHub Wiki
This workflow is really great for users that want to do everything from a single window. One IDE to rule them all?
Major Known Issues
We occasionally hit either draw.io bugs or vscode draw.io bugs. Check the issues page.
Plugin won't load under WSL. See issue 18.
If you run into problems, consider using the draw.io offline app instead.
Install vscode draw.io extension
Install the very popular vscode draw.io extension.
Setup vscode project to use StateSmith-drawio-plugin
Download the StateSmith plugin .js file (like StateSmith-drawio-plugin-v0.6.0.js
) you want to use from the releases page. Look under Assets.
Move the .js file to your vscode project dir (or somewhere else if you adjust the below path to match).
Enable the StateSmith plugin by editing .vscode/settings.json:
{
"hediet.vscode-drawio.plugins": [
{"file": "${workspaceFolder}/StateSmith-drawio-plugin-v0.1.0.js"}
]
}
When you open a draw.io file now, the vscode extension will prompt you if you want to load the StateSmith-drawio-plugin:
Click Allow
if you trust it. I do :) You can easily review and modify the source.
You should only have to do this once. The vscode-drawio extension will remember your choice. You will, however, get another prompt if you alter the plugin .js file or load a new one.
Troubleshooting
If you are having trouble getting the plugin to load, double check your paths and also check the issues page.
If none of that helps, please contact us or open a bug report and we'll do our best to help. You can also use the draw.io offline app or website.
Developer Tools
You might see a useful error message by opening the vscode Developer Tools
.
Note! On my vscode install, I see a number of errors which are totally unrelated to our plugin. The below image shows messages you should expect to see when you open a draw.io diagram and our StateSmith plugin loads.
Ugg... I can't believe I have a typo in the above image StatSmith
😛