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-link
C-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

afidegnum / el-easydraw