Fix Mermaid diagram text contrast with dark backgrounds #77
Conversation
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
…grounds - Changed to solid dark background colors with white text - VS Code Extension: Deep blue (#1976d2) with white text - MCP Server: Dark green (#388e3c) with white text - Neo4j Database: Dark orange (#f57c00) with white text - Graph Layers: Dark purple (#7b1fa2) with white text - Processing Components: Dark pink (#c2185b) with white text - Added darker stroke colors for better definition - Ensures excellent readability and accessibility Fixes #75 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Changed from top-bottom (TB) to left-right (LR) flowchart layout - Simplified node labels to prevent overflow - Reduced text in each box to essential information - Maintains dark backgrounds with white text for contrast - Ensures all components and connections are fully visible 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added Semantic Layer with LLM Summaries and Code Descriptions - Updated Code Hierarchy Layer to show AST→Symbols binding - Connected Semantic Layer to LLM Integration component - Maintains horizontal layout and dark color scheme 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Restored preferred top-bottom (TB) layout - Added font size directive to help with rendering - Added "Graph Layers (Extensible)" label - Added custom layers placeholder with dashed styling - Shows example custom layers: Tests, Security, Metrics - Used dotted connections for extensibility - Maintains all layer details including AST→Symbols and Semantic Layer 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
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
This PR drastically improves the text readability in the Mermaid architecture diagram by using solid dark backgrounds with white text for maximum contrast.
Changes
Before/After
Before: Very light pastel backgrounds with default black text that appeared faint
After: Rich, solid colors with white text providing excellent contrast and readability
Benefits
Fixes #75
🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com