FIXES:
🔧 Shape Detection: Now properly honors Mermaid syntax
- A[text] → Rectangle ✅
- B(text) → Circle ✅
- C{text} → Diamond ✅
- Added debug logging for shape parsing
💾 Position Persistence: localStorage integration
- Positions save automatically when dragging
- Positions restore on page refresh/reload
- Positions preserved during sync operations
- 'Reset Positions' button to clear saved positions
🔄 Sync Position Preservation:
- generateMermaidCode() now saves positions before updating
- No more position loss during visual-to-code sync
- LocalStorage acts as position memory between operations
🎯 Better Initial Positioning:
- Smarter random positioning (avoids edges)
- Saved positions take priority over automatic layout
- Clear debugging for position loading/saving
The three major issues are now resolved:
✅ Shapes honor Mermaid syntax (B(Go shopping) = circle)
✅ Positions persist across sessions (localStorage)
✅ Sync operations preserve layout (no jumping\!)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features added:
- Full property panel integration with D3 renderer
- Node editing: text, shape, colors with live visual updates
- Edge editing: labels, types, colors, widths with live updates
- Element selection with visual highlighting
- Delete functionality for nodes and edges with cascade cleanup
- Bidirectional sync: D3 visual changes → Mermaid code updates
- Shape transformation support (rectangle ↔ circle ↔ diamond)
- Real-time code generation preserving all styling
D3 renderer now has feature parity with Mermaid renderer plus:
✅ Persistent positioning (no jumping back!)
✅ Smooth drag & drop interactions
✅ Live property editing with instant visual feedback
✅ Complete bidirectional synchronization
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features:
- D3.js renderer using existing Mermaid parser
- True drag & drop with persistent positioning
- Force simulation for automatic initial layout
- Support for node shapes (rectangle, circle, diamond)
- Edge labels and styling from Mermaid syntax
- Click handlers for nodes and edges (ready for property editing)
- Maintains full compatibility with Mermaid syntax
Usage:
- Click 'Render with D3' to use D3 renderer instead of Mermaid
- Drag nodes to reposition - positions stay fixed
- All existing Mermaid code parsing works unchanged
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features implemented:
- Visual node/edge editing with property panels
- Drag and drop node positioning
- Color customization for nodes and edges
- Text editing with real-time updates
- Bidirectional Mermaid code synchronization
- Subgraph/grouping support for layout control
- Export functionality to JSON with position data
- Layout lock system (experimental)
- Edge label editing and styling
- Comprehensive Mermaid syntax parser
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
