Skip to content

Instantly share code, notes, and snippets.

@azaol-aegnor
Last active January 9, 2024 15:22
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save azaol-aegnor/f9b548b8e864c570b2a3e0c9bf1e045d to your computer and use it in GitHub Desktop.
Save azaol-aegnor/f9b548b8e864c570b2a3e0c9bf1e045d to your computer and use it in GitHub Desktop.
A handcrafted SVG version of the Workflow Diagram from David Allen's book named Getting Things Done, typped for personnal use so you might want to remove the variables at lines 17, 22, 25 and 32.
<svg class="gtd-wd" width="800" height="620" xmlns="http://www.w3.org/2000/svg"><style>
.gtd-wd {
background-color: var(--background-primary, #202020)
}
.gtd-wd :is(line, rect, path) {
stroke: var(--text-normal, #dcddde);
}
.gtd-wd :is(text, .fill) {
fill: var(--text-normal, #dcddde);
}
.gtd-wd :is(.inspect, .action) text tspan + tspan {
fill: var(--text-muted, #999);
}
.gtd-wd :is(.inspect, .action) {
--x: -100px;
--y: -100px;
transform: translate(var(--x), var(--y));
}
:is(.inspect, .action) rect {
height: 40px;
width: 200px;
fill: none;
stroke-width: 1;
}
:is(.inspect, .action) text {
stroke-width: 0;
}
.action rect {
rx: 16px;
ry: 16px;
}
</style><g style="transform: translate(50%)">
<defs class="ArrowHead">
<marker id="AH" orient="auto" refX="8" refY="5" markerWidth="10" markerHeight="10">
<path d="M0,0 L9,5 L0,10" fill="none"></path>
</marker>
</defs>
<text x="-30" y="20">“ Stuff ”</text>
<line y1="24" y2="36" marker-end="url(#AH)" />
<g class="inspect" style="--y: 40px"><rect/><text x="66" y="25">In-basket</text></g>
<line y1="84" y2="106" marker-end="url(#AH)" />
<g class="inspect" style="--y: 110px"><rect/><text x="62" y="25">What it is?</text></g>
<line y1="154" y2="176" marker-end="url(#AH)" />
<g class="inspect" style="--y: 180px"><rect/><text x="46" y="25">Is it actionable?</text></g>
<path class="fill" d="M 105 204 l 8 -5 l -8 -5 l 3 5 z" />
<line y1="200" y2="140" x1="155" x2="155" />
<line y1="140" y2="140" x1="155" x2="180" marker-end="url(#AH)" />
<g class="action" style="--x: 190px; --y: 120px"><rect/><text x="80" y="25">Trash</text></g>
<line y1="200" y2="200" x1="145" x2="180" marker-end="url(#AH)" />
<g class="action" style="--x: 190px; --y: 180px"><rect/><text><tspan x="38" y="16">Someday / Maybe</tspan><tspan x="10" y="32">tickler file: hold for review</tspan></text></g>
<line y1="200" y2="260" x1="155" x2="155" />
<line y1="260" y2="260" x1="155" x2="180" marker-end="url(#AH)" />
<g class="action" style="--x: 190px; --y: 240px"><rect/><text><tspan x="65" y="16">Reference</tspan><tspan x="10" y="32">retrievable when required</tspan></text></g>
<text x="116" y="204">NO</text>
<path class="fill" d="M -5 224 l 5 8 l 5 -8 l -5 3 z" />
<text x="-12" y="248">YES</text>
<line y1="254" y2="266" marker-end="url(#AH)" />
<g class="inspect" style="--y: 270px"><rect/><text x="18" y="25">What's the next action?</text></g>
<line x1="-104" y1="284" x2="-192" y2="242" marker-end="url(#AH)" />
<g class="action" style="--x: -398px; --y: 220px"><rect/><text><tspan x="70" y="16">Projects</tspan><tspan x="64" y="32">(planning)</tspan></text></g>
<line x1="-300" y1="264" x2="-300" y2="316" marker-end="url(#AH)" />
<g class="action" style="--x: -398px; --y: 320px"><rect/><text><tspan x="54" y="16">Project plans</tspan><tspan x="38" y="32">(review for action)</tspan></text></g>
<line x1="-192" y1="340" x2="-104" y2="294" marker-end="url(#AH)" />
<text x="-180" y="246" style="transform-origin: -148px 258px; transform: rotate(28deg);"><tspan dy="-.5em">Multistep</tspan><tspan dy="1em" dx="-4em">projects</tspan></text>
<line y1="314" y2="326" marker-end="url(#AH)" />
<text x="-112" y="345">Will it take less than 2 minutes?</text>
<line y1="352" y2="366" marker-end="url(#AH)" />
<line x1="-140" y1="370" x2="140" y2="370" />
<line x1="-140" y1="370" x2="-140" y2="400" marker-end="url(#AH)" />
<text x="-152" y="420">YES</text>
<line x1="-140" y1="430" x2="-140" y2="460" marker-end="url(#AH)" />
<g class="inspect" style="--x: -300px; --y: 470px"><rect/><text x="82" y="25">Do it</text></g>
<line x1="140" y1="370" x2="140" y2="400" marker-end="url(#AH)" />
<text x="128" y="420">NO</text>
<line x1="140" y1="430" x2="140" y2="440" marker-end="url(#AH)" />
<line y1="445" x2="300" y2="445" />
<line y1="445" y2="460" marker-end="url(#AH)" />
<line x1="300" y1="445" x2="300" y2="460" marker-end="url(#AH)" />
<g class="inspect" style="--x: -60px; --y: 470px"><rect/><text x="62" y="25">Delegate it</text></g>
<line y1="520" x2="-120" y2="560" marker-end="url(#AH)" />
<g class="inspect" style="--x: 150px; --y: 470px"><rect/><text x="74" y="25">Defer it</text></g>
<g class="action" style="--x: -260px; --y: 570px"><rect/><text><tspan x="74" y="16">Waiting</tspan><tspan x="16" y="32">for someone else to do</tspan></text></g>
<line x1="250" y1="520" x2="250" y2="538" marker-end="url(#AH)" />
<line x1="80" y1="544" x2="288" y2="544" />
<line x1="80" y1="544" x2="80" y2="560" marker-end="url(#AH)" />
<line x1="288" y1="544" x2="288" y2="560" marker-end="url(#AH)" />
<g class="action" style="--x: -20px; --y: 570px"><rect/><text><tspan x="70" y="16">Calendar</tspan><tspan x="26" y="32">to do at specific time</tspan></text></g>
<g class="action" style="--x: 190px; --y: 570px"><rect/><text><tspan x="58" y="16">Next actions</tspan><tspan x="66" y="32">to do asap</tspan></text></g>
</g></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment