Collapsible Mermaid Code Editor with Auto‑Sync

MindSnap now includes a dedicated, collapsible Mermaid code editor panel with bi‑directional synchronization. You can switch seamlessly between visual editing and direct code editing — staying fully in control of your mind map’s structure.

Why this matters

Some workflows are simply faster in code: batch edits, global renames, or structural changes. Others are easier visually. This feature lets you choose either mode at any moment — without losing context.

Key capabilities

• Collapsible Editor Panel: Open only when needed; stays out of your way otherwise.
• Bi‑Directional Sync: Changes in code reflect in the visual map; changes in the map regenerate Mermaid code.
• Auto‑Sync Toggle: Choose automatic real‑time syncing or manual control for larger edits.
• Manual Sync & Refresh: One click to re‑generate Mermaid from the current visual map.
• Performance‑Friendly Debounce: Auto‑sync uses a short delay to avoid unnecessary re-renders during fast typing.
• Line Numbers & Indentation: Editor supports tab/shift‑tab for smart indent/outdent, and preserves indentation on newline for clean Mermaid.

How it works

1. Open the editor via the left Code Editor button. The panel slides in without blocking your canvas.
2. The first time it opens, MindSnap exports your current mind map into Mermaid syntax.
3. Type in the editor to change structure or labels.
4. Sync back:
   • With Auto‑Sync enabled, updates apply after a brief pause while typing.
   • With Auto‑Sync disabled, click Sync to apply changes instantly.
5. Close the panel anytime; your choice (auto/manual) is remembered.

Tips for power users

• Use tab/shift‑tab to indent or outdent multiple lines.
• Press Enter to auto‑continue indentation, keeping Mermaid tidy.
• Turn off Auto‑Sync when making large refactors, then sync once.
• Keep high‑level nodes simple; let details branch below for clarity.

Example Mermaid snippet

mindmap
  root((Project))
    Planning
      Scope
      Timeline
    Execution
      Tasks
      Reviews

You can paste or edit structures like these directly in the editor — then sync to visualize.

Accessibility and UX

• Keyboard‑friendly controls for toggles and actions.
• Clear focus states and compact layout that stays readable alongside your map.

Availability

This feature ships as part of the v1.0.3 release. Check the full changelog for details and additional enhancements.

—

If you have feedback or ideas to improve the editor, we’d love to hear from you. Your input helps us build the most intuitive way to create and maintain mind maps.