- TypeScript 70.3%
- JavaScript 23.7%
- Svelte 3.5%
- CSS 1.1%
- HTML 0.9%
- Other 0.5%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
|
All checks were successful
Build on Push and create Release on Tag / build (push) Successful in 2m42s
|
||
| .forgejo/workflows | ||
| asset | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| .npmrc | ||
| CHANGELOG.md | ||
| icon.png | ||
| LICENSE | ||
| package.json | ||
| plugin.json | ||
| pnpm-workspace.yaml | ||
| preview.png | ||
| README-zh_CN.md | ||
| README.md | ||
| svelte.config.js | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
| vite.config.ts.timestamp-1743541342564-d66840ad6dd8b.mjs | ||
| yaml-plugin.js | ||
SiYuan js-draw Plugin
This plugin allows you to embed js-draw whiteboards anywhere in your SiYuan documents.
Features
- Stylus support: full stylus support, with pressure sensitivity.
- Light/dark mode: draw in light or dark mode, and have your drawings automatically adapt to your SiYuan theme.
- PDF import: draw, highlight and edit on a copy of your PDF file.
- Auto-save: your drawing is saved automatically as you draw.
- Optimized for multi-device: edit on a device and sync to others with auto-refresh.
- Fully customizable: all the options you need in the plugin settings page.
- And much more: all the features of js-draw are available.
For the planned features, check out the Projects tab!
Usage instructions
Install the plugin from the marketplace by searching for js-draw.
Creating a whiteboard
There are two ways to create a new whiteboard:
- Slash command — type
/Insert whiteboardin your document and select the menu entry. - Keyboard shortcut / toolbar icon — press
Alt+Shift+Dor click the toolbar icon without selecting anything. A new whiteboard will be inserted at your cursor position.
The editor will open in a new tab (or dialog on mobile). Draw what you like, then click Save and close the editor.
Editing a whiteboard
Select an existing whiteboard by left-clicking it, then open the editor in one of these ways:
- Press
Alt+Shift+Dor click the toolbar icon. - Right-click the whiteboard (or tap the three dots on mobile) and choose Plugin → Edit whiteboard.
Importing a PDF
Right-click on a PDF reference in your notes, then click Plugin > Import PDF to JS-Draw Whiteboard.
The PDF import will then start, and may take several seconds depending on your hardware and the size of the document.
Once the import is done, the Editor will open, and the reference to the editable copy of the PDF will be copied to your clipboard.
Simply paste it anywhere in your notes. You will be able to edit it normally as any other JS-Draw whiteboard.
Contributing
Contributions are always welcome!
The Chinese translation is made by AI, and I'm unable to thorougly verify it because I don't speak Chinese. If you do and find issues, please let me know.
Please open an issue or contact me if you'd like to help!
Thanks to
This project couldn't have been possible without (in no particular order):
- The SiYuan project
- Upstream js-draw, from which the fork used by this project is derived
- SiYuan plugin sample with vite and svelte
- siyuan-drawio-plugin and siyuan-plugin-whiteboard for inspiration and bits of code
Make sure you check them out and support them as well!
License
The original plugin framework is developed by SiYuan 思源笔记 and licensed under the MIT license.
All changes made by me are copyright MassiveBox 2025, and licensed under the MIT license.
