Skip to content

Instantly share code, notes, and snippets.

Last active July 25, 2022 21:44
What would you like to do?
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=""><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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment