Add Mermaid diagram rendering for markdown pages#415
Open
mprokopov wants to merge 5 commits intobasecamp:mainfrom
Open
Add Mermaid diagram rendering for markdown pages#415mprokopov wants to merge 5 commits intobasecamp:mainfrom
mprokopov wants to merge 5 commits intobasecamp:mainfrom
Conversation
Load Mermaid.js from CDN to render fenced mermaid code blocks as interactive diagrams, with dark mode and Turbo navigation support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Rouge doesn't recognize mermaid as a language, so fenced mermaid blocks render as plaintext. Detect them by matching mermaid keywords in the code block content. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Pin mermaid in importmap.rb and initialize in application.js instead of an inline script in the layout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
Adds client-side Mermaid.js rendering so fenced Mermaid code blocks in Writebook markdown pages are converted into interactive diagrams, including support for Turbo page navigation and light/dark theming.
Changes:
- Pin Mermaid.js in the Rails importmap for ESM loading.
- Initialize Mermaid and render detected Mermaid code blocks on each
turbo:load. - Add a plaintext fallback heuristic to detect Mermaid content when Rouge highlights as
plaintext.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| config/importmap.rb | Adds a Mermaid pin so the ESM build can be imported by application.js. |
| app/javascript/application.js | Initializes Mermaid and replaces matching <pre><code> blocks with .mermaid containers on Turbo navigation. |
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Pin exact mermaid version (11.4.1) instead of major-only
- Recompute theme on each turbo:load for dark mode switching
- Tighten graph keyword to require direction token (TD/LR/etc)
- Guard closest("pre") to prevent runtime error on edge cases
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
```mermaidcode blocks as interactive diagrams using Mermaid.jsprefers-color-schemeMotivation
Writebook supports fenced code blocks with syntax highlighting via Rouge, but there's no way to render diagrams. Mermaid is the de facto standard for text-based diagrams in markdown (flowcharts, sequence diagrams, ER diagrams, etc.) and is supported by GitHub, GitLab, Notion, and Obsidian.
Since Rouge doesn't recognize
mermaidas a language, fenced mermaid blocks fall through toplaintext. The implementation handles both cases: explicitlanguage-mermaidclasses and plaintext blocks whose content starts with a known Mermaid keyword.Screenshot
Implementation
config/importmap.rb— pins Mermaid v11 ESM build from jsDelivr CDNapp/javascript/application.js— initializes Mermaid once at startup, then on eachturbo:loadevent finds matching code blocks, replaces them with<div class="mermaid">, and callsmermaid.run()No changes to models, controllers, views, or the HTML sanitizer.
Test plan
```mermaidfenced code block containing aflowchart TDdiagram