GraphViz

GraphViz is an incredibly powerful tool for generating diagrams based on a textual representation of the relationships between nodes. It is a great place to start if you're trying to represent something like a road map, but writing it all by hand can be a bit tedious.

Fortunately, we've built a tool to convert your roadmap.yml file into DOT, GraphViz's textual graph description format.

Usage

Prerequisites

Our GraphViz conversion tool is written in Go, so you'll need to make sure you've installed that on your machine. We recommend Go 1.16+ since it'll let you run the conversion tool without needing to clone the repo or do any manual building.

Once you have Go installed, run the following to get the project and make the tool available to run.

# This installs the roadmap tool in your Go binaries folder.
go install github.com/SierraSoftworks/roadmap/tools/roadmap@latest

Conversion

To convert your roadmap.yml file into its DOT representation, try running the following command. It'll write the result to your terminal, but if you'd prefer, you can write it to a file as well.

roadmap render graphviz --in roadmap.yml

roadmap render graphviz --in roadmap.yml --out roadmap.dot

Output

The output generated by this tool is a DOT file which can then be rendered using GraphViz. One of the quickest ways to get started is to use an online GraphViz renderer like GraphViz Online to view the result.

Rendered

DOT File

digraph Roadmap {
  rankdir=LR;
  label="Example Road Map";
  tooltip="This is an example of what a road map might look like.\n";
  fontname="Arial";
  labelloc="t";

  node[style="filled",shape="rect",color="orange",fontname="Arial",fontsize=8];
  edge[weight=1,group="milestones"];

  {
	rank=same;

	start[label="Start",shape="house",color="",tooltip="This is the start of your roadmap."];
  
    Build_the_Team_6ad93544[label="Build the Team",tooltip="We don't yet have anyone, that's not gonna work..."];
    start -> Build_the_Team_6ad93544;
  
    Finish_the_Project_d134c72c[label="Finish the Project",tooltip="We don't need other milestones, do we?"];
    Build_the_Team_6ad93544 -> Finish_the_Project_d134c72c;
  }

  node[color="grey"];
  edge[weight=5,color="grey",penwidth=0.4,arrowsize=0.4,group="dependencies"];

  subgraph cluster_Build_the_Team_6ad93544 {
	label="Build the Team";
	tooltip="We don't yet have anyone, that's not gonna work...";
	fontsize=8;
	penwidth=0.6;

	# Deliverables for Build_the_Team_6ad93544
	Team_Lead_e3b0c442[label="Team Lead",tooltip="This person needs to know enough about this domain to be able to run with the project.",color="grey",labelhref=""];
	Team_Lead_e3b0c442 -> Build_the_Team_6ad93544;
	
	Senior_Engineer_1_e3b0c442[label="Senior Engineer 1",tooltip="",color="grey",labelhref=""];
	Senior_Engineer_1_e3b0c442 -> Build_the_Team_6ad93544;
	
	Intern_1__50_e3b0c442[label="Intern 1..50",tooltip="This should be cheaper than hiring a proper team (right?).",color="grey",labelhref=""];
	Intern_1__50_e3b0c442 -> Build_the_Team_6ad93544;
	
  }
  

  subgraph cluster_Finish_the_Project_d134c72c {
	label="Finish the Project";
	tooltip="We don't need other milestones, do we?";
	fontsize=8;
	penwidth=0.6;

	# Deliverables for Finish_the_Project_d134c72c
	MVP_e3b0c442[label="MVP",tooltip="Who needs a polished product? Let's just ship the MVP and call it done.",color="grey",labelhref=""];
	MVP_e3b0c442 -> Finish_the_Project_d134c72c;
	
	Marketing_e3b0c442[label="Marketing",tooltip="",color="grey",labelhref=""];
	Marketing_e3b0c442 -> Finish_the_Project_d134c72c;
	
	VC_Funding_e3b0c442[label="VC Funding",tooltip="",color="grey",labelhref=""];
	VC_Funding_e3b0c442 -> Finish_the_Project_d134c72c;
	
	Yacht_ea55167b[label="Yacht",tooltip="",color="grey",labelhref="https://lmgtfy.app/?q=yacht\u0026t=i"];
	Yacht_ea55167b -> Finish_the_Project_d134c72c;
	
  }
  
}  
}