How a 28K‑Star GitHub Skill Enables AI to Generate Polished Charts

Diagram Design is an open‑source project that has attracted over 28,000 stars on GitHub. It addresses the common shortcomings of AI‑generated diagrams—such as poor color choices, overlapping lines, and unsuitable layouts for reports—by providing a rule‑based approach to styling.

The skill encodes rules for font size, spacing, color palette, node count, and visual hierarchy, allowing an AI agent to follow them and produce more polished diagrams.

Currently, Diagram Design supports 39 different chart types, including flowcharts, system architecture diagrams, sequence diagrams, state machines, data‑flow diagrams, Gantt charts, Sankey diagrams, fishbone charts, Wardley maps, Kanban boards, and user‑journey maps.

It can fetch a website’s font and color scheme in roughly 60 seconds and apply those styles to the generated charts, ensuring visual consistency with the target presentation.

The tool can also ingest existing Mermaid or draw.io files, preserving original components, relationships, groups, and direction, while letting the user select output format, canvas size, detail level, and intended audience.

By default, Diagram Design outputs an HTML page, but it also supports exporting to SVG and PNG.

Installation is straightforward: Claude Code users can run /plugin marketplace add cathrynlavery/diagram-design followed by /plugin install diagram-design@diagram-design; Codex users can execute codex plugin marketplace add cathrynlavery/diagram-design and codex plugin add diagram-design@diagram.

The project’s source code is available at https://github.com/cathrynlavery/diagram-design.