Fix faint text in Mermaid architecture diagram

[rysweet]

Fixes #75

Summary

This PR adds a comprehensive Mermaid architecture diagram to the README with improved text visibility and readability. The diagram replaces the need for ASCII art and provides an interactive, maintainable visualization of Cue's architecture.

Changes

• Added comprehensive Mermaid architecture diagram showing all Cue components and their relationships
• Improved text visibility with darker background colors for better contrast
• Explicit black text styling (color:#000) on all diagram components
• Enhanced visual definition with darker borders and stroke styling
• Detailed component documentation explaining each architectural layer

Text Visibility Improvements

Before (Original PR #74 colors)

• Used very light colors like #e1f5fe, #e8f5e9, #fff3e0 causing poor text contrast
• No explicit text color declarations
• Faint text difficult to read

After (This PR)

• Medium-toned background colors: #b3d9ff, #c8e6c9, #ffcc80, #ce93d8, #f8bbd9
• Explicit black text: color:#000 on all components
• Enhanced borders: stroke-width:2px with darker stroke colors
• Clear, readable text with proper contrast ratios

Architecture Overview

The diagram shows three main architectural layers:

User Interfaces:

• VS Code Extension (3D visualization)
• MCP Server (AI agents)
• Neo4j Database (graph storage)

Graph Layers:

• Filesystem Layer
• Code Hierarchy Layer
• Documentation Layer

Processing Components:

• LSP Integration
• Tree-Sitter Parsing
• LLM Integration

Testing

• Verified Mermaid syntax is correct
• Confirmed text contrast meets accessibility standards
• Tested in GitHub's Mermaid renderer

Benefits

• Improved accessibility with better text contrast
• Professional documentation with interactive diagram
• Maintainable compared to ASCII art
• Educational value showing clear component relationships
• Future-proof for documentation updates

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com