Adds ten editorial diagram types with light, dark, and full-editorial examples; updates the taxonomy, gallery, descriptions, references, and synchronized plugin version; and adds maintainer/visual-proof contribution gates.
Co-authored-by: Jacopo Vendramin <vendraminjacopo@gmail.com>
Documents the dumbbell in type-bar.md's existing Variants section,
alongside grouped and stacked bars. Reference-only, matching the
precedent those two set and the one #100 landed for datalake: no
example assets, no gallery entries.
Not a new visual type. The count stays at 28 and SKILL.md is untouched
-- no selection-table row, no frontmatter hook, no manifest description
change.
Covers layout on the shared 1000x500 composition, an element pattern,
and five honesty rules: no truncated axis, one scale with both endpoints
labelled, the connector is a gap and not a trajectory, a stated row
order, and no imputed or silently dropped endpoints.
Two of those rules live in a formula rather than a drawing, so they ship
as a checker with adversarial fixtures per ADR 0005:
- Domain resolution is exhaustive over sign. A rule phrased as
"all-positive / all-negative" silently drops data that only touches
zero, and drops all-zero data entirely -- where floor == ceil == 0 and
the position formula divides by zero. resolve_domain() partitions the
space, guarantees ceil > floor, and returns a finite fallback span for
all-zero input so every dot lands on the floor.
- Non-text contrast is carried by the boundary, not the fill. Accent on
paper is 2.86:1 skin-wide, and shape redundancy does not waive WCAG
1.4.11, so the solid endpoint takes a 1px ink stroke (11.82:1) and the
connector 55% ink on light / 40% on dark (3.19:1 and 3.24:1). The
checker reads these tokens out of the reference, so prose and
thresholds cannot drift apart.
scripts/test-verify-dumbbell.py covers both polarities: all-zero,
zero-touching, mixed-sign, empty and non-finite input, observed-extremes
truncation, and the sub-3:1 treatments this replaces. Wired into CI and
CONTRIBUTING alongside the treemap and geometry gates.
Other things the geometry and house style forced: the focal bar pattern
(12% tint plus accent stroke) does not survive at a 6px dot, so the pair
separates by fill weight; a 64px row pitch from y=96 overflows the y=420
plot floor at seven rows, so pitch and origin are tabulated per row
count; rgb(45,49,66) IS the dark paper, so light-theme hairlines
composite to 1.000:1 and must invert; label offsets keyed to start/end
put both labels inside the pair on a decreasing row; a value on the
domain floor collided with its category label; and the value axis was
missing the Geist Mono 7px title every other cartesian type carries.
Co-authored-by: 0xDarkMatter <0xDarkMatter@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Added descriptions for the shipped datalake examples (example-datalake.html,
-datalake-dark.html, -datalake-full.html) to the High-Level type reference,
categorising the five-phase data stack as an unclustered High-Level variant.
Fold all line-boundary forms and escape Markdown/HTML syntax in draw.io digest headings, lists, and tables; add adversarial injection coverage; publish synchronized plugin version 2.5.1. Fixes#81.
Add Treemap as the 28th visual type with light, dark, and editorial variants; area, label, and information-marker verification; synchronized documentation and manifests; and plugin version 2.5.0.
Recognize compact Mermaid edge labels without phantom nodes while preserving near-miss operators and chained links, with regression coverage and synchronized plugin version 2.4.8. Fixes#80.
Align the documented draw.io import and diagram export commands with the shipped plugin command filenames, and publish synchronized plugin version 2.4.5.
* fix(mermaid): parse quoted participants, create, and the full sequence arrow vocabulary
The shipped sequenceDiagram extractor silently dropped or rejected
Mermaid-valid constructs:
- `participant "Alice Smith"` (quoted name, no alias) vanished from the
IR because the participant regex only accepted bare [\w.:-]+ ids.
- `participant "Alice Smith" as A` and `actor "Bob Builder" as B`
lost their quoted display names and aliases.
- `create participant B` directives were ignored.
- Bidirectional messages `A<<->>B` / `A<<-->>B` (Mermaid v11.0+)
hard-failed with "malformed edge".
- `->` / `-->` (open arrows with no arrowhead per the Mermaid docs)
were misclassified as filled arrows.
- A message touching a declared `actor` overwrote its shape with
"lifeline" because endpoints were force-added as lifelines.
The fix expands the participant regex to quoted names (with or without
an `as` alias) plus the `create` prefix, teaches the message regex the
bidirectional and open arrow forms, preserves declared actor shapes, and
classifies open arrows as undirected with no arrowhead. Multi-word
endpoints introduced by quoted declarations resolve correctly while
compact forms like `A-->>B` keep their ids. All forms were verified
against the real Mermaid v11.16.1 parser.
Adds a verification gate covering every form and updates the import
reference to document the supported sequence grammar.
* chore: bump plugin version to 2.4.2
---------
Co-authored-by: Cathryn Lavery <50469282+cathrynlavery@users.noreply.github.com>
Co-authored-by: Cathryn Lavery <cathryn@bestself.co>
* feat: add client profiles
* ci: pin shell to bash for docs_sync step
The docs_sync step runs two commands in a multi-line block. Without a
pinned shell, the windows-latest matrix leg uses pwsh, where a non-zero
exit from the first command may not abort the block, masking a gate
failure. Pin shell: bash to match the icons and summary steps.
Rename remaining "Schematic" references to diagram / diagram-design / Diagram Design across SKILL.md, onboarding.md, and style-guide.md. Rebased onto current main and bumped both plugin manifests to 2.3.5. Thanks @philyuchkoff.
* feat(motion): add base SVG layout and trust boundaries for example-paved-road-animated.html
* feat(motion): add 5-step interactive semantic items for Pattern #5 (Secure Paved Road)
* feat(motion): attach canonical SHA-pinned controller and WCAG AA controls
* docs(gallery): register example-paved-road-animated.html in assets/index.html gallery
* fix(motion): adjust attacker node Y and bypass connector to run cleanly through empty gap without crossing audit service box
* fix(motion): redesign paved road architecture with dedicated firewall node and solid opaque badge chips
* fix(motion): add signature legend bar and route audit connectors clear of firewall node
* docs(motion): add footer legend bar to fan-in queue animated diagram
* fix(motion): implement true SVG visual legend footer with mini-arrows and mini-rects
* fix(motion): correct Security Gate deployment flow, SOC arrow direction, and footer legend labels
* fix(motion): complete footer legend with 4 distinct box types matching diagram elements exactly
* chore(clean): remove queue diff from paved-road branch so diff contains only paved-road example
* chore(release): bump plugin version to 2.3.4 for synchronized version gate
* feat(motion): add example-queue-animated.html for Semantic Pattern #1 (Fan-in Queue / Bottleneck)
* docs(gallery): register example-queue-animated.html in assets/index.html gallery
* fix(motion): adjust queue container height and step 5 box placement to prevent overlap
* fix(motion): expand slot rects and right column nodes to eliminate text overflow
* chore(release): bump plugin version to 2.3.3 for synchronized version gate
* docs(motion): add footer legend bar to fan-in queue animated diagram
* fix(motion): implement true SVG visual legend footer with mini-arrows and mini-rects
* fix(motion): unify queue depth status badge into a single dynamic full-height badge
* fix(motion): refine queue traffic rates and state description for realistic backpressure math
Moves six clipped labels onto free connector segments and adds scripts/verify-geometry.py with tests, CI wiring, ADR 0005, and SKILL.md rule 6 so the defect cannot recur. Fixes#45.
- SKILL.md: confirm type/pattern/size/cuts with the user before rendering;
checklist hooks for the checkpoint and the packaged self-check
- scripts/verify-docs-sync.py: CI now fails when the frontmatter description
loses a type's lexical hook, the gallery can't reach a shipped example, or
the README tree names a missing file
- skills/diagram-design/scripts/self_check.py: distilled output checker that
ships with the skill so installed agents can verify their own diagrams;
adversarial suite in scripts/test-self-check.py
- assets/index.html: six new tabs (OAuth sequence + five single-variant
examples with a data-single variant lock) so every shipped example is
browsable
- docs/adr/0001-0004: settled policies recorded (pinned controller, taxonomy
freeze, reveal-only autoplay, byte cap + trigger-rich description)
- README: It's-working-if section, new gates documented; CONTRIBUTING: gate
table, ADR guidance, type-addition invariants; CI: two new steps
Adds a draw.io import path to the skill. Points at a .drawio file and
produces an editorial diagram fitted to where it's going — not a
format conversion.
- scripts/drawio_extract.py: decodes all four containers draw.io writes
(raw XML, deflate+base64 payloads, PNG tEXt chunks, SVG content attrs),
flattens mxGraphModel into absolute-positioned nodes/edges, and reports
structural signals: hubs, containers, depth, cycles, collapsible leaf
groups, budget flags. Deterministic half — makes no design decisions.
- references/output-spec.md: the three dials. Nine size presets with
per-size-class type ramps and safe areas; faithful/balanced/simplified
detail levels with a fixed degrade ladder; engineer/mixed/executive
audience wording; fidelity ledger; CJK font fallback.
- references/import-drawio.md: the redraw procedure — extract, set dials,
pick type, build the semantic model, redraw on the grid. Includes the
draw.io palette/shape → semantic role mappings, multi-page handling,
edge cases, and anti-patterns.
- commands/import-drawio.md: /diagram-design:import slash command.
- SKILL.md: new §11 (import + output dials), taste-gate entries, §12 output.
- export.md: sizing section — scale factors and exact-pixel targets.
- assets/example-import-drawio.html: worked import of the checked-in
fixture at balanced/doc-inline, lint-clean.
- scripts/verify-drawio-import.py: drives the real extractor against the
fixture in all four containers and checks the references stay in sync.
faithful is the one documented exemption from the §7 complexity budget,
and it's conditional: zoned above 9 nodes, split above 24. The §6
connector rules never relax for imported content.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M5f1aK1zNcgnQUnXZgG2LU
Polish after #13: 401 and retry 200 use dashed return strokes on all
three OAuth examples; first API activation bar covers the happy-path
return; type-sequence return rules no longer contradict the message table;
README quickstart names bearer+refresh rather than a full OAuth handshake.
verify-sequence-oauth.py now checks dashed returns and activation height.
Expand type-sequence.md with fragment frames, async open arrowheads,
complexity budget, and anti-patterns. Add bearer+refresh special examples
(light/dark/full) without changing the cold-cache trio. Wire README/SKILL
budget and a verify script that drives lint-skin.py.
Co-authored-by: wolf10drc <alaa@golead.io>
Optional skin for dev-tool/CLI-product social cards — titlebar chrome,
monospace type throughout, one red-orange accent. Self-contained token
table in style-guide.md so the palette linter checks it like any other
skin; flagship example built on the Loop type.
All six ring connectors are now arcs of the same radius-240 circle
(clockwise sweep, station-edge landings) instead of a mix of arcs and
right-angled verticals. type-loop.md mandates ring arcs as the type's
connector grammar — a documented exception to SKILL.md §6 rule 1, same
precedent as medallion's promotion arcs — and adds the mixed
arc + orthogonal ring as an anti-pattern. Screenshot recaptured.
- New type #27: Loop — ring of 5-8 stations around exactly one hub,
solid flow arrows around the ring, dashed write-back spokes into
the hub. Reference doc with ring layout math, budget, and
anti-patterns; flagship example "The self-improving loop" in
light/dark/full variants; gallery tab; README showcase under the
hero image.
- scripts/lint-skin.py — contributor palette linter: reads allowed
tokens from style-guide.md at runtime, flags off-palette hexes,
pure black, external assets, scripts, and off-system fonts.
Baseline file grandfathers pre-2.0 examples; --all --baseline is
green.
- Linter immediately caught 36 near-miss hexes in 9 of the newly
regenerated examples; swapped to exact series-palette tokens and
recaptured the affected screenshots.
Imports the substantive work from the aristide/diagram-design fork (PR #9)
as a curated set:
- 12 new diagram types with reference docs: radar, bar, line, gantt,
scatter, it-state, high-level, process, medallion, data-flow,
dp-integration, dp-security-matrix (26 types total)
- 86-icon monochrome IT/cloud primitive, build script, and gallery
- /diagram-design:export command with PNG/SVG export reference
- Onboarding v2: URL, skill, and folder design-token sources
- Mandatory connector rules (orthogonal elbows, label gaps, fanned
attach points, bridge crossings) + architecture/ER connector upgrades
- Series palette tokens for multi-series chart types
- THIRD_PARTY_LICENSES.md covering Tabler, Simple Icons, log-z, Devicon
Not taken from the fork: plugin-manifest identity changes, the client-brand
takeover of style-guide.md, and client-branded example files. The six
affected type examples were regenerated in the neutral editorial skin with
generic content, and their README screenshots recaptured. Reference docs
for those types were rewritten to semantic tokens and typography roles.
Version: 1.0.0 -> 2.0.0.
Co-authored-by: Aristide <mendoo.aristide@gmail.com>
Brings in the jet-black + atomic-tangerine palette repaint
(ba3062c), the consultant-special 2×2 variant, the Jobs-minimal
axis simplification (e13c993), the type-quadrant.md rule
codification (4feb760), and the Codex plugin wrapper from
PR #3 (7326c4e).
Conflict resolutions:
- skills/diagram-design/SKILL.md (add/add): keep the full 400-line
SKILL.md from this PR. PR #3's 13-line Codex wrapper becomes
unnecessary — with the real SKILL.md at skills/diagram-design/,
the Codex plugin's "skills": "./skills/" finds the full file
directly, no redirect needed.
- README.md (content): keep the new skills/diagram-design/... link
targets from this PR, combined with the "14 diagrams" count and
#eb6c36 accent from the repaint work on main.
- example-quadrant-consultant.html: moved to the new
skills/diagram-design/assets/ location with its Jobs-minimal
axis labels intact.
Also fixed the clone-install instructions to match the new
layout: clone the repo, then symlink the inner skills/diagram-design/
directory into ~/.claude/skills/diagram-design. The old instructions
(clone the repo root directly into the skills dir) would break with
this structure.
