Repository navigation
Mermaid: reproduce mermaid.js themes, flatten translucent host colors, fit tall diagrams by width (alpha.21) - #3
Merged
Merged
Conversation
…, fit tall diagrams by width Diagrams were unreadable in hosts whose theme tokens are translucent (AtomUI dark: text = 85% white, code background = 4% white). DiagramBlockView passed those colors on and MermaidDiagramRenderer dropped the alpha, giving Bg = Fg = #F0F0F0 (white on white; black on black in light themes). Tall flowcharts were also squeezed to a 900px height cap, leaving ~3px text. - DiagramBlockView composites foreground / surface / accent onto the real backdrop (nearest opaque ancestor background) before calling the renderer, renders only once attached, uses an opaque fullscreen background, and keys the diagram cache by the colors, font and renderer instance actually used. - StreamMark.Mermaid: new MermaidTheme (MermaidJs default, MermaidJsNeutral, Native). The MermaidJs palettes are the real mermaid 12.2 dark / default / neutral styles, applied through Mermaider's Surface / Border / Line options plus an SVG repaint of subgraphs, edge labels and derived node shapes (stadium, cylinder, decision). A neutral DataPalette is used for structural diagrams only; charts keep categorical colors. - Diagram height is no longer capped at 900px: fit by width, 6000px safety cap. - Tests (theme palettes, node text contrast, translucent host colors, cache key, height fit), codemap, docs and repo memory updated. Packed as 0.1.0-alpha.21 for TKCode. Co-Authored-By: Claude Sonnet 5.5 <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
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.
Summary
Diagrams were unreadable in hosts whose theme tokens are translucent (AtomUI dark: text = 85% white, code background = 4% white).
DiagramBlockViewpassed those colors on andMermaidDiagramRendererdropped the alpha, givingBg = Fg = #F0F0F0(white on white; black on black in light themes). Tall flowcharts were also squeezed by a 900px height cap, leaving ~3px text.DiagramBlockViewcomposites foreground / surface / accent onto the real backdrop (nearest opaque ancestor background) before calling the renderer. It renders only once attached, uses an opaque fullscreen background, and keys the diagram cache by the colors, font and renderer instance actually used.MermaidTheme(MermaidJsdefault,MermaidJsNeutral,Native). TheMermaidJspalettes are the real mermaid 12.2dark/default/neutralstyles, applied through Mermaider'sSurface/Border/Lineoptions plus an SVG repaint of subgraphs, edge labels and derived node shapes. A neutralDataPaletteis used for structural diagrams only; charts keep categorical colors.Test plan
MermaidThemeTests(palettes, node text contrast for every theme, translucent host colors, subgraph / edge label / shape repaint, chart colors kept, diagram kind detection, snapshots) andDiagramBlockViewTests(flattening onto the real backdrop, cache key reacts to color changes, height fit)dotnet test StreamMark.slnxon macOS: 159 + 334 passed--smokepasses (includingui.diagram)🤖 Generated with Claude Code