cathrynlavery/diagram-design

Project overview

It combines website-derived brand tokens, redrawing of supported diagram sources, destination-specific output tailoring, accessible SVG structure, and static-first optional motion. Imports also include a fidelity ledger that identifies content that was merged, collapsed, or dropped.

Project type

Workflow · Image & Vision

Use cases

Documents & Office

Deployment

Refer to project documentation

License

MIT

Best for

• Creators who need editorial-style diagrams aligned with a website or brand rather than generic AI-generated visuals.
• Users who want self-contained HTML and SVG diagrams with optional standalone SVG or PNG export.
• Users who need to restyle supported draw.io, Mermaid, or Excalidraw sources while retaining a record of merged, collapsed, or dropped content.

Key capabilities

• Provides reusable skill instructions, visual types, and templates for producing editorial-style diagrams as self-contained HTML and SVG.
• Fetches a supplied website, extracts its dominant palette and font stack, maps them to semantic design roles, and applies the resulting tokens to diagrams.
• Reads supported draw.io, Mermaid, and Excalidraw sources and redraws their content using the skill's design system.
• Adjusts output format, canvas size, retained detail, and wording for the intended destination and audience.
• Extracts standalone SVG or rasterizes PNG from generated HTML. PNG rasterization uses Playwright.
• Provides optional reveal, step, and loop modes with a complete static frame and reduced-motion behavior. Ordinary output remains static and script-free.
• Templates provide accessible SVG names and descriptions, prefixed IDs, and assistive-technology handling for decorative icons.
• Stores named brand profiles and selects them per project, allowing parallel workspaces to use different branding without overwriting a shared style guide.

Limitations and risks

• Excalidraw PNG and SVG exports are not accepted as import sources. The importer accepts `.excalidraw` and `.excalidraw.json` scene files.
• PNG export requires a one-time Playwright and Chromium installation.
• SVG and PNG exports omit editorial cards and headers included in full variants.
• Motion output rejects arbitrary or modified inline scripts, remote assets, CSS imports, and executable HTML attributes.
• Package updates may replace direct customizations made to `references/style-guide.md` in managed installations.

Getting started

• Add the repository to the GitHub Copilot plugin marketplace, install diagram-design from that marketplace, confirm skill discovery with `copilot skill list` or `/skills`, and then request a diagram in natural language.
• Install Playwright and Chromium once before using PNG export.

Evidence and sources

• GitHub project description: Editorial diagram design for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
• README: Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing l…
• README: Every visual type ships in three static variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser. There is no build step, JavaScript, or e…
• README: *New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.* *New in 2.3: semantic system patterns and optional accessible motion, while stat…
• README: The whole point: ship editorial-quality diagrams in **your** colors and typography, not a generic template. Out of the box, diagrams render in a clean **jet-black + atomic-tangeri…

Source updated at: 2026-09-18T18:19:54Z

Open original GitHub project