Diagram Design

This skill helps design architects, engineers, and technical writers create professional diagrams that match their brand identity within seconds. It supports 39 diagram types ranging from data models and deployment architectures to Wardley maps and user journey flows. Each diagram is an optimized, self-contained HTML file with embedded SVG and CSS—no external dependencies required.

Highlights

• Automates brand token extraction from your website or local design system
• Supports 39 diagram types: flowchart, sequence, state machine, ER model, Gantt, Sankey, UML class, and more
• Redraw existing draw.io and Mermaid files at custom sizes and detail levels
• Enforces editorial quality standards: minimalist node density, clear labeling, and full accessibility
• Outputs single-file HTML diagrams optimized for web, print, and documentation
• Built-in support for light/dark themes and optional sketchy or terminal styling

The system prioritizes clarity through ruthless simplification—each element must earn its place. It enforces a non-negotiable 4-pixel grid alignment and applies six connector rules to prevent visual ambiguity. Diagrams automatically split into overview and detail views when complexity exceeds budgets. Perfect for system architects, product teams, and technical documentation workflows seeking rapid, branded visual communication without external tools.