Deft
Ask AI

Search

Search skills, authors and topics

cathrynlavery / diagram-design

diagram-design

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm, box plot), high-level, process,

View sourceVisualSystemsColorTypography

Install

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Sketchy Filter (hand-drawn variant)

Optional displacement filter that wobbles every stroke and edge slightly — turns any minimal variant into a hand-drawn "editorial" register without changing layout. Use when the diagram accompanies an essay rather than technical docs.

Grammar

svg
<defs>  <filter id="sketchy" x="-2%" y="-2%" width="104%" height="104%">    <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="4"/>    <feDisplacementMap in="SourceGraphic" scale="1.5"/>  </filter></defs>
<!-- Apply to a group wrapping shapes — NOT text --><g filter="url(#sketchy)">  <!-- rects, paths, circles, lines go here --></g>
<!-- Text sits OUTSIDE the filtered group — legibility stays crisp --><text ...>Labels go here</text>

Tuning

ParameterRangeEffect
baseFrequency0.01–0.04Lower = lazy wavy lines; higher = jittery. 0.02 default.
numOctaves1–3More = more noise detail. 2 is plenty.
scale1–61 barely-there, 1.5 default, 2 visible, 4+ cartoon.
seedintegerSwap for a different random pattern.

Critical rule

Filter shapes, NOT text. Displacement-mapped text becomes illegible. Structure your SVG so text is in a sibling group outside the filtered group.

When to use

  • Essay / blog post / newsletter where the diagram is the hero of a narrative page.
  • "Working sketch" register — showing something is mid-thought, not final architecture.

When not to use

  • Technical documentation (precision matters).
  • Diagrams with dense labels or tight alignments (filter reads as noise).
  • Dark variants — wobble reads as artifact on dark backgrounds. Test first.