Diagram editor built with ETAF: shapes, text and orthogonal connectors with SVG and Markdown export
app
  • Emacs Lisp 72%
  • Python 27.2%
  • Makefile 0.7%
Find a file
Kinneyzhang b4c2115099
Some checks failed
Repository structure / structure (push) Has been cancelled
feat(etaf-diagram): reflow the layout when the window narrows
Resizing used to leave rows wider than the window, so the buffer scrolled
sideways and the edges of the drawing were cut off.

- Measure the window in character columns and register the runtime viewport as
  a dependency, so a resize re-renders every panel that reads the width.
- Drop the rail below 70 columns and the inspector below 46: the rail's tools
  have keys, while the inspector holds the label field, so it goes second.
- Keep the canvas at 12 columns and let it clip, instead of demanding more than
  the window has.
- Let the status bar drop its key caps and shorten its hint before it can
  overflow.
- Clip the rail, the inspector and the panel row instead of letting their
  content grow the row and push the status bar out of the frame.

Validation: make check (structure, compilation, 14 acceptance scenarios, 29 API
declarations); a live frame at 130, 100, 80, 70, 60, 50 and 40 columns rendered
no line wider than the window, kept the inspector from 46 up, and kept the rail
from 70 up.
2026-10-31 18:04:02 +08:00
.githooks feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
.github/workflows feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
docs feat(etaf-diagram): reflow the layout when the window narrows 2026-10-31 18:04:02 +08:00
lisp feat(etaf-diagram): reflow the layout when the window narrows 2026-10-31 18:04:02 +08:00
scripts feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
tests feat(etaf-diagram): reflow the layout when the window narrows 2026-10-31 18:04:02 +08:00
.editorconfig feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
.gitignore feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
CHANGELOG.md feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
etaf-diagram.el fix(etaf-diagram): load the implementation from a checkout entry 2026-10-31 12:24:52 +08:00
LICENSE feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
Makefile feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00
README.md feat(etaf-diagram): add the diagram editor application 2026-10-31 12:23:44 +08:00

ETAF Diagram

A diagram editor for Emacs built as an ETAF application. Shapes, text and orthogonal connectors live in one ordinary buffer: drag them with the mouse or move them with the keyboard, then export the drawing as SVG or Markdown.

Capabilities

  • M-x etaf-diagram-open opens a new diagram; M-x etaf-diagram-open-file edits a saved one. The framework owns the buffer, the default face and the close hook through etaf-app-open.
  • Four shape kinds — rectangle, rounded rectangle, diamond and text — plus orthogonal connectors between them, each with an optional label.
  • Drag a shape to move it, drag a corner handle to resize it, drag from a shape edge to another shape to connect them; the canvas pans by dragging empty space and follows the arrow keys.
  • Keyboard work: v select, r rectangle, o rounded, d diamond, t text, a arrow, u undo, y redo, s save, C-d delete, e edit the label, g toggle the grid, f fit the drawing into the window.
  • The document saves as JSON (*.etaf-diagram) and exports as SVG (etaf-diagram-export-svg) or as a Markdown document that carries both the character drawing and a list of every node (etaf-diagram-export-markdown).
  • The canvas paints with faces, not images: box-drawing characters for the grid and the connectors, so the drawing stays readable in any theme and in plain text.
  • The palette comes from the appearance the host provides and the Emacs theme otherwise, so the editor follows a theme switch without a reload.

Prerequisites

Requirement Why Check
Emacs 29.1 or newer the ETAF runtime and Ebox emacs --version
ETAF, ETAF UI, Ebox and ECSS on load-path rendering and the component catalog see Installation

Installation

Checkout users add the repository roots to load-path and require the entry:

(add-to-list 'load-path "/path/to/etaf-diagram")
(add-to-list 'load-path "/path/to/etaf")     ; plus etaf-ui, ebox, ecss
(require 'etaf-diagram)

The package installs from the ETAF archive with M-x etaf-install RET etaf-diagram RET.

A minimal example

(let* ((session (etaf-diagram-create :name "架构图"))
       (client (etaf-diagram-add-shape session 'rect
                                       :x 3 :y 2 :width 18 :height 4
                                       :label "客户端"))
       (model (etaf-diagram-add-shape session 'rounded
                                      :x 30 :y 2 :width 17 :height 4
                                      :label "模型")))
  (etaf-diagram-connect session client model :label "编辑")
  (etaf-app-open "*diagram*" (etaf-diagram-view session) :state session :display t))

etaf-diagram-shapes and etaf-diagram-edges return plain plists, so the same session also drives exports and tests without a buffer:

(etaf-diagram-export-svg session "/tmp/arch.svg")
(princ (etaf-diagram-markdown session))

Documentation

  • The supported interface inventory is the Commentary of etaf-diagram.el.
  • docs/manual.md covers the workflows: drawing, connecting, editing labels, saving, exporting and recovering from a failed load.
  • docs/architecture.md explains how a session, the canvas renderer and the ETAF views fit together.

Checks

make check    # structure, byte compilation, acceptance tests, API signatures
make test     # behavioural scenarios only

License

GPL-3.0-or-later.