BranchesTags

Repository files navigation

Road map

Generate your team's road-maps from structured data

This project is designed to make visualizing and tweaking your road maps as easy and straightforward as possible. There are a number of good options out there, including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old lists - however none of them have made me particularly excited about drawing up our team's road maps and many of them make future edits difficult.

The goal here is to change that, by defining your road map in everyone's least loved markup language: YAML. An example road map might look something like the following.

Usage

GraphViz

The easiest way to get started viewing your road map is to output a GraphViz DOT file which can be rendered using any GraphViz renderer, like GraphViz Online. To do so, you'll need Go installed on your machine and then you can simply run:

# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot

Drop the DOT file into your GraphViz renderer of choice and you're good to go!

Example

title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i

Example Rendered Roadmap

About

Manage your project and team road maps in YAML

roadmap.sierrasoftworks.com

Topics

planningroad-map

Resources

Readme
MIT license
Activity
Custom properties

Stars

19 stars

Watchers

1 watching

Forks

4 forks
Report repository

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Road map
Generate your team's road-maps from structured data
This project is designed to make visualizing and tweaking your road maps as easy
and straightforward as possible. There are a number of good options out there,
including PowerPoint, Visio, LucidChart, Draw.io, GraphViz and just plain old
lists - however none of them have made me particularly excited about drawing
up our team's road maps and many of them make future edits difficult.
The goal here is to change that, by defining your road map in everyone's least
loved markup language: YAML. An example road map might look something like the
following.
Usage
GraphViz
The easiest way to get started viewing your road map is to output a GraphViz DOT
file which can be rendered using any GraphViz renderer, like
GraphViz Online. To do so, you'll
need Go installed on your machine and then you can simply run:
# Install the tool
go install github.com/SierraSoftworks/roadmap/tools/roadmap-graphviz@latest# Run the tool
roadmap-graphviz --in my-roadmap.yml -out my-roadmap.dot
Drop the DOT file into your GraphViz renderer of choice and you're good to go!
Example
title: Example Road Mapdescription: | This is an example of what a road map might look like.authors:
- name: Benjamin Pannellemail: contact@sierrasoftworks.comtimeline:
- date: 2021-04-21title: Project Startdescription: This is when we will start working on the project, get the team ready!objectives:
- title: Market Dominancedescription: | Provide actionable analytics drawn from big data to improve our brand identity in the advertainment sector, maximizing clickbait and establishing ourselves as a disruptor in this industry.milestones:
- id: teamtitle: Build the Teamdescription: We don't yet have anyone, that's not gonna work...deliverables:
- title: Team Leadstate: TODOrequirement: MUSTdescription: This person needs to know enough about this domain to be able to run with the project.
- title: Senior Engineer 1
- title: Intern 1..50description: This should be cheaper than hiring a proper team (right?).
- id: donetitle: Finish the Projectdescription: We don't need other milestones, do we?dependencies:
- teamdeliverables:
- title: MVPdescription: Who needs a polished product? Let's just ship the MVP and call it done.
- title: Marketing
- title: VC Funding
- title: Yachtreference: https://lmgtfy.app/?q=yacht&t=i
Example Rendered Roadmap
About
Manage your project and team road maps in YAML
roadmap.sierrasoftworks.com
Topics
planningroad-map
Resources
Readme
MIT license
Activity
Custom properties
Stars
19 stars
Watchers
1 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages