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

Annotation Callout (italic-serif aside)

Use for editorial asides — the "italic pointer" that marks a detail without competing with the primary diagram grammar. Think marginalia: "structure IS the index", "no imports, no configuration".

Grammar

svg
<!-- 1. Italic serif text: the `callout` role from style-guide.md --><text x="904" y="36" fill="{ink}" font-size="14" font-style="italic"      font-family="{callout}" text-anchor="end">no imports, no configuration</text><!-- 2. Dashed Bézier leader --><path d="M 820 44 Q 700 84 520 216" fill="none"      stroke="{ink @ 0.40}" stroke-width="1" stroke-dasharray="4,3"/><!-- 3. Landing dot --><circle cx="520" cy="216" r="2" fill="{ink}"/>

Rules

  • Italic + serif together signal "editorial voice" against the diagram's sans/mono body. Don't substitute italic sans or italic mono — the combination is load-bearing.
  • Dashed path (stroke-dasharray="4,3") distinguishes the callout leader from primary arrows (which are solid).
  • Place callouts in margins (top-right, bottom-left). Never inside the active diagram area.
  • Max 2 callouts per diagram. More becomes commentary, not signal.

Colors

IntentTextLeader
Neutral asideinkink @ 0.40
Focal / accentaccentaccent @ 0.50
Tertiary (muted)mutedink @ 0.30

Anti-patterns

  • Solid arrow leader (reads as a flow arrow).
  • Italic sans or italic mono — the serif is load-bearing.
  • Callouts crossing primary arrows / lifelines — offset to a clear margin.
  • Using a callout to label something the diagram should label directly — put the label on the element.