TECH FLOW Svět Androida
← Back to the stream
github.com · picked by Petr Mišák · 51d ago

Diagram Design - 29 editorial diagram types for Claude Code

Source preview: Diagram Design - 29 editorial diagram types for Claude Code
AI summary

Diagram Design is a skill for Claude Code, Codex, and Pi that generates 29 types of editorial diagrams (architecture, flowcharts, sequence diagrams, charts, and more) in publication-ready quality. Diagrams render as HTML without dependencies and can be customized with colors and typography to match a specific brand. The skill also converts draw.io or Mermaid sources to a chosen format and detail level.

The summary is written by AI from the source; it isn’t the newsroom’s opinion. For details, read the source.
Read source

7 people have already opened the source

Tip author’s note

I'm not sure why, but most diagrams look visually unattractive in terms of design. We have plenty of capable tools for creating diagrams, such as Mermaid, Draw.io, and many others. But whether they can be used directly on the web and look modern and visually appealing is debatable. This skill could solve at least that problem for AI tools.

AI questions & answers
What are the main diagram types supported by Diagram Design?

The skill covers 29 types including architecture diagrams, flowcharts, sequence diagrams, state machines, entity-relationship models, timelines, swimlanes, quadrants, trees, org charts, Venn diagrams, pyramids, radar maps, flywheels, data flows, and charts (bar, line, Gantt, scatter, and more).

How does Diagram Design differ from tools like Mermaid or draw.io?

Diagram Design generates editorial-quality HTML diagrams without external dependencies or JavaScript. It focuses on minimalist, visually attractive designs that match the user's website design and can be customized with colors and typography within minutes.

Can diagrams from Mermaid or draw.io be converted to Diagram Design format?

Yes, the skill can redraw existing diagrams from Mermaid and draw.io sources into its own format, allowing you to choose size, detail level, and style (minimal or editorial).

How do you install Diagram Design for Claude Code?

Installation uses `/plugin marketplace add cathrynlavery/diagram-design` and `/plugin install diagram-design@diagram-design`. Automatic updates are enabled through the marketplace plugin settings.

Questions and answers are written by AI about the topic, not taken from the source; they aren’t the newsroom’s opinion.
Related from the stream
Mentions