ConfMap

An open-source library for mind map visualization of YAML, JSON, and YML configuration files, featuring an intelligent 13-level color-coding system.

🚀 Try ConfMap Now

Visit https://confmap.com to use the interactive visualizer

Upload your YAML, JSON, or YML files and instantly see them transformed into beautiful, interactive mind maps with intelligent 13-level color coding.

✨ Features

• 🎨 Intelligent Color Coding: 13 distinct colors for different hierarchy levels
• 📁 Multi-format Support: YAML, JSON, and YML files
• 🔍 Enhanced Search: Find and highlight ALL matching nodes with F3/Shift+F3 navigation
• 🎯 Multiple Layouts: Horizontal, Vertical, and Radial views
• 📱 Responsive Design: Works on all device sizes
• 🎯 Node Focus: Right-click to focus on specific nodes
• 📊 Visual Hierarchy: Clear column-based organization
• 🧹 TidyUp Mode: Alt+T to show only the lineage of a selected node (path from root + all descendants)
• 📋 Copy Lineage: Ctrl+C to copy the lineage tree of a selected node to clipboard in multiple formats
• 📂 Toggle Expand/Collapse: Alt+E or button click to toggle between expanding all nodes and collapsing all nodes
• 📝 Word Wrapping: Alt+W to toggle word wrapping for lengthy node text, improving readability of long configuration keys

🚀 Getting Started

Option 1: Use the Hosted Version (Recommended)

1. Visit https://confmap.com
2. Upload your configuration file
3. Start exploring immediately

Option 2: Run Locally

1. Clone this repository
2. Install dependencies with npm install
3. Run npm run dev for development
4. Open map.html in your browser

🛠️ Technical Details

• Built with TypeScript and ECharts
• Responsive design with Tailwind CSS
• Supports deep nesting up to 13 levels
• Automatic color cycling for deeper levels
• Interactive tooltips with level information
• Legend showing all color levels
• Smart text wrapping for improved readability

⌨️ Keyboard Shortcuts

Shortcut	Action
Alt + T	Toggle TidyUp Mode (show lineage of selected node)
Alt + E	Toggle Expand/Collapse all nodes
Alt + W	Toggle word wrapping for lengthy text
Ctrl + C	Copy lineage of selected node to clipboard
↑ / ↓	Navigate through search results
Escape	Exit TidyUp mode

🔧 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🤝 Contributing

We welcome contributions! Open issues, propose features, or submit PRs. Please keep the code style consistent and ensure the UI remains responsive and privacy-first. Note that this is the source code for the ConfMap tool - please respect the intended usage patterns.

📱 Usage Examples

Kubernetes Configurations

Perfect for visualizing complex Kubernetes YAML files with multiple nested levels. Use Alt+W to enable word wrapping for long resource names and configuration keys.

Application Configs

Great for understanding application configuration hierarchies and relationships. Word wrapping helps with lengthy environment variable names and configuration paths.

Infrastructure as Code

Ideal for Terraform, CloudFormation, and other IaC configurations. The word wrap feature is especially useful for long resource identifiers and policy statements.

🎯 Use Cases

• Configuration Analysis: Understand complex nested configurations
• Documentation: Create visual documentation of system architectures
• Onboarding: Help new team members understand system structures
• Troubleshooting: Visualize configuration relationships and dependencies
• Planning: Plan configuration changes with visual context

---

Developed with ❤️ From India