mirror of
https://github.com/zsviczian/obsidian-excalidraw-plugin.git
synced 2025-08-06 05:46:28 +00:00
126 lines
8.5 KiB
Markdown
126 lines
8.5 KiB
Markdown
# Obsidian Excalidraw Plugin
|
||
The Obsidian-Excalidraw plugin integrates [Excalidraw](https://excalidraw.com/), a feature rich sketching tool, into Obsidian. You can store and edit Excalidraw files in your vault and you can transclude drawings into your documents. For a showcase of Excalidraw features, please read my blog post [here](https://www.zsolt.blog/2021/03/showcasing-excalidraw.html).
|
||
|
||
**See details of the 1.0.6, 1.0.7 and 1.0.8 releases including a short video, further below**
|
||
|
||
|
||
|
||
## Key features
|
||
- The plugin adds the following actions to the **command palette**:
|
||
- To create a new drawing
|
||
- To find and edit existing drawings in your vault,
|
||
- To embed (transclude) a drawing into a document, and
|
||
- To export a drawing as PNG or SVG.
|
||
- You can also use the **file explorer** in your vault to open Excalidraw files.
|
||
- Use the **ribbon button** to create a new drawing, do CTRL+Click to open on a new page.
|
||
- Open settings to set up a **default folder** for new drawings.
|
||
- Set up a **Template** by creating a drawing, customizing it the way you like it, and specifying the file as the template in settings.
|
||
- The plugin saves drawings to your vault as a file with the *.excalidraw* file extension.
|
||
- You can customize the **size and position of the embedded image** using the `[[image.excalidraw|100]]`, `[[image.excalidraw|100x100]]`, `[[image.excalidraw|100|left]]`, `[[image.excalidraw|right-wrap]]`, formatting options. `[[<filename.excalidraw>|<width>x<height>|<alignment>]]`. You can add your custom alignment via css. Any text that appears in `<alignment>` will be added as style to the SVG element and the wrapper DIV element. Check below and styles.css for more insight.
|
||
- You can setup Excalidraw to **automatically export SVG and/or PNG** files for your drawings, and to keep those in sync with your drawing.
|
||
- Includes full [Templater](https://github.com/SilentVoid13/Templater) support through ExcalidrawAutomate. Read detailed help + examples: [here](https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/AutomateHowTo.md)
|
||
|
||
## How to?
|
||
Part 1: Intro to Obsidian-Excalidraw - Start a new drawing (3:12)
|
||
|
||
[](https://youtu.be/i-hIfY-Ecjg)
|
||
|
||
Part 2: Intro to Obsidian-Excalidraw - Basic features (6:06)
|
||
|
||
[](https://youtu.be/-dk7pvdl-H0)
|
||
|
||
Part 3: Intro to Obsidian-Excalidraw - Advanced features (3:26)
|
||
|
||
[](https://youtu.be/2cKlEwo8WU0)
|
||
|
||
Part 4: Intro to Obsidian-Excalidraw - Setting up a template (1:45)
|
||
|
||
[](https://youtu.be/oNPYZEpmuJ8)
|
||
|
||
Part 5: Intro to Obsidian-Excalidraw - Stencil Library (3:16)
|
||
|
||
[](https://youtu.be/rLx-9FvlzgI)
|
||
|
||
Part 6: Intro to Obsidian-Excalidraw: Embedding drawings (2:08)
|
||
|
||
[](https://youtu.be/JQeJ-Hh-xAI)
|
||
|
||
## 1.0.6 and 1.0.7 update
|
||
[](https://youtu.be/ipZPbcP2B0M)
|
||
|
||
### SVG styling when embedding using a code block
|
||
- 1.0.7 adds further flexibility to styling
|
||
- new formatting option for the code block embedding
|
||
- Valid values: `left`, `right`, `left-wrap`, `right-wrap`... but anything after the last `|` character will be added to the class of the SVG element and the wrapper DIV element.
|
||
Here is the corresponding CSS:
|
||
```
|
||
svg.excalidraw-svg-right-wrap {
|
||
float: right;
|
||
margin: 0px 0px 20px 20px;
|
||
}
|
||
|
||
svg.excalidraw-svg-left-wrap {
|
||
float: left;
|
||
margin: 0px 35px 20px 0px;
|
||
}
|
||
|
||
div.excalidraw-svg-right {
|
||
text-align: right;
|
||
}
|
||
|
||
div.excalidraw-svg-left {
|
||
text-align: left;
|
||
}
|
||
```
|
||
## 1.0.8 + 1.0.9 (minor fixes) update
|
||
[](https://youtu.be/AtEhmHJjnxM)
|
||
|
||
### QoL improvements
|
||
- Adds context menu to File Explorer to create new drawings
|
||
- Adds a new command to the palette: “Transclude (embed) the most recently edited Excalidraw drawing”
|
||
- Automatically update file-links in transclusions when you rename or move your drawing
|
||
- Saves drawing and updates all active pre-views when drawing loses focus
|
||
- File is closed and removed when you select “Delete file” from more options
|
||
- Saves drawing when exiting Obsidian
|
||
- Fixes pen positioning bug with sliding panes after panes scroll
|
||
|
||
### ExcalidrawAutomte full Templater support
|
||
You now have ultimate flexibility over your Excalidraw templates using Templater.
|
||
- Detailed documentation available [here](https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/AutomateHowTo.md)
|
||
- I created few examples from the simple to the more complex
|
||
- Simple use-case: Creating a drawing using a custom template and following a file and folder naming convention of your choice.
|
||
- Complex use-case: Create a mindmap from a tabulated outline.
|
||
|
||
|
||
## Known issues
|
||
- On mobile (iOS and Android): As you draw left to right it opens left sidebar. Draw right to left, opens right sidebar. Draw down, opens commands palette. So seems open is emulating the gestures, even when drawing towards the center. Obsidian mobile 0.18 has resolved this issue.
|
||
- I have seen two cases when adding a stencil library did not work. In both cases, the end solution was a reinstall of Obsidian. The root cause is not clear, but maybe because of the incremental updates of Obsidian from an early version.
|
||
- Mobile support
|
||
- Positioning of the pen gets misaligned after you open the command palette.
|
||
- Your drawing will not be saved when you terminate the mobile app by closing the Obsidian task.
|
||
- Sync does not support .excalidraw files. This issue will be addressed in a later release of Obsidian sync. Until then, here are two hacks you can play with:
|
||
- You have the option to use OneDrive, Google Drive, iCloud, DropBox, etc. to sync your vault between devices.
|
||
- You can also use Obsidian Sync in conjunction with "Obsidian Git" (find it in community plugins). Be sure to set up git to ignore all files except for .excalidraw by adding the following to `.gitignore`. Obsidian Git does not work on mobile, but on Android you can use an app like MGIT to sync your `.excalidraw` files from/to the git repository.
|
||
```
|
||
#ignore all kind of files
|
||
*.*
|
||
#except excalidraw files
|
||
!*.excalidraw
|
||
```
|
||
## Tips and tricks
|
||
- If you want to sketch in fullscreen, I recommend installing the [Fullscreen Focus Mode](https://github.com/razumihin/obsidian-fullscreen-plugin) plugin.
|
||
|
||
## Feedback, questions, ideas, problems
|
||
Join the conversation about the Excalidraw plugin on [forum.obsidian.md](https://forum.obsidian.md/t/excalidraw-full-featured-sketching-plugin-in-obsidian)
|
||
|
||
Please head over to [GitHub](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues) to report a bug or request an enhancement.
|
||
|
||
## Say Thank You
|
||
If you are enjoying Excalidraw then please support my work and enthusiasm by buying me a coffee on [https://ko-fi/zsolt](https://ko-fi.com/zsolt).
|
||
|
||
Please also help spread the word by sharing about the Obsidian Excalidraw Plugin on Twitter, Reddit, or any other social media platform you regularly use.
|
||
|
||
You can find me on Twitter [@zsviczian](https://twitter.com/zsviczian), and on my blog [zsolt.blog](https://zsolt.blog).
|
||
|
||
[<img style="float:left" src="https://user-images.githubusercontent.com/14358394/115450238-f39e8100-a21b-11eb-89d0-fa4b82cdbce8.png" width="200">](https://ko-fi.com/zsolt)
|