Roadmap Documentation

Introduction

Learning roadmaps have become one of the most effective ways for web enthusiasts, students, and career changers to plan their growth. A clear visual roadmap helps you understand what to learn first, how each skill connects to the next, and how to set achievable goals that move you closer to your dream career. Whether you're exploring frontend development, backend systems, AI technologies, or full-stack paths, a roadmap provides structure, direction, and a big-picture view of your progress.

For learners who want to stay consistent, track their milestones, and build a professional skill set step-by-step, having a personal roadmap makes the journey clearer and more motivating. It transforms overwhelming information into an organized, visual plan tailored to your goals.

To make this process easier, the Roadmap Editor offers a dynamic way to design, visualize, and customize your own learning path. It’s ideal for anyone who wants to create a roadmap—whether for personal growth, teaching others, or building structured career guides.

Quick Start

Curious about building your first roadmap? Explore the toolbar, add a root node, and start branching out your skills or categories. The auto-layout option helps keep your structure clean and organized, and all your edits are saved directly in your browser.

Toolbar Functions

The toolbar contains all the essential tools for building and editing your roadmap. Each button serves a specific purpose in the creation process.

Add Root

Creates a central root node representing main career paths or learning domains. Root nodes serve as the foundation of your roadmap structure and are typically placed at the center.

Add Category

Adds category nodes that branch from root nodes. Categories represent major skill groups or learning modules within your roadmap. They organize related sub-skills.

Add Sub

Creates sub-nodes for specific skills, technologies, or learning objectives. These attach to category nodes for detailed breakdown and represent individual learning items.

Connect

Establishes relationships between nodes. Click this tool, then select source and target nodes to create learning dependencies and progression paths.

Disconnect

Removes connections between nodes. Select the tool, then click on connected nodes to break their relationship when restructuring your roadmap.

Dashed

Toggles dashed border styling on nodes. Useful for highlighting optional paths, future learning, alternative routes, or suggested but not required elements.

Deco (Circle Node)

Adds decorative circle nodes or toggles circle styling. Perfect for milestones, checkpoints, visual markers, or achievement badges in your roadmap.

Delete

Removes selected nodes and their connections. Use carefully as this action cannot be undone without refreshing. Always save your work before major deletions.

Edit Node

Opens the details panel for editing node properties like title, description, and URLs for external resources. Essential for adding learning context.

Select/Move

Default tool for selecting and repositioning nodes. Drag nodes to organize your roadmap layout visually. Also used for multi-selection with shift+click.

Getting Started: Creating Your First Roadmap

Step-by-Step Guide

  1. Set Your Foundation: Click "Add Root" and click on the canvas to place your main career path (e.g., "AI Engineer")
  2. Create Categories: Use "Add Category" to create major skill areas (e.g., "Machine Learning", "Data Engineering")
  3. Connect Structure: Switch to "Connect" tool and link your root to each category to establish hierarchy
  4. Add Specific Skills: Use "Add Sub" to create detailed skills under each category (e.g., "Python", "TensorFlow")
  5. Customize Nodes: Select nodes and use the right panel to add descriptions, URLs, and metadata for context
  6. Organize Layout: Drag nodes to create a logical flow or use "Auto" layout for automatic organization
  7. Save Your Work: Use "Download JSON" or "Copy JSON" to save your roadmap for future editing

Pro Tip

Start with a simple structure and gradually add complexity. Use the search filter in the sidebar to quickly find nodes in large roadmaps.

Advanced Features

Zoom and Navigation

Use mouse wheel to zoom in/out, click and drag to pan across large roadmaps. Reset view with the "Reset" button. The zoom level is preserved during your session.

Auto Layout

The "Auto" button automatically organizes nodes in a hierarchical structure, saving time on manual arrangement. This is especially useful for complex roadmaps with many nodes.

Search and Filter

Use the search box in the sidebar to filter roots and quickly locate specific nodes in large roadmaps. This helps maintain organization as your roadmap grows.

Keyboard Shortcuts

Escape Key Esc Cancel current tool and return to Select mode
Delete Node Del Remove selected node (when in Select mode)
Mouse Wheel Scroll Zoom in and out of the canvas
Click + Drag Drag Pan around the canvas or move nodes

Best Practices

Roadmap Structure

  • Start with broad categories and drill down to specific skills
  • Use consistent naming conventions for node types
  • Limit root nodes to main career paths or learning domains
  • Group related skills under appropriate categories
  • Maintain a logical flow from foundational to advanced topics

Visual Design

  • Use dashed borders for optional or advanced content
  • Employ circle nodes for milestones or completion markers
  • Maintain consistent spacing for readability
  • Use the auto-layout feature for complex structures
  • Color-code nodes by type or difficulty level

Content Strategy

  • Add descriptive text to explain each node's purpose
  • Include relevant URLs for external learning resources
  • Use the search filter to manage large roadmaps
  • Regularly export and backup your work
  • Add estimated time commitments to learning items

Ready to Create Your Roadmap?

Start building interactive AI career roadmaps with our powerful visual editor. Transform your learning paths into engaging visual experiences.

Launch Roadmap Editor View AI Roadmap Example