Roadmapper - GitHub Issue Roadmaps Made Simple

How It Works

Create visual roadmaps from your GitHub issues in three simple steps

1

Label Your Issues

Add Roadmap: Now, Roadmap: Next, or Roadmap: Later labels to your GitHub issues

2

Generate Your Roadmap

Use our simple URL format with your repository details

3

Share Anywhere

Embed in your README, docs, or website - it refreshes automatically every hour

Live Example

Click on any card to view the issue on GitHub

Get Started

Register and confirm your email, then we'll show you how to add your key and embed your roadmap

1

Register your repository

Enter your GitHub repo details to get an API key. This key identifies your repository and enables roadmap generation.

2

Add the key to your repository

Create a .roadmapper file in the root of your repo containing your API key. This proves you own the repository and authorizes Roadmapper to generate roadmaps for it. The key is checked once and then cached — Roadmapper only re-verifies it every 24 hours.

echo "rm_your_key_here" > .roadmapper && git add .roadmapper && git commit -m "Add Roadmapper key" && git push

The .roadmapper file should contain only the API key — nothing else. It's safe to commit to public repos since the key is only used to identify your repository with Roadmapper.

3

Embed your roadmap

Your roadmap URL follows this format — just swap in your details:

https://roadmapper.rocketstack.co/{owner}/{repo}/{bgColor}/{textColor}

owner Your GitHub username or organization

repo Your repository name

bgColor Background color as hex (without #)

textColor Text color as hex (without #)

Example:

https://roadmapper.rocketstack.co/rocketstack-matt/roadmapper/ffffff/24292f

White background (ffffff) with dark text (24292f)

Choose your embedding method

For GitHub READMEs - Link to the viewer page for clickable cards (GitHub strips interactive elements from embedded images):

[![Roadmap](https://roadmapper.rocketstack.co/your-username/your-repo/ffffff/24292f)](https://roadmapper.rocketstack.co/view/your-username/your-repo/ffffff/24292f)

> Click the roadmap to view the interactive version with clickable cards.

For websites and documentation - Embed directly with clickable cards using an iframe:

<iframe src="https://roadmapper.rocketstack.co/embed/your-username/your-repo/ffffff/24292f"
        width="100%" height="520" frameborder="0"></iframe>

For advanced embedding - Use HTML image maps for direct embedding with clickable regions:

<!-- Visit the link below to generate the HTML code -->
https://roadmapper.rocketstack.co/html/your-username/your-repo/ffffff/24292f

Features

✨

Clean Design

Modern, minimal SVG output that looks great anywhere

🎨

Label Colors

Uses your actual GitHub label colors automatically

🔄

Auto Updates

Your roadmap refreshes every 60 minutes — just update your GitHub issue labels and the changes appear automatically

🔑

Per-Repo Keys

Simple registration proves ownership via a file in your repo

⚡

Fast & Cached

Responses cached at the edge for instant loading

🎯

Clickable Cards

Interactive viewer with direct links to GitHub issues

GitHub Issue Roadmaps Made Simple