Skip to content

feat: add mermaid.js diagram rendering support#116

Merged
backnotprop merged 1 commit intomainfrom
feat/ui-enhancements
Jan 28, 2026
Merged

feat: add mermaid.js diagram rendering support#116
backnotprop merged 1 commit intomainfrom
feat/ui-enhancements

Conversation

@backnotprop
Copy link
Owner

Summary

  • Detect mermaid code blocks and render as interactive diagrams
  • Dark theme matching Plannotator UI
  • Toggle between source code (default) and rendered diagram view
  • Use getBBox() to recalculate viewBox for proper centering (fixes mermaid's off-center rendering bug)
  • Error state shows source code fallback
  • Add example mermaid diagram to demo plan

Test plan

  • Run bun run dev:hook and open http://localhost:3000
  • Scroll to Architecture section - should show mermaid source code by default
  • Click toggle button (top-right on hover) to render diagram
  • Verify diagram is centered properly
  • Verify dark theme looks good

Closes #115

🤖 Generated with Claude Code

- Detect mermaid code blocks and render as interactive diagrams
- Dark theme matching Plannotator UI
- Toggle between source code and rendered diagram view
- Use getBBox() to recalculate viewBox for proper centering
- Error state shows source code fallback
- Add mermaid diagram to demo plan

Closes #115

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@backnotprop backnotprop merged commit 5474469 into main Jan 28, 2026
@backnotprop backnotprop deleted the feat/ui-enhancements branch January 28, 2026 17:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ENHANCEMENT] Add mermaid.js support for browser-based rendering in plannotator

1 participant