feat: support mermaid diagrams #571
Open
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.
Description
This PR introduces support for rendering Mermaid diagrams directly from markdown code blocks.
To keep the project lightweight and avoid bloating our dependencies, this implementation uses client-side rendering. The alternative, server-side rendering, would require downloading Chromium, and their associated dependencies, which would significantly increase the project's size and complexity.
Additionally, the rendered diagrams are fully theme-aware and will automatically switch between light and dark modes to match the current site theme.
Types of changes
Checklist
Further comments
To see this in action, you can view a sample post at
/posts/examples/example-mermaid-in-markdownafter starting the development server.The following resources were referenced during the implementation:
I chose this client-side solution as the best balance between functionality and performance impact. Any feedback or suggestions on this implementation are welcome!
Related Issue
#326