docs/example_roadmap.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
 -->
<!-- Title: Roadmap Pages: 1 -->
<svg width="256pt" height="515pt" viewBox="0.00 0.00 255.59 514.80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 510.8)">
<title>Roadmap</title>
<g id="a_graph0"><a xlink:title="This is the planning road map for the [SierraSoftworks/roadmap](https://github.com/SierraSoftworks/roadmap)&#xA;project. It acts as both the plan for implementing this tool as well as a demonstration of what a road map&#xA;might look like.&#xA;&#xA;One of the things you'll immediately notice about this file is that it uses *Markdown* for formatting of&#xA;text and is designed around a structured YAML schema. The goal is to make this as easy as possible for&#xA;humans to read and reason about, while also enabling powerful visualizations to be generated based on&#xA;the content.&#xA;">
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-510.8 251.588,-510.8 251.588,4 -4,4"/>
<text text-anchor="middle" x="123.794" y="-490.2" font-family="Arial" font-size="14.00" fill="#000000">"Road map" Road map</text>
</a>
</g>
<g id="clust2" class="cluster">
<title>cluster_Design_and_Planning_91f00b3e</title>
<g id="a_clust2"><a xlink:title="The design and planning stage is where we're figuring out how this project should work and, broadly,&#xA;what kind of information we want to show on our road maps.&#xA;">
<polygon fill="none" stroke="#000000" stroke-width=".6" points="19.3416,-350 19.3416,-474 108.3416,-474 108.3416,-350 19.3416,-350"/>
<text text-anchor="middle" x="63.8416" y="-462.8" font-family="Arial" font-size="8.00" fill="#000000">Design and Planning</text>
</a>
</g>
</g>
<g id="clust3" class="cluster">
<title>cluster_Road_Map_Schema_b34786d9</title>
<g id="a_clust3"><a xlink:title="Once we know how we want a road map file to look, we should put together a schema for the file. This&#xA;will allow us to document the file structure and provide a first class editing experience to people&#xA;using it.&#xA;">
<polygon fill="none" stroke="#000000" stroke-width=".6" points="8,-218 8,-342 118.6832,-342 118.6832,-218 8,-218"/>
<text text-anchor="middle" x="63.3416" y="-330.8" font-family="Arial" font-size="8.00" fill="#000000">Road Map Schema</text>
</a>
</g>
</g>
<g id="clust4" class="cluster">
<title>cluster_GraphViz_Renderer_bc5343b5</title>
<g id="a_clust4"><a xlink:title="The first output format we would like to target with this project is GraphViz. It isn't necessarily&#xA;the most beautiful or powerful output format, but it is a simple target to demonstrate functionality&#xA;and give us a useful proof of concept.&#xA;&#xA;Most importantly, it sidesteps the issue of us figuring out how to present road maps because we have&#xA;some good examples to build off of.&#xA;">
<polygon fill="none" stroke="#000000" stroke-width=".6" points="11.5564,-140 11.5564,-210 115.1268,-210 115.1268,-140 11.5564,-140"/>
<text text-anchor="middle" x="63.3416" y="-198.8" font-family="Arial" font-size="8.00" fill="#000000">GraphViz Renderer</text>
</a>
</g>
</g>
<g id="clust5" class="cluster">
<title>cluster_Documentation_Website_4a3011e4</title>
<g id="a_clust5"><a xlink:title="The next step here is to put together a website explaining how to use road map. Initially this will&#xA;be just a documentation website, but we should design with the expectation that we will be adding&#xA;an in-page renderer for road maps and eventually an in-page editor experience as well (likely with&#xA;Monaco or similar).&#xA;">
<polygon fill="none" stroke="#000000" stroke-width=".6" points="13.4468,-8 13.4468,-132 114.2364,-132 114.2364,-8 13.4468,-8"/>
<text text-anchor="middle" x="63.8416" y="-120.8" font-family="Arial" font-size="8.00" fill="#000000">Documentation Website</text>
</a>
</g>
</g>
<!-- start -->
<g id="node1" class="node">
<title>start</title>
<g id="a_node1"><a xlink:title="This is the start of your roadmap.">
<polygon fill="#d3d3d3" stroke="#000000" points="224.1356,-435.5623 197.1356,-448 170.1356,-435.5623 170.1608,-415.4377 224.1104,-415.4377 224.1356,-435.5623"/>
<text text-anchor="middle" x="197.1356" y="-427.6" font-family="Arial" font-size="8.00" fill="#000000">Start</text>
</a>
</g>
</g>
<!-- Design_and_Planning_91f00b3e -->
<g id="node2" class="node">
<title>Design_and_Planning_91f00b3e</title>
<g id="a_node2"><a xlink:title="The design and planning stage is where we're figuring out how this project should work and, broadly,&#xA;what kind of information we want to show on our road maps.&#xA;">
<polygon fill="#ffa500" stroke="#ffa500" points="241.9374,-394 152.3338,-394 152.3338,-358 241.9374,-358 241.9374,-394"/>
<text text-anchor="middle" x="197.1356" y="-373.6" font-family="Arial" font-size="8.00" fill="#000000">Design and Planning</text>
</a>
</g>
</g>
<!-- start&#45;&gt;Design_and_Planning_91f00b3e -->
<g id="edge1" class="edge">
<title>start-&gt;Design_and_Planning_91f00b3e</title>
<path fill="none" stroke="#000000" d="M197.1356,-415.4321C197.1356,-411.7727 197.1356,-408.1132 197.1356,-404.4537"/>
<polygon fill="#000000" stroke="#000000" points="200.6357,-404.1406 197.1356,-394.1406 193.6357,-404.1407 200.6357,-404.1406"/>
</g>
<!-- Road_Map_Schema_b34786d9 -->
<g id="node3" class="node">
<title>Road_Map_Schema_b34786d9</title>
<g id="a_node3"><a xlink:title="Once we know how we want a road map file to look, we should put together a schema for the file. This&#xA;will allow us to document the file structure and provide a first class editing experience to people&#xA;using it.&#xA;">
<polygon fill="#ffa500" stroke="#ffa500" points="239.5977,-289 154.6735,-289 154.6735,-253 239.5977,-253 239.5977,-289"/>
<text text-anchor="middle" x="197.1356" y="-268.6" font-family="Arial" font-size="8.00" fill="#000000">Road Map Schema</text>
</a>
</g>
</g>
<!-- Design_and_Planning_91f00b3e&#45;&gt;Road_Map_Schema_b34786d9 -->
<g id="edge2" class="edge">
<title>Design_and_Planning_91f00b3e-&gt;Road_Map_Schema_b34786d9</title>
<path fill="none" stroke="#000000" d="M197.1356,-357.998C197.1356,-338.4259 197.1356,-318.8539 197.1356,-299.2818"/>
<polygon fill="#000000" stroke="#000000" points="200.6357,-299.0468 197.1356,-289.0469 193.6357,-299.0469 200.6357,-299.0468"/>
</g>
<!-- GraphViz_Renderer_bc5343b5 -->
<g id="node4" class="node">
<title>GraphViz_Renderer_bc5343b5</title>
<g id="a_node4"><a xlink:title="The first output format we would like to target with this project is GraphViz. It isn't necessarily&#xA;the most beautiful or powerful output format, but it is a simple target to demonstrate functionality&#xA;and give us a useful proof of concept.&#xA;&#xA;Most importantly, it sidesteps the issue of us figuring out how to present road maps because we have&#xA;some good examples to build off of.&#xA;">
<polygon fill="#ffa500" stroke="#ffa500" points="239.5349,-184 154.7363,-184 154.7363,-148 239.5349,-148 239.5349,-184"/>
<text text-anchor="middle" x="197.1356" y="-163.6" font-family="Arial" font-size="8.00" fill="#000000">GraphViz Renderer</text>
</a>
</g>
</g>
<!-- Road_Map_Schema_b34786d9&#45;&gt;GraphViz_Renderer_bc5343b5 -->
<g id="edge3" class="edge">
<title>Road_Map_Schema_b34786d9-&gt;GraphViz_Renderer_bc5343b5</title>
<path fill="none" stroke="#000000" d="M197.1356,-252.998C197.1356,-233.4259 197.1356,-213.8539 197.1356,-194.2818"/>
<polygon fill="#000000" stroke="#000000" points="200.6357,-194.0468 197.1356,-184.0469 193.6357,-194.0469 200.6357,-194.0468"/>
</g>
<!-- Documentation_Website_4a3011e4 -->
<g id="node5" class="node">
<title>Documentation_Website_4a3011e4</title>
<g id="a_node5"><a xlink:title="The next step here is to put together a website explaining how to use road map. Initially this will&#xA;be just a documentation website, but we should design with the expectation that we will be adding&#xA;an in-page renderer for road maps and eventually an in-page editor experience as well (likely with&#xA;Monaco or similar).&#xA;">
<polygon fill="#ffa500" stroke="#ffa500" points="247.5404,-106 146.7308,-106 146.7308,-70 247.5404,-70 247.5404,-106"/>
<text text-anchor="middle" x="197.1356" y="-85.6" font-family="Arial" font-size="8.00" fill="#000000">Documentation Website</text>
</a>
</g>
</g>
<!-- GraphViz_Renderer_bc5343b5&#45;&gt;Documentation_Website_4a3011e4 -->
<g id="edge4" class="edge">
<title>GraphViz_Renderer_bc5343b5-&gt;Documentation_Website_4a3011e4</title>
<path fill="none" stroke="#000000" d="M197.1356,-147.8044C197.1356,-137.3155 197.1356,-126.8266 197.1356,-116.3376"/>
<polygon fill="#000000" stroke="#000000" points="200.6357,-116.2812 197.1356,-106.2813 193.6357,-116.2813 200.6357,-116.2812"/>
</g>
<!-- README_e3b0c442 -->
<g id="node6" class="node">
<title>README_e3b0c442</title>
<g id="a_node6"><a xlink:title="We need to add a README file explaining the purpose of this project and giving some basic examples&#xA;of its use.&#xA;">
<polygon fill="#98fb98" stroke="#98fb98" points="90.3416,-448 36.3416,-448 36.3416,-412 90.3416,-412 90.3416,-448"/>
<text text-anchor="middle" x="63.3416" y="-427.6" font-family="Arial" font-size="8.00" fill="#000000">README</text>
</a>
</g>
</g>
<!-- README_e3b0c442&#45;&gt;Design_and_Planning_91f00b3e -->
<g id="edge5" class="edge">
<title>README_e3b0c442-&gt;Design_and_Planning_91f00b3e</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M90.4168,-419.0723C107.0961,-412.3404 128.9682,-403.5127 148.5663,-395.6028"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="149.2681,-396.8294 152.4534,-394.034 148.2201,-394.2329 149.2681,-396.8294"/>
</g>
<!-- Road_Map_e3b0c442 -->
<g id="node7" class="node">
<title>Road_Map_e3b0c442</title>
<g id="a_node7"><a xlink:title="We need to know what the road map file format looks like, so we'll get started with an example road&#xA;map to kick the tyres.&#xA;">
<polygon fill="#98fb98" stroke="#98fb98" points="90.3416,-394 36.3416,-394 36.3416,-358 90.3416,-358 90.3416,-394"/>
<text text-anchor="middle" x="63.3416" y="-373.6" font-family="Arial" font-size="8.00" fill="#000000">Road Map</text>
</a>
</g>
</g>
<!-- Road_Map_e3b0c442&#45;&gt;Design_and_Planning_91f00b3e -->
<g id="edge6" class="edge">
<title>Road_Map_e3b0c442-&gt;Design_and_Planning_91f00b3e</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M90.4168,-376C106.8862,-376 128.4183,-376 147.825,-376"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="148.1887,-377.4001 152.1887,-376 148.1886,-374.6001 148.1887,-377.4001"/>
</g>
<!-- roadmap_schema_json_e3b0c442 -->
<g id="node8" class="node">
<title>roadmap_schema_json_e3b0c442</title>
<g id="a_node8"><a xlink:title="Put together a JSONSchema file describing the road map file format.&#xA;">
<polygon fill="#98fb98" stroke="#98fb98" points="110.5253,-316 16.1579,-316 16.1579,-280 110.5253,-280 110.5253,-316"/>
<text text-anchor="middle" x="63.3416" y="-295.6" font-family="Arial" font-size="8.00" fill="#000000">roadmap.schema.json</text>
</a>
</g>
</g>
<!-- roadmap_schema_json_e3b0c442&#45;&gt;Road_Map_Schema_b34786d9 -->
<g id="edge7" class="edge">
<title>roadmap_schema_json_e3b0c442-&gt;Road_Map_Schema_b34786d9</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M110.8891,-288.4048C123.8221,-285.7949 137.8107,-282.9719 150.6823,-280.3744"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="150.9946,-281.7397 154.6386,-279.576 150.4407,-278.995 150.9946,-281.7397"/>
</g>
<!-- Publish_Schema_a047d41d -->
<g id="node9" class="node">
<title>Publish_Schema_a047d41d</title>
<g id="a_node9"><a xlink:title="Publish the schema file on [schemas.sierrasoftworks.com](https://schemas.sierrasoftworks.com)&#xA;so that people can reference it easily.&#xA;">
<polygon fill="#c0c0c0" stroke="#c0c0c0" points="100.1323,-262 26.5509,-262 26.5509,-226 100.1323,-226 100.1323,-262"/>
<text text-anchor="middle" x="63.3416" y="-241.6" font-family="Arial" font-size="8.00" fill="#000000">Publish Schema</text>
</a>
</g>
</g>
<!-- Publish_Schema_a047d41d&#45;&gt;Road_Map_Schema_b34786d9 -->
<g id="edge8" class="edge">
<title>Publish_Schema_a047d41d-&gt;Road_Map_Schema_b34786d9</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M100.2556,-251.4493C115.8001,-254.5863 134.0679,-258.2728 150.5262,-261.5941"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="150.4709,-263.0111 154.6688,-262.4301 151.0248,-260.2664 150.4709,-263.0111"/>
</g>
<!-- GraphViz_Generator_e3b0c442 -->
<g id="node10" class="node">
<title>GraphViz_Generator_e3b0c442</title>
<g id="a_node10"><a xlink:title="We need to write a generator which converts a road map YAML file into an appropriate GraphViz&#xA;DOT file which can then be rendered by any GraphViz renderer. This output format might only&#xA;support a subset of the total Road Map schema's features initially.&#xA;">
<polygon fill="#98fb98" stroke="#98fb98" points="106.913,-184 19.7702,-184 19.7702,-148 106.913,-148 106.913,-184"/>
<text text-anchor="middle" x="63.3416" y="-163.6" font-family="Arial" font-size="8.00" fill="#000000">GraphViz Generator</text>
</a>
</g>
</g>
<!-- GraphViz_Generator_e3b0c442&#45;&gt;GraphViz_Renderer_bc5343b5 -->
<g id="edge9" class="edge">
<title>GraphViz_Generator_e3b0c442-&gt;GraphViz_Renderer_bc5343b5</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M107.1508,-166C120.964,-166 136.2741,-166 150.2903,-166"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="150.5955,-167.4001 154.5955,-166 150.5955,-164.6001 150.5955,-167.4001"/>
</g>
<!-- VuePress_Website_69e620d5 -->
<g id="node11" class="node">
<title>VuePress_Website_69e620d5</title>
<g id="a_node11"><a xlink:title="It makes sense for us to bundle the documentation and the editor in a common website. The&#xA;easiest way for us to do this will likely be to build on [VuePress 2](https://vuepress2.netlify.app)&#xA;given our previous experience with it and Vue.&#xA;&#xA;This should then be published somewhere (presumably roadmap.sierrasoftworks.com).&#xA;">
<polygon fill="#c0c0c0" stroke="#c0c0c0" points="104.1315,-106 22.5517,-106 22.5517,-70 104.1315,-70 104.1315,-106"/>
<text text-anchor="middle" x="63.3416" y="-85.6" font-family="Arial" font-size="8.00" fill="#000000">VuePress Website</text>
</a>
</g>
</g>
<!-- VuePress_Website_69e620d5&#45;&gt;Documentation_Website_4a3011e4 -->
<g id="edge10" class="edge">
<title>VuePress_Website_69e620d5-&gt;Documentation_Website_4a3011e4</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M104.2112,-88C116.2248,-88 129.5651,-88 142.302,-88"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="142.5956,-89.4001 146.5955,-88 142.5955,-86.6001 142.5956,-89.4001"/>
</g>
<!-- Documentation_e3b0c442 -->
<g id="node12" class="node">
<title>Documentation_e3b0c442</title>
<g id="a_node12"><a xlink:title="Let's write some documentation explaining how to use road map and publish that on the website.&#xA;">
<polygon fill="#c0c0c0" stroke="#c0c0c0" points="98.1323,-52 28.5509,-52 28.5509,-16 98.1323,-16 98.1323,-52"/>
<text text-anchor="middle" x="63.3416" y="-31.6" font-family="Arial" font-size="8.00" fill="#000000">Documentation</text>
</a>
</g>
</g>
<!-- Documentation_e3b0c442&#45;&gt;Documentation_Website_4a3011e4 -->
<g id="edge11" class="edge">
<title>Documentation_e3b0c442-&gt;Documentation_Website_4a3011e4</title>
<path fill="none" stroke="#c0c0c0" stroke-width=".4" d="M98.1451,-48.0469C113.5494,-54.2642 131.9292,-61.6823 148.646,-68.4293"/>
<polygon fill="#c0c0c0" stroke="#c0c0c0" stroke-width=".4" points="148.175,-69.7489 152.4083,-69.9478 149.223,-67.1524 148.175,-69.7489"/>
</g>
</g>
</svg>