Symmetric Sitemap Architect

A lightweight, single-file visualization tool that generates clean, symmetrical website architecture diagrams from simple JSON data.

Built with vanilla HTML, CSS, and JavaScript. Zero dependencies.

✨ Features

• Infinite Canvas: Pan and zoom support (using mouse wheel and drag) to navigate large sitemaps.
• Symmetrical Layout: Custom CSS Flexbox engine ensures tree branches are perfectly balanced.
• Live Editing: Built-in floating JSON editor to modify structure on the fly.
• UI Controls: Minimizable interface to focus purely on the visualization.
• Zero Dependencies: No React, Vue, or build steps required. Just one file.

🚀 Live Demo

(Once you host it, replace the link below with your actual URL) View Live Demo

🛠 How to Use

1. The Interface

• Zoom: Use your mouse scroll wheel to zoom in and out.
• Pan: Click and drag anywhere on the background to move around.
• Edit: Use the floating panel on the bottom right to paste your JSON. Click Generate to update the tree.

2. JSON Format

The tool expects a flat array of objects. Each object represents a page or node in the sitemap.

Property	Type	Description
id	String	Unique identifier for the node.
label	String	The name of the page (e.g., "Home").
parentId	String/Null	The id of the parent node. Use null for the root.
sections	Array	(Optional) List of content blocks inside that page card.

Example Data:

[
  { 
    "id": "1", 
    "label": "Home", 
    "parentId": null,
    "sections": ["Navbar", "Hero", "Footer"] 
  },
  { 
    "id": "2", 
    "label": "About", 
    "parentId": "1",
    "sections": ["Team", "History"] 
  }
]

🌍 Hosting on GitHub Pages

Since this is a single HTML file, hosting it is free and takes less than 2 minutes.

1. Create a Repository: Go to GitHub and create a new public repository (e.g., sitemap-architect).
2. Upload Code:

• Rename your file to index.html.
• Upload index.html to the root of the repository.

3. Activate Pages:

• Go to your repository Settings.
• Click on Pages in the left sidebar.
• Under Build and deployment > Branch, select main (or master) as the source.
• Click Save.

4. Done: Wait about 60 seconds. Your site will be live at https://<your-username>.github.io/<repo-name>/.

💻 Running Locally

1. Download the index.html file.
2. Open it in any modern web browser (Chrome, Safari, Firefox, Edge).
3. That's it!

🎨 Customization

You can easily modify the visual style by editing the <style> block in the file:

• Change Colors: Look for #18181b (Black/Dark Grey) or #f4f4f5 (Background).
• Card Size: Edit .card { width: 220px; }.
• Font: The app uses "Inter" by default, falling back to system fonts.

📄 License

This project is open source. Feel free to use it for personal or commercial projects.

---