Emacs Easy Draw
Emacs Easy Draw is a drawing tool that runs inside Emacs.
Requirements
- Emacs 27.2
- Image support
- SVG support
- gzip and gunzip(or zlib support)
- libxml support
Screenshots
https://github.com/misohena/el-easydraw/wiki/Screenshots
Use In Org-Mode - edraw-org.el
Config
(with-eval-after-load 'org
(require 'edraw-org)
(edraw-org-setup-default))
;; When using the org-export-in-background option (when using the
;; asynchronous export function), the following settings are
;; required. This is because Emacs started in a separate process does
;; not load org.el but only ox.el.
(with-eval-after-load "ox"
(require 'edraw-org)
(edraw-org-setup-exporter))Usage
To start drawing, type [[edraw:]] and type C-c C-o on the link.
Draw something and type C-c C-c and the data will be saved in the buffer.
Link Notation
[[edraw:file=./example.edraw.svg]]
[[edraw:data=<base64data>]]
[[*Example][edraw:file=./example.edraw.svg]]
[[*Example][edraw:data=<base64data>]]
Inline Images
To toggle the inline display mode, type M-x edraw-org-link-image-mode
Edit Image
To edit the image, do one of the following on the link:
M-x edraw-org-edit-linkC-c C-o- Right click on image (The right-click menu also provides some other useful functions for links)
Export as HTML
Customization Variables:
- edraw-org-export-html-data-tag
- HTML tag used to export data links. (svg or img)
- edraw-org-export-html-file-tag
- HTML tag used to export file links. (svg or img)
- edraw-org-export-html-use-viewbox
- Add viewBox= attribute to svg root elements when SVG export.
Link Properties:
- html-tag
-
HTML tag used to export the link. (svg or img)
Example:
[[edraw:html-tag=img;data=<base64data>]]
Edit a Single Edraw File - edraw-mode.el
(autoload 'edraw-mode "edraw-mode")
(add-to-list 'auto-mode-alist '("\\.edraw\\.svg$" . edraw-mode))NOTE: Setup later than other modes for .svg such as image-mode.
Emacs Easy Draw can only handle a small subset of the SVG specification, but the files it outputs can be viewed in a browser or other software that can handle SVG.
Key bindings
Most of the key bindings are displayed in menus and help echoes.
The key bindings that are not displayed are as follows.
| left, up, right, down | Move selected objects (S-<dir>:10px, C-u <dir>:Numerical input) |
| M-left, M-up, M-right, M-down | Duplicate selected objects and move (M-S-<dir>:10px, C-u M-<dir>:Numerical input) |
| Right-click on shapes, anchor points, background, shape picker, or edraw links | Show context menu |
| (Select Tool) C-down-mouse-1 | Add/Remove clicked shape to selection list |
| (Select Tool) M-drag-mouse-1 | Duplicate dragged shape |
| (Path Tool) C-u down-mouse-1 | Ignore existing points (Avoid connecting or moving existing points) |
| S-drag-mouse-1 | 45 degree unit movement or square specification |
| Middle-drag | Scroll |
| C-wheel-up, C-wheel-down | Zoom |
| (In Property Editor) Middle-click | Close window |
| (In Shape Picker) Middle-click | Close window |
Emacs Lisp
The following code is an example of inserting an editor into a buffer from Emacs Lisp.
(require 'edraw)
(progn
(insert " ")
(let ((editor (edraw-editor
;; Make an overlay that covers " "
;; 'evaporate means automatic deletion
:overlay (let ((overlay (make-overlay (1- (point)) (point))))
(overlay-put overlay 'evaporate t)
overlay)
;; Initial SVG
:svg (let ((initial-svg (svg-create 400 300)))
(dom-append-child
initial-svg
(dom-node 'g (list (cons 'id "edraw-body")) ;; g#edraw-body is the edit target area
(dom-node 'rect (list (cons 'x "100")
(cons 'y "100")
(cons 'width "200")
(cons 'height "100")
(cons 'fill "blue")))))
initial-svg)
;; Function called when saving
:document-writer (lambda (svg &rest _)
(pop-to-buffer "*svg output*")
(erase-buffer)
(edraw-svg-print
svg nil 'edraw-svg-print-attr-filter 0))
;; Add one item to the main menu
:menu-filter (lambda (menu-type items &rest _)
(pcase menu-type
('main-menu
(append
items
`(((edraw-msg "Close") (lambda (editor) (edraw-close editor))))))
(_ items))))))
;; Initialize editor
(edraw-initialize editor)
;; Add key binding
(overlay-put (edraw-overlay editor)
'keymap
(let ((original-keymap (overlay-get (edraw-overlay editor) 'keymap))
(km (make-sparse-keymap)))
(set-keymap-parent km original-keymap)
(define-key km (kbd "C-c C-c") (lambda () (interactive) (edraw-close (edraw-editor-at))))
km))))Color Picker
edraw-color-picker.el contains a color picker library and some commands.
Show color picker in minibuffer:
- (edraw-color-picker-read-color)
Insert the selected color into the buffer:
- (edraw-color-picker-insert-color)
- (edraw-color-picker-replace-color-at-point)
A function that opens a color picker near the point:
- edraw-color-picker-open-near-point
A function that displays a color picker using an overlay:
- edraw-color-picker-overlay
The core class of the color picker:
- edraw-color-picker
