Merlay 0.6.0

[github-actions[bot]]

Merlay 0.6.0 — Flowchart shapes, diagram notes, sequence frames, and classDef styling

Mermaid, your way. A visual overlay editor for Mermaid diagrams.

🎉 Major New Features (both hosts)

• Comprehensive Flowchart Shapes & Searchable Picker — Full support for all Mermaid flowchart shapes including v11.3+ modern geometries (stadium, cylindrical database, subroutine, hexagon, trapezoid, double circle, asymmetric flag, notch rect, hourglass, tag, bolb, etc.), categorized and instantly searchable in the node shape picker.
• Built-in Icon & Image Node Shapes — Create and configure @ { icon: "..." } and @ { img: "..." } flowchart shapes with a bundled 19-glyph built-in merlay:* icon pack that renders natively across all runtimes without external CDN dependencies.
• Diagram Notes (Sequence, State, Class) — First-class visual editing for notes. Click any note on the canvas to inspect or edit its text, change placement (left, right, over), or delete notes with single-click removal.
• Sequence Diagram Control Frames — Interactive frames for loop, opt, alt, par, critical, break, and rect blocks. Select frames, rename conditions, and dissolve or delete frames with full backwards compatibility across both Mermaid 10 (native Obsidian) and Mermaid 11.
• Flowchart Node-to-Subgraph Connections — Drag-and-connect directly between nodes and subgraph boundaries (node-to-subgraph, subgraph-to-node, and subgraph-to-subgraph) with live boundary drop targets and real-time Dagre layout conflict feedback.
• ClassDef Palette & Reusable Styling — Define and manage reusable CSS styles (classDef) for flowchart diagrams. Assign classes to nodes via visual class badges.
• State Diagram Concurrency Dividers — Split composite states into parallel concurrent execution tracks (--) with dedicated Action HUD controls.
• Extended Arrowheads & Diagram Accessibility — Added open, dotted-open, and cross arrow styles for flowcharts, plus diagram-level title, accessible title (accTitle), and accessible description (accDescr) editing via the canvas info popover.
• Node Hyperlinks & Autonumber — Add external URLs or vault links to nodes (click / link statements) and toggle sequence diagram autonumbering directly from the toolbar.

🔧 Fixes & Polish

• Sequence Frame Selection: Frame hit areas now reliably capture clicks across frame borders, header tabs (polygon.labelBox), multi-word titles, and interior regions.
• Note Targeting: Direct note clicking now matches against AST note text for 100% accurate note association even on complex sequence timelines.
• Direction Conflict Feedback: Subgraph direction conflict warnings are embedded directly into the flow toggle button with high-contrast, readable status pills.
• Title Persistence: Diagram title updates save atomically to frontmatter, preventing unintended clears.

Install (Obsidian)

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.

Install (VS Code)

Install from the VS Code Marketplace or Open VSX, or grab the .vsix attached below → Extensions → … → Install from VSIX.

Full Changelog: 0.5.1...0.6.0

What's Changed

• chore(ci): bump actions to node24 runtime, pin ubuntu-24.04 by @dev-hashemi in chore(ci): bump actions to node24 runtime, pin ubuntu-24.04 #12

New Contributors

• @dev-hashemi made their first contribution in chore(ci): bump actions to node24 runtime, pin ubuntu-24.04 #12

Full Changelog: 0.5.1...0.6.0

---

This discussion was created from the release Merlay 0.6.0.