https://github.com/aksarav/confmap
JSON to mindmap, Yaml to MindMap - Visualize your Configuration files as mindmap with search and export features
https://github.com/aksarav/confmap
client-side data-privacy json mindmap opensource visualization yaml
Last synced: 2 days ago
JSON representation
JSON to mindmap, Yaml to MindMap - Visualize your Configuration files as mindmap with search and export features
- Host: GitHub
- URL: https://github.com/aksarav/confmap
- Owner: AKSarav
- License: apache-2.0
- Created: 2025-08-23T13:50:51.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-11-14T04:20:56.000Z (7 months ago)
- Last Synced: 2025-11-14T06:12:28.707Z (7 months ago)
- Topics: client-side, data-privacy, json, mindmap, opensource, visualization, yaml
- Language: HTML
- Homepage: https://confmap.com
- Size: 31.1 MB
- Stars: 72
- Watchers: 0
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](#)
[](LICENSE)
# ConfMap
An open-source library for mind map visualization of YAML, JSON, and YML configuration files, featuring an intelligent 13-level color-coding system.
[](https://youtu.be/kYD43daiwp4)
## 🚀 Try ConfMap Now
**Visit [https://confmap.com](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](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
```bash
# 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**