diagram-design

Ask an AI coding assistant for a diagram and you often get a generic rounded-box picture that clashes with your site. This skill gives the assistant a set of diagram layouts with a restrained editorial style: no shadows, little decoration, and an accent color kept for the one or two things the reader should see first.

Each diagram type comes in three static variants: minimal light, minimal dark, and full editorial. The output is plain HTML with inline SVG, so you can open it in a browser with no build step, JavaScript or external images. The README says it can read your website to match your brand. It can also redraw existing draw.io, Mermaid or Excalidraw sources at a chosen size and level of detail.

The README lists dozens of layouts, from architecture, flowchart, sequence and ER diagrams to Sankey, Wardley map, kanban, UML class and database schema. Semantic patterns, such as a queue or a trust boundary, describe behavior separately from layout, so they reuse the nearest existing type. Motion is optional; static output is the default.