Skip to content

Merlay 0.3.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 17 Sep 20:18
· 41 commits to main since this release
0.3.0
2cc39cb

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

Assets 5
Loading
0 Join discussion