ExcaliMath: Technical Diagramming Meets Advanced Math

Stop struggling to hand-draw complex formulas or import blurry images into your diagrams. ExcaliMath bridges the gap between Excalidraw's intuitive whiteboard and powerful math rendering, right inside 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 of ExcaliMath at : https://excalimath.my-lab.ro/ (ExcaliMath is fully compatible with Excalidraw).

demo

Features
Contact
Note for Contributors

Features

Edit Images

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).

Image can be edited directly

You can control the default export options using the excalimath.image setting:

{
  "excalimath.image": {
    "exportScale": 1,
    "exportWithBackground": true,
    "exportWithDarkMode": false
  }
}

Draw from your browser

You can install this extension in github.dev or vscode.dev. Editing an ExcaliMath schema stored in a GitHub repository has never been easier !

Import Public Library

Check out the available libraries at libraries.excalidraw.com, and don't hesitate to contribute your own !

Public libraries can be imported from the browser

View Drawing Source

You can switch between the ExcaliMath editor and the source (text or image) using the editor toolbar.

Use the dedicated toolbar button to view the diagram source

Associate Additional Extensions with the ExcaliMath Editor

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.excalimath"
  }
}

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

If you want to use a workspace specific library (and share it with other contributors), set the excalimath.workspaceLibraryPath in your Visual Studio Code workspace settings file (.vscode/settings.json):

{
  "excalimath.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.

Configure Language

By default, the extension will use the Visual Studio Code Display Language to determine the language to use. You can overwrite it using the excalimath.language setting:

{
  "excalimath.language": "fr-FR"
}

Contact

Only bug reports or feature requests specific to the VS Code integration should go to the extension repository. If it is not the case, please report your issue directly to the ExcaliMath or Excalidraw project.

Note for Contributors

Thank you for considering contributing to the extension :sparkling_heart: !

This extension's main goal is to bring ExcaliMath (and its Excalidraw compatibility) 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 modifies the user experience compared to the ExcaliMath/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.

ExcaliMath

DynoW