feat(mermaid): interactive Mermaid diagrams (0.6.0) - #24
Merged
Merged
Conversation
```mermaid fences (and <Mermaid chart="…" />) now render as diagrams: pan, zoom (Ctrl/⌘+wheel, pinch, double-click, keyboard), a fullscreen view with a minimap, copy source, and SVG download. Colors derive from the --fw-* tokens and re-render on light/dark switches; captions come from the fence meta (```mermaid title="…"). Opt-in: `mermaid` is an optional peer dependency and the viewer lives at @inkform/framework/mermaid. Without it, fences render as a static source block. Templates ship with it enabled. Both mermaid and the viewer are lazy chunks loaded only when a diagram nears the viewport. Also: remarkMermaid exported from ./mdx, docs page + API reference, templates/examples bumped to ^0.6.0, lodash-es override (^4.18.1) for the advisory pulled in through mermaid's deps. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EaJaU595iENT8fc7mcHDWC
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
remark-directive parses "re:Work" in prose as a text directive. Nothing renders text directives, so <Mdx> emitted <div></div> inside the <p>: the "Work" was lost and React threw hydration error #418. Unknown text directives now become literal text again, in <Mdx> (callout plugin moved to remark-directives.ts) and in the per-page Markdown export. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EaJaU595iENT8fc7mcHDWC
Mermaid measures labels outside the page, then renders them as HTML
inside the SVG, where rules like `.prose p { font-size: 1.125rem }`
reached them and overflowed the node boxes (clipped text). Pin label
font-size/margins to what mermaid measured.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EaJaU595iENT8fc7mcHDWC
This branch was successfully deployed
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
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.
What
```mermaidfences now render as interactive diagrams.+/-/0to zoom; drag or arrow keys to pan once zoomed. A plain scroll still scrolls the page (a hint explains the modifier). On touch, vertical swipes scroll the page until the reader zooms in.<dialog>): scroll zooms, drag pans, a minimap appears once zoomed in (click/drag to move the view), Esc closes.--fw-*tokens (node tint from--fw-primary, a categorical palette rotated from the brand hue for pie/mindmap/timeline), re-rendered whenhtml.darkflips. Authorstylelines still win.```mermaid title="…"→ figcaption, fullscreen title, download filename, accessible name.How it stays light
remarkMermaidturns fences into<Mermaid chart caption>, the same node hand-written JSX produces.Mermaidis a static source block. The interactive one is@inkform/framework/mermaid, andmermaidis an optional peer dependency, so docs sites that never draw diagrams don't install it.npm i mermaid+mdxComponents({ Mermaid }). The three templates and the inkform-docs example ship with it on.@panzoom/panzoom, ~4 KB gz) are dynamic chunks, fetched only when a diagram nears the viewport. Verified in the production build: neither is referenced by the initial HTML of a page without diagrams.Also
guides/diagrams, API reference + READMEs + skill updated, CHANGELOG 0.6.0.^0.6.0.lodash-es: ^4.18.1. mermaid's deps (chevrotain, dagre-d3-es) pull a lodash-es with a high advisory that would failnpm audit --audit-level=high.Verified
npm run lint,typecheck,test(4 new tests for the plugin + fallback),build,audit --audit-level=high: all green locally.🤖 Generated with Claude Code
https://claude.ai/code/session_01EaJaU595iENT8fc7mcHDWC