feat: integrate mermaid.js for diagram rendering #319
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
My fork has other features like Git sync and S3 uploader. |
Refactor the Mermaid diagram component for improved interactivity, performance, and styling.
- **`InteractiveMermaid.vue`**:
- Implemented a more robust fullscreen mode with a backdrop and dedicated close button.
- Migrated controls to a data-driven structure for better extensibility.
- Unified SVG rendering and introduced loading/empty states for better user feedback.
- Refined panning and zooming mechanisms for smoother interaction.
- **`ToastEditor.vue`**: Optimized Mermaid rendering to occur only when the preview tab is actively selected, improving editor performance.
- **`ToastViewer.vue`**: Streamlined component lifecycle by removing unnecessary watchers and unmount hooks.
- **`mermaidRenderer.js`**: Simplified cleanup logic for Mermaid component instances.
- **`toastui-editor-overrides.scss`**: Updated styles to support the new fullscreen behavior, loading indicators, and overall visual consistency of Mermaid diagrams.
…t selection - Fixes a production-only fullscreen rendering crash by rendering the SVG only once and using CSS transforms to toggle the fullscreen view. - Prevents unexpected page scrolling on fullscreen exit by saving and restoring the window\'s scroll position. - Enables text selection in complex diagrams (using `foreignObject`) and error messages by refining the click-and-drag panning logic.
…py-to-clipboard feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces support for rendering Mermaid.js diagrams, allowing users to create and view flowcharts, sequence diagrams, and more directly within their notes. This enhancement significantly expands the capabilities of Flatnotes as a technical documentation and note-taking tool.
Features
mermaidare now automatically rendered as interactive SVG diagrams.InteractiveMermaid.vue): A new, self-contained Vue component that provides:Implementation Details
mermaidlibrary topackage.json.mermaidRenderer.js): A new utility module is responsible for finding Mermaid code blocks and mounting theInteractiveMermaid.vuecomponent. This approach ensures proper Vue lifecycle management and cleanup.ToastEditor.vueandToastViewer.vueare updated to utilize the new renderer, enabling diagram support in both the live preview and the final note view.toastui-editor-overrides.scssto support the interactive controls, fullscreen mode, and theming of the Mermaid viewer.This feature is designed to be modular and minimally invasive to the core application logic. Looking forward to your feedback!
This feature was developed with the assistance of Gemini 2.5 Pro. Please let me know if any changes are needed. Thank you!
Dark Theme:
Error:
