Skip to content

Conversation

@toshs
Copy link

@toshs toshs commented Aug 18, 2025

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

  • Bug Fix (non-breaking change which fixes an issue)
  • New Feature (non-breaking change which adds functionality)
  • Documentation Update (if none of the other choices apply)
  • Others (any other types not listed above)

Checklist

  • I have read the Contributing Guide
  • I have added the necessary documentation (if appropriate)
  • Breaking Change (fix or feature that would cause existing functionality to not work as expected)

This is a breaking change for any existing content that displays Mermaid syntax within a mermaid code block. Previously, these blocks would show raw code; they will now be rendered as diagrams.

For example, a post explaining how to write Mermaid syntax will now display the final diagram instead of the code itself. To preserve the raw code display, please change the code block's language identifier to something neutral like text or md.

Further comments

To see this in action, you can view a sample post at /posts/examples/example-mermaid-in-markdown after 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

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.

1 participant