Merlay 0.4.0

Merlay 0.4.0 — Mindmaps, 4 Diagram Types, and Universal Themes

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

Merlay 0.4.0 is a major milestone expanding visual interactive editing to 4 diagram types, introducing native Mindmap editing, and bringing universal diagram themes with 100% portability.

---

🚀 What's New in 0.4.0

🧠 1. Mindmap Diagram Support

• Interactive Tree Editing: Full visual editing for hierarchical Mermaid mindmaps (mindmap).
• Subtopic Sprouting: Select any topic and click + Subtopic to sprout a child branch instantly.
• Drag-to-Reparent: Drag any topic and release onto another topic to move branches across the tree.
• Node Shapes & Icons: Customize mindmap shapes (circle, rounded, rectangle, cloud, bang/burst, hexagon) and preserve FontAwesome icons (::icon(...)) verbatim.
• Sequential DOM Resolution: Resolves Mermaid's runtime SVG sequential IDs (node_0, node_1) cleanly back to authored topics.

🎨 2. Universal Global Diagram Themes (Zero Lock-In)

• Official Themes Across All Diagrams: Easily switch between Auto (System), Default, Neutral, Forest, Dark, and Base directly from the top bar.
• 100% Standard YAML Frontmatter: Emits standard Mermaid v10+ configuration (--- config: { theme: ... } ---).
• Zero Lock-In: Pure native syntax that renders identically in GitHub, GitLab, Notion, and Mermaid Live Editor without proprietary metadata.
• Obsidian Auto Theme: Selecting Auto (System) removes the theme override, automatically adapting to your active Obsidian dark/light mode.

📊 3. Four Fully Supported Diagram Types

Merlay now supports visual interactive editing across 4 diagram families:

1. Flowcharts (flowchart, graph): nodes, shapes, arrows, labels, subgraphs, direction.
2. State Diagrams (stateDiagram-v2): states, choices, forks, joins, composites, start/end anchors.
3. Sequence Diagrams (sequenceDiagram): participants, actors, messages, boxes, autonumber.
4. Mindmaps (mindmap): central root, subtopics, branching hierarchy, shapes, icons.

(Other diagram kinds open in high-performance view-only mode with pan, zoom, and SVG element inspection).

⚡ 4. Unified Frontmatter Architecture & Reliability

• 100% Centralized Frontmatter: Fully unified frontmatter splitting and serialization across all diagram engines with zero duplicated parsing code.
• Preserve User Code: Unknown statements, comments, classes, and directives survive all visual edits verbatim.
• On-The-Fly Style Inheritance: Newly sprouted steps automatically inherit diagram default styles.

---

📦 Installation

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

Manual: Download main.js, manifest.json, and styles.css from the assets below into your vault under .obsidian/plugins/merlay/, then enable Merlay under Settings → Community plugins.

Requires Obsidian 1.4.0 or newer. Desktop and mobile supported.

Full Changelog: 0.3.2...0.4.0

Merlay 0.3.2

Merlay 0.3.2 — Obsidian review compliance and security hardening

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

Fixes & Compliance

• Obsidian Review Compliance:
  • No Static Style Assignments (obsidianmd/no-static-styles-assignment):
    • Replaced all static inline style assignments on exported SVG elements with standard SVG presentation attributes (fill, stroke, stroke-width, stroke-dasharray).
    • Added .merlay-color-probe utility class to styles.css to read computed theme variables without inline style mutations.
    • Used dynamic variable bindings for root SVG dimensions and export background colors.
  • Safe SVG Parsing (@microsoft/sdl/no-inner-html):
    • Removed unsafe div.innerHTML fallback in parseSvgString(), relying entirely on standard DOMParser with image/svg+xml and text/html.
    • Removed exportDiagram.ts from compliance allowlist; zero innerHTML exceptions remain in the codebase.
  • ESLint Comments (eslint-comments/require-description):
    • Eliminated undescribed eslint-disable directive comments; refactored showNotice() to resolve runtime Obsidian module safely across headless and plugin environments.
• Static Compliance Test Suite:
  • Upgraded tests/obsidianCompliance.test.ts to statically test for forbidden static style assignments, undescribed directive comments, and unverified innerHTML usage on every build.

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.3.1...0.3.2

Merlay 0.3.1

Merlay 0.3.1 — Fix drag-connect hit-testing and subgraph inner-node priority

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

Fixes & Improvements

• Drag-to-Connect Hit Testing:
  • Fixed an issue where drag-connect stopped creating edges between nodes inside subgraphs or across different subgraphs.
  • Bypassed pointer capture on mouse pointers to preserve natural DOM event routing and visual hit-testing.
  • Used document.elementFromPoint to accurately detect the visual target under the cursor or finger during connection dragging.
• Subgraph Inner-Node Priority:
  • Prioritized inner nodes over enclosing subgraph containers within the 50px snap radius so container clusters never steal drops or hover halos from child nodes.
  • Restored edge drop hit-testing to cleanly split flows when intermediate nodes are dropped onto connection lines.
  • Fixed overlay container pointer interception by setting pointer-events: none on .mermaid-native-overlay.

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.3.0...0.3.1

Merlay 0.3.0

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

Merlay 0.2.2

Merlay 0.2.2 — Light theme and custom theme compatibility

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

Fixes & Improvements

