Skip to content

Feature/117 add support for mermaidjs diagrams in markdown pages#249

Merged
perber merged 5 commits intomainfrom
feature/117-add-support-for-mermaidjs-diagrams-in-markdown-pages
Oct 31, 2025
Merged

Feature/117 add support for mermaidjs diagrams in markdown pages#249
perber merged 5 commits intomainfrom
feature/117-add-support-for-mermaidjs-diagrams-in-markdown-pages

Conversation

@perber
Copy link
Owner

@perber perber commented Oct 30, 2025

No description provided.

@perber perber linked an issue Oct 30, 2025 that may be closed by this pull request
@perber perber marked this pull request as ready for review October 30, 2025 17:35
Copilot AI review requested due to automatic review settings October 30, 2025 17:35
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds Mermaid diagram rendering support to the markdown preview functionality. The implementation includes a custom React hook for injecting rendered Mermaid diagrams into the preview, along with necessary CSS styling and component integration.

  • Adds mermaid library (v11.12.0) for diagram rendering
  • Implements custom hook useMermaidInjector with diagram caching and reactive updates
  • Integrates Mermaid code block rendering into the markdown preview component

Reviewed Changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
ui/leafwiki-ui/src/lib/utils.ts Adds unused hashString utility function
ui/leafwiki-ui/src/index.css Adds CSS rules for Mermaid diagram containers
ui/leafwiki-ui/src/features/preview/useMermaidInjector.ts Implements custom hook for Mermaid diagram rendering and injection
ui/leafwiki-ui/src/features/preview/remarkLineNumber.ts Adds remark plugin to attach line numbers to markdown nodes
ui/leafwiki-ui/src/features/preview/MermaidBlock.tsx Creates component wrapper for Mermaid diagrams
ui/leafwiki-ui/src/features/preview/MarkdownPreview.tsx Updates preview to support Mermaid blocks and adds renderer sandbox element
ui/leafwiki-ui/src/features/page/PageViewer.tsx Adds CSS class to page container
ui/leafwiki-ui/package.json Adds mermaid dependency
ui/leafwiki-ui/package-lock.json Updates lock file with mermaid and dependencies
Files not reviewed (1)
  • ui/leafwiki-ui/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Contributor

Copilot AI commented Oct 30, 2025

@perber I've opened a new pull request, #251, to work on those changes. Once the pull request is ready, I'll request review from you.

perber and others added 2 commits October 30, 2025 22:49
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…compatibility (#251)

* fix: move mermaid initialization to useEffect to avoid React Strict Mode issues
@perber perber merged commit a170325 into main Oct 31, 2025
4 checks passed
@perber perber deleted the feature/117-add-support-for-mermaidjs-diagrams-in-markdown-pages branch October 31, 2025 11:48
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.

Add support for Mermaid.js diagrams in Markdown pages

3 participants