v1.1.0 — readable diagrams, hover layer, three hosts

readable-diagrams v1.1.0

Diagrams a reader understands on first look — one JSON spec to a self-contained
HTML page, with a machine-checked comprehension gate.

Highlights

• Nine spec-driven types: architecture, flow, state, sequence, timeline, tree,
  layer stack, bar, quadrant — plus hand-authored chart families.
• Two gates: self_check.py (structure, accessibility, single-file safety) and
  comprehension_check.py (conclusion title, takeaway, numbered reading path,
  legend, caption, accent budget, type floors, 4.5:1 contrast, orthogonal connectors).
• Hover interaction with no JavaScript: hovering a node dims the rest and lights
  its connected edges; reading steps cross-highlight their node; staggered entrance;
  prefers-reduced-motion and print fall back to the static frame.
• Editorial skin: light + dark, CJK-aware typography, 4px grid, no shadows.
• Import / export: Mermaid, draw.io, Excalidraw in; SVG and PNG out.
• Ships for three hosts from one tree: DeepSeek Harness plugin
  (dsh.bundle + cordis.patch.yml + lib/index.js), Claude Code plugin
  (.claude-plugin/), Codex plugin (.codex-plugin/), plus the generic
  skills/readable-diagrams/ folder any agent can read.

Install

# DeepSeek Harness
dsh plugin --profile desktop add https://github.com/bingomu/readable-diagrams/archive/refs/tags/v1.1.0.tar.gz

# Claude Code
/plugin marketplace add bingomu/readable-diagrams

# Any agent
bash install.sh

Verification

python3 scripts/check.py renders every example, runs both gates on the rendered
and committed pages, and parses the plugin entry point. CI runs it on Python 3.9
and 3.12.

Provenance

MIT. self_check.py and the import extractors are vendored MIT code from
diagram-design; design tokens and connector grammar adapted with attribution.
Archify contributed concepts and delivery discipline, not code.