• Full Light Theme & Custom Theme Compatibility:
  • Dynamically themed the editor canvas, grid dots, top bar, segmented controls, hint pills, popovers, and slide-out code drawer using native Obsidian CSS variables (--background-primary, --background-secondary, --text-normal, --text-muted, --background-modifier-border, etc.).
  • Replaced hardcoded dark hex colors across all editor components, ensuring seamless visual integration with Light mode, Dark mode, and custom Obsidian themes (Minimal, Dracula, Catppuccin, AnuPpuccin, Nord, etc.).
  • Preserved authentic native Mermaid.js SVG rendering with full fidelity in both Light and Dark modes.
  • Synchronized halos and bounding boxes with Obsidian's workspace css-change event for real-time responsiveness when toggling themes.
• Accent Color Adaptability:
  • Connection drag-lines and selection halos now dynamically adapt to the user's Obsidian accent color (--interactive-accent).

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.1...0.2.2

Merlay 0.2.1

Merlay 0.2.1 — Community lint compliance and sequence diagram improvements

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

Fixes & Improvements

• Sequence diagram interactivity: Highlight the full participant box and vertical lifeline on hover/selection, and clearly indicate drop targets when dragging to connect between participants.
• Zero community review warnings:
  • Refactored CSS selectors and rules to eliminate high-specificity overrides without regressions.
  • Implemented settings tab UI definitions using Obsidian Setting builders.
  • Resolved TypeScript unbound-method and unnecessary-assertion linter warnings.
  • Improved edge clone halo rendering to ensure cleanly bounded selection halos without stale SVG artifacts.
• Obsidian API compliance: Adopted setCssStyles() in normalizeSvgDimensions per Obsidian community plugin submission guidelines.

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.0...0.2.1

Merlay 0.2.0

Merlay 0.2.0 — Direct shape connections, nested groups, and 1:1 canvas scaling

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

Features

• Direct shape drag-to-connect: Drag directly from any shape, cluster, or lifeline to initiate connections. Replaces the static hover handle with a subtle, non-intrusive connection hint pill. A 6px movement deadband safeguards single-click selection and double-click inline text editing.
• Dynamic perimeter anchoring: Rubber-band connection lines dynamically originate from the node boundary facing the cursor for natural, smooth line drawing.
• Full multi-level group nesting: Subgraphs in flowcharts and composite states in state diagrams now support arbitrary nesting depths with recursive serialization that round-trips cleanly.
• Context-aware group operations: Grouping members with a shared parent nests inside that parent; removing a node steps out one level into its parent rather than ejecting to the root; fully drained source groups dissolve automatically with transition retargeting.
• Dedicated composite state anchors: Added independent Add Start and Add End HUD action buttons directly on composite states in state diagrams.

Fixes & Improvements

• 1:1 scale SVG rendering: Normalized SVG dimensions by extracting natural viewBox coordinates into explicit width and height attributes, preventing diagrams from shrinking or scaling down inside the canvas.
• Isolated group selection: Group boundaries are bound to their specific cluster element, ensuring only the targeted group is highlighted on selection.
• Undo/redo interactivity persistence: Re-bound SVG interactivity after undo/redo actions so connections, groups, and composite states remain selectable and interactive.
• Composite state syntax error resolution: Resolved Mermaid No such shape: roundedWithTitle errors by emitting bare state identifiers inside composite blocks, and excluded composite anchors from marquee selection.
• Community review compliance & docs: Cleared remaining review warnings (globals, sentence casing) and updated README banner image URLs to absolute paths for the Obsidian plugin catalog.

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.1.2...0.2.0

Merlay 0.1.2

Merlay 0.1.2 — Review warning cleanup

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

Fixes

• Clear all automated-review warnings: replace any with precise types (unknown + narrowing for AST and errors, MermaidApi interface, MenuItemWithSubmenu, EditorWithCm), drop unnecessary assertions and unused imports, use window. timers and Obsidian createSvg/createDiv helpers, mark floating promises with void.
• No behavior changes; full test suite (220 tests) passes.

Deferred (warnings only, no action needed): !important in styles (required to override Obsidian/theme defaults) and the declarative settings API (would raise minAppVersion).

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.1.1...0.1.2

Merlay 0.1.1

Merlay 0.1.1 — Community review compliance

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

Fixes

• Pass Obsidian community plugin review: rendered Mermaid SVG is parsed into inert nodes and adopted into the DOM instead of innerHTML, preserving Mermaid's theme <style> (scripts and inline handlers are removed before insertion).
• Replace direct element.style writes with setCssStyles() across canvas interactivity and the Reading-view edit button.
• Use Setting.setHeading() for settings section titles instead of raw HTML headings.
• Drop deprecated builtin-modules in favor of Node's module.builtinModules in the build config.

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.1.0...0.1.1

Merlay 0.1.0

Merlay 0.1.0 — First public release

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

Highlights

• Visual Mode — hover any mermaid block in Reading View or Live Preview and hit Visual Mode for a focused full-screen editor. Zero note distraction.
• Relational sprouting — select a node, click + Next Step to spawn a connected downstream step oriented to your diagram flow (LR / TD).
• Drag-to-connect — drag from a node's handle onto any other node to create an edge.
• Inline editing — double-click a node to rename it; click an edge for the Edge HUD (relabel or delete).
• Camera stabilization — the canvas pins the active node on re-render, no jump-scares.
• Live Syntax Drawer — slide-out drawer with the live Mermaid source, updating in real time.
• Standalone .mmd / .mermaid files — create and edit diagram files from the explorer, ribbon, or command palette.
• Zero lock-in — output is 100% clean, standard Mermaid syntax. No comment hacks, full round-trip with LLMs and git.

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: https://github.com/dev-hashemi/merlay/commits/0.1.0