Merlay 0.3.0

[github-actions[bot]]

Merlay 0.3.0 — Touch & mobile support, high-fidelity SVG/PNG export, and fullscreen canvas

Mermaid, your way. A native visual overlay editor for Mermaid diagrams in Obsidian.

Features

• Full Touch & Mobile Support:
  • Pointer Events Unification: Canvas interactions, dragging, and connecting are unified on Pointer Events, enabling fluid drag-to-connect gestures with your finger on phones and tablets.
  • Touch Gestures: Two-finger pinch-to-zoom centered on the gesture midpoint, one-finger canvas panning, and hold-then-drag marquee selection.
  • Touch-First Interactions: Tap to select, double-tap for inline label editing, and long-press (500ms) for multi-selection toggles.
  • Touch-Friendly Controls: Minimum 44px hit targets on interactive controls, touch-adapted hint labels, and an on-canvas Duplicate HUD action for keyboard-free node cloning.
  • Adaptive Mobile Layout: Modals automatically open fullscreen on narrow screens (<700px) and coarse pointers, with a compact, wrapped top bar.
• High-Fidelity SVG & PNG Export:
  • Export diagrams directly to the clipboard or download files with one click.
  • Inlines live computed styles via lockstep tree traversal to preserve exact colors, shapes, and font styling from your active Obsidian theme (Light, Dark, and community themes).
  • Preserves native SVG foreignObject for vector editors, while converting text to native SVG text elements during PNG rasterization for crisp, untainted canvas rendering.
  • Supports both transparent and theme-matching background fills.
• Fullscreen Modal & Fit View Camera:
  • Maximize your diagram workspace with the top bar Fullscreen toggle button or the Shift + F shortcut.
  • Re-anchored Fit View camera math that accounts for SVG mount offsets to center diagrams with precision.
• Visual Refusal Feedback for Connections:
  • Instant visual feedback when dragging connections toward invalid targets: red connection drag-lines, a red target glow, and a not-allowed cursor.
  • Avoids silent drop failures and makes diagram syntax rules obvious during editing.
• Node Link Support & Edit Isolation:
  • Full round-trip preservation of Mermaid click, href, accTitle, accDescr, title, and comment statements.
  • Edit-mode link suppression: clicking a hyperlinked node in edit mode selects it for editing rather than navigating away from your note.
  • Added a dedicated Open link button in the selection HUD to trigger links on demand.
  • Enabled cross-subgraph drag-connections between nodes in different flowchart clusters.

Fixes & Improvements

• Community Guidelines & Compliance: Integrated automated Obsidian community directory compliance tests to prevent disallowed Electron/Node imports, avoid innerHTML misuse, and enforce mobile compatibility.
• CI / Build Workflow: Added GitHub Actions validation for tests and production bundling on all pull requests.
• Dependency Hygiene: Synced distribution bundles and automated build asset releases via GitHub Actions.

Install

BRAT (beta): add https://github.com/dev-hashemi/merlay in BRAT → Add Beta plugin.

Manual: download main.js, manifest.json, styles.css below into .obsidian/plugins/merlay/, then enable Merlay under Settings → Community plugins.

Requires Obsidian 1.4.0 or newer. Desktop and mobile supported.

Notes

• Flowchart and state diagrams are fully visual; other diagram types open view-only with selection.
• Please report issues at https://github.com/dev-hashemi/merlay/issues — include Obsidian version, installer version, and a minimal mermaid block that reproduces the problem.

Full Changelog: 0.2.2...0.3.0

---

This discussion was created from the release Merlay 0.3.0.