This extension integrates Excalidraw into VS Code.
To use it, create an empty file with a .excalidraw, .excalidraw.json, .excalidraw.svg or .excalidraw.png extension and open it in Visual Studio Code.
Try the web version at : https://excalidraw.com/
The source of the drawing can be embedded directly in a PNG or SVG image. Just create a new .excalidraw.png or .excalidraw.svg file.
You can also switch between text and image format by updating the file extension (ex: rename a .excalidraw file to .excalidraw.png).
You can control the default export options using the excalidraw.image setting:
{
"excalidraw.image": {
"exportScale": 1,
"exportWithBackground": true,
"exportWithDarkMode": false
}
}You can install this extension in github.dev or vscode.dev.
Editing an Excalidraw schema stored in a GitHub repository has never been easier !
The extension support three theme options:
- light (default)
- dark
- auto (sync with VS Code Theme)
Check out the available libraries at libraries.excalidraw.com, and don't hesitate to contribute your own !
You can switch between the Excalidraw editor and the source (text or image) using the editor toolbar.
By default, this extension only handles *.excalidraw, *.excalidraw.svg and *.excalidraw.png files.
Add this to your VS Code settings.json file if you want to associate it with additional file extensions (ex: SVG):
{
"workbench.editorAssociations": {
"*.svg": "editor.excalidraw"
}
}You won't be able to edit arbitrary SVG files though - only those that have been created with Excalidraw or this extension!
If you want to use a workspace specific library (and share it with other contributors), set the excalidraw.workspaceLibraryPath in your Visual Studio Code workspace settings file (.vscode/settings.json):
{
"excalidraw.workspaceLibraryPath": "path/to/library.excalidrawlib"
}The workspaceLibraryPath path is relative to your workspace root. Absolute path are also supported, but it will be specific to your device.
By default, the extension will use the Visual Studio Code Display Language to determine the language to use. You can overwrite it using the excalidraw.language setting:
{
"excalidraw.language": "fr-FR"
}Only bug reports / feature requests specifics to the VS Code integration should go to the extension repository. If it is not the case, please report your issue directly to the Excalidraw project.
Thank you for considering contributing to the extension 💖 !
This extension only goal is to integrate Excalidraw to the Visual Studio Code ecosystem. Users should be able to use both the website and the extension with a minimal amount of friction. As such, we will not accept any contribution that significantly modify the user experience compared to the Excalidraw website.
There are exceptions to this rule (for example, the switch theme icon was deported to Visual Studio Code editor toolbar to allow a better integration). In case of uncertainty, create a thread in the project Discussion Page.
