{"id":13500367,"url":"https://github.com/misohena/el-easydraw","last_synced_at":"2025-05-15T08:00:28.476Z","repository":{"id":44679511,"uuid":"402026750","full_name":"misohena/el-easydraw","owner":"misohena","description":"Embedded drawing tool for Emacs","archived":false,"fork":false,"pushed_at":"2025-05-12T08:08:12.000Z","size":10581,"stargazers_count":819,"open_issues_count":3,"forks_count":22,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-12T09:38:54.608Z","etag":null,"topics":["drawing","emacs","graphics","org-mode","svg"],"latest_commit_sha":null,"homepage":"https://misohena.jp/blog/2021-09-21-emacs-easy-draw.html","language":"Emacs Lisp","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/misohena.png","metadata":{"files":{"readme":"README.org","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-01T10:53:40.000Z","updated_at":"2025-05-12T08:08:16.000Z","dependencies_parsed_at":"2023-11-20T01:32:33.693Z","dependency_job_id":"0d380b31-8a4e-4202-8659-a79bf427d83c","html_url":"https://github.com/misohena/el-easydraw","commit_stats":{"total_commits":719,"total_committers":4,"mean_commits":179.75,"dds":0.006954102920723182,"last_synced_commit":"ad740d87e768052b0ef5b5e7f0822c7ac1b238fb"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misohena%2Fel-easydraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misohena%2Fel-easydraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misohena%2Fel-easydraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misohena%2Fel-easydraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/misohena","download_url":"https://codeload.github.com/misohena/el-easydraw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301420,"owners_count":22047901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drawing","emacs","graphics","org-mode","svg"],"created_at":"2024-07-31T22:00:57.611Z","updated_at":"2025-05-15T08:00:28.406Z","avatar_url":"https://github.com/misohena.png","language":"Emacs Lisp","funding_links":[],"categories":["Emacs Lisp"],"sub_categories":[],"readme":"#+TITLE: Emacs Easy Draw\n\nEmacs Easy Draw is a drawing tool that runs inside Emacs.\n\n[[file:./screenshot/edraw-screenshot.gif]]\n\n* Requirements\n- Emacs 27.2\n- Image support\n- SVG support\n- gzip and gunzip(or zlib support)\n- libxml support\n\n* Screenshots\n\n[[https://github.com/misohena/el-easydraw/wiki/Screenshots]]\n\n* Use In Org-Mode - edraw-org.el\n** Config\n\n#+begin_src emacs-lisp\n(with-eval-after-load 'org\n  (require 'edraw-org)\n  (edraw-org-setup-default))\n;; When using the org-export-in-background option (when using the\n;; asynchronous export function), the following settings are\n;; required. This is because Emacs started in a separate process does\n;; not load org.el but only ox.el.\n(with-eval-after-load \"ox\"\n  (require 'edraw-org)\n  (edraw-org-setup-exporter))\n#+end_src\n\n** Usage\n\nTo start drawing, type ~[​[edraw:]]~ and type =C-c C-o= on the link.\n\nDraw something and type =C-c C-c= and the data will be saved in the buffer.\n\n** Link Notation\n\n#+begin_src org\nBracket Links:\n\n[​[edraw:file=./example.edraw.svg]​]\n\n[​[edraw:data=\u003cbase64data\u003e​]]\n\n[​[*Example][edraw:file=./example.edraw.svg]​]\n\n[​[*Example][edraw:data=\u003cbase64data\u003e]​]\n\nAngle Links:\n\n\u003cedraw:file=./example.edraw.svg\u003e\n\n\u003cedraw:data=\u003cbase64data\u003e\u003e\n\nPlain Links:\n\nedraw:file=./example.edraw.svg\n\nedraw:data=\u003cbase64data\u003e\n#+end_src\n\nPath Syntax:\n\n: edraw:\u003cprop1\u003e=\u003cvalue1\u003e;\u003cprop2\u003e=\u003cvalue2\u003e;...;\u003cpropN\u003e=\u003cvalueN\u003e\n\nNote: If Base64 data is included in a plain link, the trailing symbol (= or +) may not be included in the range of the plain link. In that case, by specifying a dummy property at the end, you can include the entire thing in a plain link.\n\n#+begin_src org\nedraw:data=H4sIAGAXVWYAA22O0Q7CIAxFf4X0XcpmYsIC+5cpCEQEA2Swvxed0RcfmtvbnttU5NWQdvchS7ClPCbEWiutRxqTwZExhp2AHZmad+H2Dxw45/jeAqlOFSthYAyI1c7Y8jGrTtnF0B0dYBaGOCVBq7TUwzmqrY+SvhRydd5LSFr94if2PftqNwljl7YLzgJNr/7n/AQMbuxHzwAAAA==;eop=1 is a red rectangle.\n# `eop' means end of path\n#+end_src\n\n** Inline Images\n\nTo toggle the inline display mode, type =M-x edraw-org-link-image-mode=\n\n** Edit Image\n\nTo edit the image, do one of the following on the link:\n\n- =M-x edraw-org-edit-link=\n- =C-c C-o=\n- Right click on image (The right-click menu also provides some other useful functions for links)\n\n** Export\n*** As HTML\nCustomization Variables:\n\n- edraw-org-export-html-data-tag :: HTML tag used to export data links. (svg or img)\n- edraw-org-export-html-file-tag :: HTML tag used to export file links. (svg or img)\n- edraw-org-export-html-use-viewbox :: Add viewBox= attribute to svg root elements when SVG export.\n\nLink Properties:\n\n- html-tag ::\n  HTML tag used to export the link. (svg or img)\n\n  Example:\n  #+begin_src org\n  [[edraw:html-tag=img;data=\u003cbase64data\u003e]]\n  #+end_src\n\n*** As LaTeX\nI have a minimal implementation, but I don't use LaTeX usually, so there may be some problems.\n\n=[[edraw:data=]]= format creates a temporary file when exporting as LaTeX. Please let me know if there is a better way in LaTeX.\n\n*** As ODT\n\nAs with the LaTeX export, the =[[edraw:data=]]= format creates a temporary SVG file.\n\n** Regular File Link Support\n\nYou can also edit regular file links inline.\n\nFor example, create a link like this:\n\n#+begin_src org\n[​[file:example.edraw.svg]​]\n#+end_src\n\nThen do =M-x edraw-org-edit-regular-file-link= on this link and the drawing editor will appear in its place.\n\nInline display after editing is possible with org-toggle-inline-images. You can also use [[https://github.com/misohena/org-inline-image-fix#automatic-image-update][org-flyimage]] if you want to display images automatically.\n\nThe normal file link has the following drawbacks compared to the edraw link format.\n\n- No detailed settings for HTML export.\n- SVG data cannot be embedded inside org files.\n\nData URI links are technically [[https://github.com/misohena/org-inline-image-fix#data-uri-supportorg-datauri-imageel][possible]], but inline editing of Data URI links is not implemented.\n\nOn the other hand, regular file links have the advantage that they can be exported in many formats.\n\n* Edit a Single Edraw File - edraw-mode.el\n\nThe data that Emacs Easy Draw handles is a small subset of the SVG specification. The recommended file extension is .edraw.svg.\n\nEmacs Easy Draw cannot edit general SVG data, but the data it outputs can be viewed by web browsers and other software that can handle SVG.\n\n** Open .edraw.svg files using edraw-mode\n\nTo open a file with the extension .edraw.svg using edraw-mode, add the following setting to init.el.\n\n#+begin_src emacs-lisp\n(autoload 'edraw-mode \"edraw-mode\")\n(add-to-list 'auto-mode-alist '(\"\\\\.edraw\\\\.svg$\" . edraw-mode))\n#+end_src\n\nNOTE: Setup later than other modes for .svg such as image-mode.\n\nIf you don't like the long .edraw.svg extension, you can put a comment specifying the mode at the top of the file.\n\n: \u003c!-- -*- mode: edraw -*- --\u003e\n: \u003csvg ...\n\nComments in files are preserved as much as possible during editing.\n\nOr you can use magic-mode-alist.\n\n#+begin_src emacs-lisp\n(push '(\"\\\\(\u003c!--[^\u003e]*--\u003e[\\n\\t ]*\\\\)*\u003csvg .* id=\\\"edraw-\" . edraw-mode) magic-mode-alist)\n#+end_src\n\n** Quick sketch using edraw-mode\n\n#+begin_src emacs-lisp\n(autoload 'edraw \"edraw-mode\" nil t)\n#+end_src\n\nThe `edraw' command simply creates a new buffer and sets its major mode to edraw-mode. Suitable for quickly creating new diagrams. You can save as with the save-buffer (C-x C-s) command.\n\nTyping M-x xml-mode in the edraw-mode buffer will edit it as XML. Typing M-x edraw-mode again graphically edits.\n\n* Key bindings\n\nMost of the key bindings are displayed in menus and help echoes.\n\nThe key bindings that are not displayed are as follows.\n\n| left, up, right, down                                                      | Move selected objects (S-\u003cdir\u003e:10px, C-u \u003cdir\u003e:Numerical input)                   |\n| M-left, M-up, M-right, M-down                                              | Duplicate selected objects and move (M-S-\u003cdir\u003e:10px, C-u M-\u003cdir\u003e:Numerical input) |\n| mouse-3 on shapes, anchor points, background, shape picker, or edraw links | Show context menu                                                                 |\n| C-u mouse-3                                                                | Show context menu (Ignore invisible/unpickable states)                            |\n| (Select Tool) C-down-mouse-1                                               | Add/Remove clicked shape to selection list                                        |\n| (Select Tool) M-drag-mouse-1                                               | Duplicate dragged shape                                                           |\n| (Path Tool) C-u down-mouse-1                                               | Ignore existing points (Avoid connecting or moving existing points)               |\n| S-drag-mouse-1                                                             | 45 degree unit movement or square specification                                   |\n| Middle-drag                                                                | Scroll                                                                            |\n| C-wheel-up, C-wheel-down                                                   | Zoom                                                                              |\n| (In Property Editor) Middle-click                                          | Close window                                                                      |\n| (In Shape Picker) Middle-click                                             | Close window                                                                      |\n\n* Emacs Lisp\n\nThe following code is an example of inserting an editor into a buffer from Emacs Lisp.\n\n#+begin_src emacs-lisp\n(require 'edraw)\n\n(progn\n  (insert \" \")\n  (let ((editor (edraw-editor\n                 ;; Make an overlay that covers \" \"\n                 ;; 'evaporate means automatic deletion\n                 :overlay (let ((overlay (make-overlay (1- (point)) (point))))\n                            (overlay-put overlay 'evaporate t)\n                            overlay)\n                 ;; Initial SVG\n                 :svg (edraw-svg-create\n                       400 300\n                       (edraw-svg-group\n                        :id \"edraw-body\" ;; g#edraw-body is the edit target area\n                        (edraw-svg-rect 100 100 200 100 :fill \"blue\")))\n                 ;; Function called when saving\n                 :document-writer (lambda (svg \u0026rest _)\n                                    (pop-to-buffer \"*svg output*\")\n                                    (erase-buffer)\n                                    (edraw-svg-print svg nil nil 0))\n                 ;; Add one item to the main menu\n                 :menu-filter (lambda (menu-type items \u0026rest _)\n                                (pcase menu-type\n                                  ('main-menu\n                                   (append\n                                    items\n                                    `(((edraw-msg \"Close\") (lambda (editor) (edraw-close editor))))))\n                                  (_ items)))\n                 ;; Add key binding\n                 :keymap (let ((km (make-sparse-keymap)))\n                           (set-keymap-parent km edraw-editor-map)\n                           (define-key km (kbd \"C-c C-c\") (lambda () (interactive) (edraw-close (edraw-editor-at))))\n                           km)\n                 )))\n    ;; Manipulate the editor object if necessary\n    ;; Set user extra data\n    (edraw-set-extra-prop editor 'my-extra-data 12345)\n    editor\n    nil))\n#+end_src\n\n* Color Picker\n\nedraw-color-picker.el provides a color picker library and several commands.\n\nCommands to replace or insert the selected color in the buffer:\n\n- edraw-color-picker-replace-or-insert-color-at\n- edraw-color-picker-replace-color-at\n- edraw-color-picker-insert-color-at\n\nedraw-color-picker-mode.el defines two minor modes, edraw-color-picker-mode and edraw-color-picker-global-mode, which make it easy to use these commands in any buffer.\n\nedraw-color-picker-mode adds key bindings for these commands in the buffer. You can customize the bindings flexibly with:\n\n  M-x customize-variable edraw-color-picker-mode-custom-bindings\n\nYou can also bind specific keys for specific major modes. This mode also provides a context menu.\n\nedraw-color-picker-global-mode enables edraw-color-picker-mode in all buffers. If you want to enable it only for specific major modes, you can configure it with:\n\n  M-x customize-variable edraw-color-picker-global-modes\n\nTo use edraw-color-picker-global-mode, add the following to your init.el:\n\n#+begin_src elisp\n(require 'edraw-color-picker-mode)\n(edraw-color-picker-global-mode)\n#+end_src\n\nYou can also manually bind each command without using these minor modes. For example, to open the color picker with mouse-1 and C-c C-o in css-mode and mhtml-mode, configure it as follows.\n\n#+begin_src elisp\n(autoload 'edraw-color-picker-replace-color-at \"edraw-color-picker\" nil t)\n(autoload 'edraw-color-picker-replace-or-insert-color-at \"edraw-color-picker\" nil t)\n\n(defun my-edraw-color-picker-add-keys (map)\n  ;; Replaces the color of the clicked location\n  (define-key map [mouse-1] #'edraw-color-picker-replace-color-at)\n  ;; C-c C-o replaces the color in place or adds color\n  (define-key map (kbd \"C-c C-o\")\n              #'edraw-color-picker-replace-or-insert-color-at))\n\n(defun my-edraw-color-picker-enable ()\n  (my-edraw-color-picker-add-keys (current-local-map)))\n\n(add-hook 'css-mode-hook 'my-edraw-color-picker-enable)\n(add-hook 'mhtml-mode-hook 'my-edraw-color-picker-enable)\n#+end_src\n\nSettings for use with Customize buffer:\n\n#+begin_src elisp\n(with-eval-after-load \"cus-edit\"\n  ;; Add keys to the field key map\n  (my-edraw-color-picker-add-keys custom-field-keymap))\n#+end_src\n\n#+CAPTION: Show color picker inline\n[[file:./screenshot/color-picker-inline.png]]\n\nedraw-color-picker.el also provides the following functions for use from Emacs Lisp.\n\nShow color picker in minibuffer:\n- (edraw-color-picker-read-color)\n\n#+CAPTION: Show color picker in minibuffer\n[[file:./screenshot/color-picker-minibuffer.png]]\n\nA function that opens a color picker near the point:\n- edraw-color-picker-open-near-point\n\nA function that displays a color picker using an overlay:\n- edraw-color-picker-overlay\n\nThe core class of the color picker:\n- edraw-color-picker\n\n\n\n* License\n\nThis software is licensed under GPLv3. You are free to use, modify and distribute this software.\n\nIf you wish to register this software in any package archive, please fork this repository, make the necessary modifications to fit the package archive's requirements, and submit the registration on your own. Also continue with the necessary maintenance. You don't need my permission.\n\nI also welcome you to publish your improved version. If that works better than mine, I might start using it too. I may suddenly be unable to develop, and I cannot guarantee any continued development. This software is the result of what I want, so please add what you want yourself.\n\nI am not proficient in English, so please do not expect continuous communication in English. I have spent a long time using translation software to write this text, but I am not confident that the intended meaning is accurately conveyed. I don't think it has ended up with the opposite meaning, but subtle nuances may be missing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmisohena%2Fel-easydraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmisohena%2Fel-easydraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmisohena%2Fel-easydraw/lists"}